"ExtJS_OS" 님께서 질문주신 ExtJS 4.X버전으로 DATAVIEW 응용내용에 대한 답변 샘플입니다.
답변 : 네 동적으로 TPL속성을 이용하여 템플릿 변경이 가능합니다.
패널 툴바에 버튼 클릭시 tpl 타입변경은 다음과 같습니다.
데이터스토어에 대한 데이터는 동일하다 가정하고 템플릿을 변경하게끔 예를 들었습니다.
div.item { background-color: blue; color: white; } span.item { background-color: red; color: white; }
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() 함수를 적용해시면 되겠습니다.
답변 : 네 동적호출 가능합니다.
단, proxy type이 'ajax'일 경우이거나 'memory' 타입의 data내에 값이 존재하지 않는상태에서
이벤트 발생시 store에 add로 작업해주셔야 합니다.
이유는 Store가 autoLoad되는 시점은 데이터스토어 공간내에 data에 데이터가 존재하면
autoLoad 속성을 무시하고 자동 호출이 됩니다.
동적으로 Store 호출을 위한 샘플 코드 입니다
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(); } }] }) })
{ "items" : [{"title" : "동적데이터1" },{"title" : "동적데이터2" },{"title" : "동적데이터3" }], "success" : true }
json 파일대신 db조회후 동적 데이터 생성할시,
php / jsp 등 해당 json 파싱을 사용하셔서 규격에 맞춰서 작업하시면 되겠습니다.
by 개발로짜
"yj" 님께서 질문주신 팝업그리드에서 부모페이지로 값 전송관련 답변입니다. (2) | 2014.11.17 |
---|