"ExtJS_OS" 님께서 질문주신 dataview 관련 답변 코드 입니다.

"ExtJS_OS" 님께서 질문주신 ExtJS 4.X버전으로 DATAVIEW 응용내용에 대한 답변 샘플입니다.

질문1)  DataView를 사용시 동적으로 tpl을 변경할 수 있을 까요? el에서 변경을 해야할지요..?

답변 : 네 동적으로 TPL속성을 이용하여 템플릿 변경이 가능합니다.

패널 툴바에 버튼 클릭시 tpl 타입변경은 다음과 같습니다.

데이터스토어에 대한 데이터는 동일하다 가정하고 템플릿을 변경하게끔 예를 들었습니다.

Style 코드 정의

div.item {
	background-color: blue;
	color: white;
}
span.item {
	background-color: red;
	color: white;
}

memory 타입의 데이터 스토어를 이용한 ExtJS 코드

Ext.onReady(function(){
	Ext.create('Ext.panel.Panel',{
		renderTo : Ext.getBody(),
		title : '동적 TPL 생성예제',
		width : 200,
		height : 200,
		items:[{
	              xtype : 'dataview',
	              id : 'dynamic_dataview',
            	  tpl: new Ext.XTemplate(
	                      '<tpl for=".">',
	                           '<div class="item">',
	                                   '{title}',
	                           '</div>',
	                       '</tpl>'),
	              itemSelector: '.item',
	              store : Ext.create('Ext.data.Store',{
	                              fields : ['title'],
	                              data: [
	                                   {title:'EXTJS_DATAVIEW내용1'},
	                                   {title:'EXTJS_DATAVIEW내용2'},
	                                   {title:'EXTJS_DATAVIEW내용3'},
	                                   {title:'EXTJS_DATAVIEW내용4'}
	                              ],
	                              proxy: {
	                                   type: 'memory'
	                              }
	                       })
        }],
		fbar : [{
			text : '동적 TPL 변경하기',
			handler : function(btn) {
				//dataview컴포넌트.tpl 속성에 새로운 XTemplate 적용
				Ext.getCmp("dynamic_dataview").tpl = new Ext.XTemplate('<tpl for=".">',
								                          					'<span class="item">',
								                                  				'{title}',
								                          					'</span>',
								                  	  					'</tpl>');
				//dataview컴포넌트객체.refresh()를 통해 화면 재정의
				Ext.getCmp("dynamic_dataview").refresh();
			}
		}]
	})
})

동적 템플릿의 핵심은 dataview의 tbl에 새로운 템플릿을 담아 주신 다음 

dataview refresh() 함수를 적용해시면 되겠습니다.

질문2)  DataView의 Store를 원하는 시점에 호출이 가능한가요?

답변 : 네 동적호출 가능합니다. 

         단, proxy type이 'ajax'일 경우이거나 'memory' 타입의 data내에 값이 존재하지 않는상태에서 

         이벤트 발생시 store에 add로 작업해주셔야 합니다. 

         이유는 Store가 autoLoad되는 시점은 데이터스토어 공간내에 data에 데이터가 존재하면 

          autoLoad 속성을 무시하고 자동 호출이 됩니다.

동적으로 Store 호출을 위한 샘플 코드 입니다

이벤트 발생시 데이터스토어 load하여 dataview에 출력시키는 샘플스크립트

Ext.onReady(function(){
	Ext.create('Ext.panel.Panel',{
		renderTo : Ext.getBody(),
		title : '동적으로 데이터스토어 호출',
		width : 200,
		height : 200,
		items:[{
	              xtype : 'dataview',
	              id : 'dynamic_dataview',
            	  tpl: new Ext.XTemplate(
	                      '<tpl for=".">',
	                           '<div class="item">',
	                                   '{title}',
	                           '</div>',
	                       '</tpl>'),
	              itemSelector: '.item',
	              store : Ext.create('Ext.data.Store',{
	                              fields : ['title'],
	                              proxy : {
	      							type : 'ajax',
	      							api : {
	      								read : '/dynamic.json'
	      							},
	      							reader : {
	      								type : 'json',
	      								success : "success",
	      								root : 'items'
	      							}
	      						}
	                       })
        }],
		fbar : [{
			text : '데이터스토어 호출',
			handler : function(btn) {
				Ext.getCmp("dynamic_dataview").getStore().load();
			}
		}]
	})
})

Ajax Call에서 response 받고자 하는 JSON 페이지내 샘플코드

{
	"items" : [{"title" : "동적데이터1" },{"title" : "동적데이터2" },{"title" : "동적데이터3" }],
	"success" : true
}

json 파일대신 db조회후 동적 데이터 생성할시,

 php / jsp 등 해당 json 파싱을 사용하셔서  규격에 맞춰서 작업하시면 되겠습니다.

by 개발로짜