[Sencha&ExtJS] ExtJS 기초.13 - Ext.grid.Panel에 다른 DATA 불러오기

Ext.grid.Panel 에 .reconfigure() 함수 처리

이벤트 발생시(버튼을 클릭시등) 그리드의 영역에 다른 데이터 형태의 값을 넣을 때. 사용되는 함수(=메서드)

한페이지에 다양한 Grid 결과를 사용할때 유용하다.

Ext.grid.Panel클래스의 reconfigure([store],[columns]) 메서드 사용

grid 또는  tree에 새로운 store와 columns으로 재구성한다.

[ 사용방법 ] 

Ext JS Docs: reconfigure 

그리드객체.reconfigure(store,columns);

실제적으로, 한개만 설정도 가능하다.

그리드객체.reconfigure(store);

// or

그리드객체.reconfigure(columns);

// or

그리드객체.reconfigure(null, columns);

[ 그리드 재구성하는 코드 ]

원하는 id의 Grid 선택명령는 Ext.getCmp('아이디').reconfigure(스토어, 컬럼) 입니다.

//==  Gide + reconfigure (그리드 데이터 재구성하기) ==

Ext.onReady(function(){

    var column1 = [{text:'Code',flex:1,dataIndex:'code'},{text:'Company Name',flex:1,dataIndex:'com_name'}];

    var column2 = [{text:'Code',flex:1,dataIndex:'code'},{text:'Store Name',flex:1,dataIndex:'store_name'}];

    var store1 = Ext.create(

        'Ext.data.Store',

        {

            autoLoad: true,

            fields: ['code','com_name'],

            proxy: { type:'ajax', api:{read:'/json/com_grp.php'}, reader:{type:'json', rootProperty:'data'} }

        }

    );

    var store2 = Ext.create(

        'Ext.data.Store',

        {

            autoLoad: true,

            fields: ['code','store_name'],

            proxy: { type:'ajax', api:{read:'/json/store_grp.php?ccode=A001'}, reader:{type:'json', rootProperty:'data'} }

        }

    );

    Ext.create(

        'Ext.grid.Panel',

        {

            id:'grid_panel',

            title: 'Grid reconfigure() 예제',

            height: 300,

            bbar : [

                {

                    xtype: 'button',

                    text: 'JSON 1 Load',

                    handler : function() {

                        Ext.getCmp("grid_panel").reconfigure(store1,column1);

                    }

                },

                {

                    xtype: 'button',

                    text: 'JSON 2 Load',

                    handler : function() {

                        Ext.getCmp("grid_panel").reconfigure(store2,column2);

                    }

                }

            ],

            renderTo : Ext.getBody()

        }

    )

})

[ 그리드 선택 ]

버튼1을 누르면, Company Name /  버튼2를 누려면, Store Name이 나온다.