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




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

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


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

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



Style 코드 정의

?
1
2
3
4
5
6
7
8
div.item {
    background-color: blue;
    color: white;
}
span.item {
    background-color: red;
    color: white;
}


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


?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
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에 출력시키는 샘플스크립트

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
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 페이지내 샘플코드

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



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

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



by 개발로짜



저작자표시 비영리 변경금지 (새창열림)

'코드저장소 > 샘플링답변' 카테고리의 다른 글

"yj" 님께서 질문주신 팝업그리드에서 부모페이지로 값 전송관련 답변입니다.  (2) 2014.11.17

    티스토리툴바