TabPanel多标签tab页加载同一个GridPanel显示不同的数据

前几天做了一个功能实现，在一个tabpanel上的多个tab标签存放同一个数据源里的的不同的数据，其中tab标签的title为自动生成的。其中存放数据里的容器为GridPanel，因为是同一个GridPanel，所以store是唯一一个，如里每个tab页都存放一个GridPanel的话，就需要同等量的store，这里会很麻烦。页面效果如下图：

其中，每个tab页里存放的不同的数据，加载数据的方式也为异步加载，点击事件触发时，加载数据。

上面四个tab标签的title为数据里面的字段（四个不同阶段：JDMC），在加载数据源前，先有自动通过后台方法获得四个阶段的名称，方便tab点击事件触发事，根据不同的阶段（JDMC）为参数获得数据。

前台引用EXTJS的代码就省略，直接上引用JS代码：

 varcom_jdmc;
 varcom_jdmc1;
 varcom_jdmc2;
 varcom_jdmc3;
 varcom_jdmc4;
 Ext.onReady(function(){
 //首先运行此方法，获得过后获得所需的不同阶段的参数
 renderPage();
 //为tab设置title，同时初始化开始定义的JDMC的值，下面往后台传参时使用
 functiongetJdmcInfo(response,option){
 try
 {
 varobj=Ext.util.JSON.decode(response.responseText);
 if(obj.data.length==4)
 {
 com_jdmc1=obj.data[0].JDMC;
 com_jdmc2=obj.data[1].JDMC;
 com_jdmc3=obj.data[2].JDMC;
 com_jdmc4=obj.data[3].JDMC;

 Ext.getCmp('tab0').setTitle(com_jdmc1);
 Ext.getCmp('tab1').setTitle(com_jdmc2);
 Ext.getCmp('tab2').setTitle(com_jdmc3);
 Ext.getCmp('tab3').setTitle(com_jdmc4);
 }
 }
 catch(err)
 {
 Ext.Msg.alert('错误信息',err.description);
 }
 }
 //后台请求方法，获得参数JMDC数据
 functionrenderPage(){
 Ext.Ajax.request(
 {
 url:'xxxx.aspx',
 success:getJdmcInfo,
 failure:requestFail,
 params:{action:'getJDMC'}
 });
 }
 functionrequestFail(response,option){
 Ext.Msg.alert('获得阶段失败','请检查网络');
 }
 //GridPanel的内容折叠项
 varexpander=newExt.ux.grid.RowExpander({
 tpl:newExt.Template(
 '<pstyle="height:auto"><b>汇报内容:</b><br>{HBNR}</p>'
 )
 });
 //GridPanel的数据源
 varstore0=newExt.data.JsonStore({
 url:'xxxx.aspx',
 baseParams:{action:'getData'},
 root:'data',
 autoLoad:true,
 fields:['HBDW','HBR','LRSJ','HBSJ','HBNR','JDMC'],
 reader:newExt.data.JsonReader({},[
 {name:'HBDW'},
 {name:'HBR'},
 {name:'LRSJ',type:'date'},
 {name:'HBSJ',type:'date'},
 {name:'JDMC'},
 {name:'HBNR'}
 ])
 });
 //数据容器GirdPanel
 vargrid_info=newExt.grid.GridPanel({
 store:store0,
 cm:newExt.grid.ColumnModel({
 columns:[
 expander,
 {header:"汇报单位",width:150,dataIndex:'HBDW'},
 {header:"汇报人",width:110,dataIndex:'HBR'},
 {header:"汇报时间",width:100,dataIndex:'HBSJ'},
 {header:"汇报阶段",width:140,dataIndex:'JDMC'}
 ]
 }),
 viewConfig:{
 forceFit:true
 },
 columnLines:true,
 plugins:expander,
 width:500,
 height:564,
 collapsible:false,//列表能否收缩
 animCollapse:false,
 iconCls:'icon-grid'
 });
 //Tab页[默认加载第一个tab,同时初始化第一个tab的数据(即初始化gridpanel)，其它的tab只有初始ID值]
 varcenterTabs=newExt.TabPanel({
 id:'centerTabs',
 renderTo:document.body,
 deferredRender:false,
 enableTabScroll:true,
 activeTab:0,
 width:500,
 height:564,
 headerAsText:true,
 margins:'0000',
 items:[
 {
 id:'tab0',
 items:[grid_info]
 },
 {
 id:'tab1'
 }
 ,
 {
 id:'tab2'
 }
 ,
 {
 id:'tab3'
 }
 ]
 });
 //为不同的TAB点击事件加载数据源
 centerTabs.on('tabchange',function(e,args){
 if(args.getItemId()=='tab0')
 {
 grid_info.getStore().removeAll();
 grid_info.getStore().load({params:{JDMC:com_jdmc1}});
 args.add(grid_info);
 args.doLayout();
 com_jdmc=com_jdmc1;
 }
 elseif(args.getItemId()=='tab1')
 {
 grid_info.getStore().removeAll();
 grid_info.getStore().load({params:{JDMC:com_jdmc2}});
 args.add(grid_info);
 args.doLayout();
 com_jdmc=com_jdmc2;
 }
 elseif(args.getItemId()=='tab2')
 {
 grid_info.getStore().removeAll();
 grid_info.getStore().load({params:{JDMC:com_jdmc3}});
 args.add(grid_info);
 args.doLayout();
 com_jdmc=com_jdmc3;
 }
 elseif(args.getItemId()=='tab3')
 {
 grid_info.getStore().removeAll();
 grid_info.getStore().load({params:{JDMC:com_jdmc4}});
 args.add(grid_info);
 args.doLayout();
 com_jdmc=com_jdmc4;
 }
 });
 });

这里面要注意的是：

1.第一个默认的tab加载的是GRIDPANEL的初始的STORE，没有参数，所以在后台需要做一下处理，默认没有参加时，获得第一个阶段的数据。

2.TAB的点击事件，

首先要清空之前的加载的GRIDPANEL的数据：grid_info.getStore().removeAll();

然后再通过不同的参数重新为GRIDPANEL加载数据：grid_info.getStore().load({params:{JDMC: com_jdmc1}});

然后再把获得新的数据的GRIDPANEL加载到TAB上：args.add(grid_info);args.doLayout();

尤其注意不要忘了：args.doLayout();

刚开始处理的时候，一直处理，tab的点击事件只有第一次可以加载上，第二的话就会空的情况，原来是没有执行tab的doLayout()方法。

后台的方法就不再赘述，就是通过方法获得JSON数据源。