[ExtJS강좌 19]dataview를 이용하여 목록 출력하기 - dataview list

xtype이 dataview를 이용하여 리스트형식의 화면을 출력할 수 있다.

이전과 좀 다른것들이 있다면 -_-a 개별 css를 제작하여 tpl이란 놈을 이용하여 목록을 

출력하는것이다.

"tpl" 속성이란 정확한 역활이 뭔지는 모르지만 보통 프로그램 코드들중, for문으로 이해를 하면 

쉬을듯...

sencha demo페이지를 보면 dataview를 이용하여 이미지 리스트를 뿌리는데 이해하기 어려워서 feedview의 좌측 어코디언의 리스트를 참조하여 심플하게 만들어 보았다.

dataview는 css를 제작하여 class를 적용해야하므로 간단하게나마 feed-viewer의 css를 참조하여 class 만들어보겠음!! dataview는 css빨임  

설정이 되지 않은 상태라면 다음 포스팅을 보며 설정을 한 후 진행하도록 하자

2014/06/03 - [자바스크립트이야기/Ext JS] - [ExtJS강좌 1] ExtJS 5 개발 준비!! [지겨운 헬로월드로 시작하기....]

1. css 코드 먼저 생성을 해보자

	.feed-list {
	    padding: 0 3px 0 3px;
	}
	
	.feed-list-item {
	    margin-top: 3px;
	    padding-left: 20px;
	    line-height: 20px;
	    cursor: pointer;
	    border: 1px solid #fff;
	}
	
	.feed-list-item-hover {
	    background-color: #eee;
	}
	
	.feed-list .x-item-selected {
	    font-weight: bold;
	    color: #15428B;
	    background-color: #DFE8F6;
	    border: 1px dotted #A3BAE9;
	}

2. dataview를 화면에 출력해보자

    - xtype : 'dataview' = Ext.view.View 이다 (documents 문서를 참고해보면 확인할 수 있다)

    - 꼭 Ext.view.View를 이용할필요는 없다. panel안에 items영역에다 xtype:'dataview'로 

      해주어도 무관하다.

Ext.onReady(function(){
	   //dataview 생성
	   Ext.create('Ext.view.View',{
		   //지정위치
	       renderTo : Ext.getBody(),
	       //store에 담겨진 데이터들을 tpl for="." 를 이용하여 화면에 출력한다.
	       //Ext.XTemplate : 템플릿을 생성
	       //store에 있는 fields명과 매칭을 시키면 {fields명} 식으로 값을 넣어줄수 있다.
		   tpl: new Ext.XTemplate('<tpl for="."><div class="feed-list-item">{title}</div></tpl>'),
		   trackOver: true,
		   //memory타입으로 해서 출력가능하지만 ajax 타입으로 하여 서버에서 json으로 데이터를 받아왔다.
           store : Ext.create('Ext.data.Store',{
 	           fields : ['title'],
 	 	           autoLoad: true,
 	 	           proxy: {
 	 			        type: 'ajax',
 	 			        url: '/dataviewData.jsp',
 	 			        reader: {
 	 			            type: 'json', 
 	 			            rootProperty: 'item'
 	 			        }
 	 			    }
	 	        }),
	 	    //기본 클래스 적용
            cls: 'feed-list',
            //각 dataview list의 클래스적용
            itemSelector: '.feed-list-item',
            //마우스 오버시 적용되는 클래스적용
            overItemCls: 'feed-list-item-hover'
	   })
})

3. 마지막으로 store에서 호출한 dataviewData.jsp페이지 (서버페이지)에서 json 데이터를 만들어서 클라이언트로 보내주자

자바 기준으로 설명할것이라, 

spring을 이용하시는 분들은 잭슨라이브러리??로 json을 파싱하시면 될것이고

일반 jsp로 하신다면 json-simple jar 라이브러리를 등록해주자

파일첨부

json-simple-1.1.1.jar

PHP는 자체제공하는 json함수를 사용하자

JSONObject jsonObj = new JSONObject();
JSONObject jsonObj2 = null;
JSONArray jsonArr = new JSONArray();
jsonObj2 = new JSONObject();
jsonObj2.put("title", "메뉴1");
jsonArr.add(jsonObj2);

jsonObj2 = new JSONObject();
jsonObj2.put("title", "메뉴2");
jsonArr.add(jsonObj2);

jsonObj2 = new JSONObject();
jsonObj2.put("title", "메뉴3");
jsonArr.add(jsonObj2);

jsonObj2 = new JSONObject();
jsonObj2.put("title", "메뉴4");
jsonArr.add(jsonObj2);
jsonObj.put("item", jsonArr);
PrintWriter pw = response.getWriter();
System.out.println(jsonObj.toString());
pw.print(jsonObj);
pw.flush();
pw.close();

이걸로 xtype이 dataview강의는 끝났음~

심플하지만 복잡해지면 한없이 복잡해지는것이 dataview이다.

템플릿이라는 경우의 수가 너무 많기 때문...

 실행 화면

0123

도움이 되셨다면 공감클릭! 궁금하신점은 댓글!!