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

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

 

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

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

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

[c-sharp]  view plain copy

1. var com_jdmc;  
2. var com_jdmc1;  
3. var com_jdmc2;  
4. var com_jdmc3;  
5. var com_jdmc4;  
6. Ext.onReady(function(){  
7.    //首先运行此方法，获得过后获得所需的不同阶段的参数  
8.    renderPage();  
9.    //为tab设置title，同时初始化开始定义的JDMC的值，下面往后台传参时使用  
10.    function getJdmcInfo(response,option){  
11.     try  
12.     {  
13.          var obj = Ext.util.JSON.decode(response.responseText);  
14.          if(obj.data.length==4)  
15.          {  
16.            com_jdmc1=obj.data[0].JDMC;  
17.            com_jdmc2=obj.data[1].JDMC;  
18.            com_jdmc3=obj.data[2].JDMC;  
19.            com_jdmc4=obj.data[3].JDMC;  
20.              
21.            Ext.getCmp('tab0').setTitle(com_jdmc1);  
22.            Ext.getCmp('tab1').setTitle(com_jdmc2);  
23.            Ext.getCmp('tab2').setTitle(com_jdmc3);  
24.            Ext.getCmp('tab3').setTitle(com_jdmc4);  
25.          }  
26.     }  
27.     catch(err)  
28.     {  
29.      Ext.Msg.alert('错误信息',err.description);  
30.     }  
31.    }     
32.  //后台请求方法，获得参数JMDC数据  
33.  function renderPage(){  
34.    Ext.Ajax.request(  
35.    {  
36.         url:'xxxx.aspx',  
37.         success:getJdmcInfo,  
38.         failure:requestFail,  
39.         params:{action:'getJDMC'}  
40.        });  
41.    }  
42.    function requestFail(response,option){  
43.     Ext.Msg.alert('获得阶段失败','请检查网络');  
44.    }  
45.     //GridPanel的内容折叠项  
46.    var expander = new Ext.ux.grid.RowExpander({  
47.         tpl : new Ext.Template(  
48.             '<p style="height:auto"><b>汇报内容:</b><br>  {HBNR}</p>'  
49.         )  
50.     });  
51.     //GridPanel的数据源  
52.      var store0=new Ext.data.JsonStore({  
53.             url: 'xxxx.aspx',  
54.             baseParams :{action:'getData'},  
55.             root: 'data',  
56.             autoLoad:true,  
57.             fields: ['HBDW','HBR','LRSJ','HBSJ','HBNR','JDMC'],  
58.             reader: new Ext.data.JsonReader({}, [  
59.                {name: 'HBDW'},  
60.                {name: 'HBR'},  
61.                {name: 'LRSJ', type: 'date'},  
62.                {name: 'HBSJ', type: 'date'},  
63.                {name: 'JDMC'},  
64.                {name: 'HBNR'}  
65.             ])  
66.         });  
67.   //数据容器GirdPanel  
68.    var grid_info = new Ext.grid.GridPanel({  
69.         store:store0,  
70.         cm:new Ext.grid.ColumnModel({  
71.             columns: [  
72.                 expander,  
73.                 {header: "汇报单位", width: 150, dataIndex: 'HBDW'},  
74.                 {header: "汇报人", width: 110, dataIndex: 'HBR'},  
75.                 {header: "汇报时间", width: 100, dataIndex: 'HBSJ'},  
76.                 {header: "汇报阶段", width: 140, dataIndex: 'JDMC'}  
77.             ]  
78.         }),  
79.         viewConfig: {  
80.             forceFit:true  
81.         },   
82.         columnLines: true,    
83.         plugins: expander,       
84.         width: 500,  
85.         height: 564,  
86.         collapsible: false,//列表能否收缩  
87.         animCollapse: false,  
88.         iconCls: 'icon-grid'  
89.     });  
90.     //Tab页[默认加载第一个tab,同时初始化第一个tab的数据(即初始化gridpanel)，其它的tab只有初始ID值]  
91.      var centerTabs = new Ext.TabPanel({  
92.         id:'centerTabs',  
93.         renderTo: document.body,  
94.         deferredRender: false,  
95.         enableTabScroll:true,  
96.         activeTab: 0,  
97.         width:500,  
98.         height:564,  
99.         headerAsText:true,  
100.         margins:'0 0 0 0',  
101.         items: [  
102.         {  
103.             id:'tab0',  
104.             items:[grid_info]  
105.         },  
106.         {  
107.           id:'tab1'  
108.         }  
109.         ,  
110.         {  
111.          id:'tab2'  
112.         }  
113.         ,  
114.         {  
115.           id:'tab3'  
116.         }  
117.         ]  
118.     });  
119.    //为不同的TAB点击事件加载数据源  
120.    centerTabs.on('tabchange',function(e,args){  
121.      if(args.getItemId()=='tab0')  
122.      {  
123.         grid_info.getStore().removeAll();  
124.         grid_info.getStore().load({params:{JDMC: com_jdmc1}});  
125.         args.add(grid_info);  
126.         args.doLayout();   
127.         com_jdmc=com_jdmc1;  
128.      }  
129.      else if(args.getItemId()=='tab1')  
130.      {  
131.         grid_info.getStore().removeAll();  
132.         grid_info.getStore().load({params:{JDMC: com_jdmc2}});  
133.         args.add(grid_info);  
134.         args.doLayout();   
135.        com_jdmc=com_jdmc2;  
136.      }  
137.      else if(args.getItemId()=='tab2')  
138.      {  
139.        grid_info.getStore().removeAll();  
140.        grid_info.getStore().load({params:{JDMC:com_jdmc3}});  
141.        args.add(grid_info);  
142.        args.doLayout();   
143.      com_jdmc=com_jdmc3;  
144.      }  
145.       else if(args.getItemId()=='tab3')  
146.      {   
147.         grid_info.getStore().removeAll();  
148.         grid_info.getStore().load({params:{JDMC:com_jdmc4}});  
149.         args.add(grid_info);  
150.         args.doLayout();   
151.       com_jdmc=com_jdmc4;  
152.      }  
153.     });  
154. });  

这里面要注意的是：

   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数据源。