[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이 나온다.
