TabPanel多標籤tab頁加載同一個GridPanel顯示不同的數據

     前幾天做了一個功能實現，在一個tabpanel上的多個tab標籤存放同一個數據源裏的的不同的數據，其中tab標籤的title爲自動生成的。其中存放數據裏的容器爲GridPanel，因爲是同一個GridPanel，所以store是唯一一個，如裏每個tab頁都存放一個GridPanel的話，就需要同等量的store，這裏會很麻煩。頁面效果如下圖：

 

其中，每個tab頁裏存放的不同的數據，加載數據的方式也爲異步加載，點擊事件觸發時，加載數據。

上面四個tab標籤的title爲數據裏面的字段（四個不同階段：JDMC），在加載數據源前，先有自動通過後臺方法獲得四個階段的名稱，方便tab點擊事件觸發事，根據不同的階段（JDMC）爲參數獲得數據。

前臺引用EXTJS的代碼就省略，直接上引用JS代碼：

var com_jdmc; var com_jdmc1; var com_jdmc2; var com_jdmc3; var com_jdmc4; Ext.onReady(function(){ //首先運行此方法，獲得過後獲得所需的不同階段的參數 renderPage(); //爲tab設置title，同時初始化開始定義的JDMC的值，下面往後臺傳參時使用 function getJdmcInfo(response,option){ try { var obj = 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數據 function renderPage(){ Ext.Ajax.request( { url:'xxxx.aspx', success:getJdmcInfo, failure:requestFail, params:{action:'getJDMC'} }); } function requestFail(response,option){ Ext.Msg.alert('獲得階段失敗','請檢查網絡'); } //GridPanel的內容摺疊項 var expander = new Ext.ux.grid.RowExpander({ tpl : new Ext.Template( '<p style="height:auto"><b>彙報內容:</b><br>  {HBNR}</p>' ) }); //GridPanel的數據源 var store0=new Ext.data.JsonStore({ url: 'xxxx.aspx', baseParams :{action:'getData'}, root: 'data', autoLoad:true, fields: ['HBDW','HBR','LRSJ','HBSJ','HBNR','JDMC'], reader: new Ext.data.JsonReader({}, [ {name: 'HBDW'}, {name: 'HBR'}, {name: 'LRSJ', type: 'date'}, {name: 'HBSJ', type: 'date'}, {name: 'JDMC'}, {name: 'HBNR'} ]) }); //數據容器GirdPanel var grid_info = new Ext.grid.GridPanel({ store:store0, cm:new Ext.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值] var centerTabs = new Ext.TabPanel({ id:'centerTabs', renderTo: document.body, deferredRender: false, enableTabScroll:true, activeTab: 0, width:500, height:564, headerAsText:true, margins:'0 0 0 0', 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; } else if(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; } else if(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; } else if(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數據源。