Ext Panel中根據條件動態切換Grid的方法

1. 首先在父panel中放置兩個panel
一個佈局在north另一個佈局在center
editTemplate: function(v){
var edltTemplatePanel = new Ext.Panel({
labelAlign: 'right',
//height: 20,
width: 650,
bodyStyle:'padding:5px',
resizable:false ,
autoScoll: true, //grid顯示出滾動條
border: false,
layout : "border",
items: [
ProgramScheduleTemplate.getEditFormPanel()
,ProgramScheduleTemplate.getEditGridPanel()//將virtualGrid與editGrid均放到這個panel中，便於type的切換
]
});


2. 將需要切換的grid放入center佈局的panel中，根據條件選用不同的Grid。
//編輯的時候改變模板類型
getEditGridPanel: function(){
var record = smAll.getSelected();
var type = record.get('type');//根據是虛擬的還是直播的節目模板調用不同的grid
editGridPanel = new Ext.Panel({
region: 'center',
layout:'fit',
width: 600,
bodyStyle:'padding:5px',
resizable:false ,
border: false,
items:[type == 2? ProgramScheduleTemplate.getVirtualGrid():ProgramScheduleTemplate.geteditGrid()]
});
return editGridPanel;
},

3. 由combox的select事件觸發change條件

listeners:{
select:{
fn: function(combo, record, index){
var status = Ext.Msg.show({
title: "提示",
msg: "您要更改節目單模板，則建立在原模板上的節目將要丟失，確定要更改嗎？",
buttons: Ext.Msg.YESNO,
icon: Ext.Msg.WARNING,
fn: function(btn){
if(btn == 'yes'){
recordid = -1; //type變換的時候 讓 store請求空list
if(index === 1){//虛擬
editGridPanel.removeAll();
var grid = ProgramScheduleTemplate.getVirtualGrid();
grid.getStore().removeAll();
editGridPanel.add(grid);
editGridPanel.ownerCt.doLayout();
}else if(index === 0){//直播
editGridPanel.removeAll();
var grid = ProgramScheduleTemplate.geteditGrid();
grid.getStore().removeAll();
editGridPanel.add(grid);
editGridPanel.ownerCt.doLayout();
}
}else{

}

}
});


這是和業務相關的，主要是下面這幾句實現動態切換grid從而改變顯示的列：
editGridPanel.removeAll();
var grid = ProgramScheduleTemplate.getVirtualGrid();
grid.getStore().removeAll();
editGridPanel.add(grid);
editGridPanel.ownerCt.doLayout();