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();