前幾天做了一個功能實現(xiàn)，在一個tabpanel上的多個tab標簽存放同一個數(shù)據(jù)源里的的不同的數(shù)據(jù)，其中tab標簽的title為自動生成的。其中存放數(shù)據(jù)里的容器為GridPanel，因為是同一個GridPanel，所以store是唯一一個，如里每個tab頁都存放一個GridPanel的話，就需要同等量的store，這里會很麻煩。頁面效果如下圖：
其中，每個tab頁里存放的不同的數(shù)據(jù)，加載數(shù)據(jù)的方式也為異步加載，點擊事件觸發(fā)時，加載數(shù)據(jù)。
上面四個tab標簽的title為數(shù)據(jù)里面的字段（四個不同階段：JDMC），在加載數(shù)據(jù)源前，先有自動通過后臺方法獲得四個階段的名稱，方便tab點擊事件觸發(fā)事，根據(jù)不同的階段（JDMC）為參數(shù)獲得數(shù)據(jù)。
前臺引用EXTJS的代碼就省略，直接上引用JS代碼：
- varcom_jdmc;
- varcom_jdmc1;
- varcom_jdmc2;
- varcom_jdmc3;
- varcom_jdmc4;
- Ext.onReady(function(){
- //首先運行此方法，獲得過后獲得所需的不同階段的參數(shù)
- 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);
- }
- }
- //后臺請求方法，獲得參數(shù)JMDC數(shù)據(jù)
- functionrenderPage(){
- Ext.Ajax.request(
- {
- url: 'xxxx.aspx' ,
- success:getJdmcInfo,
- failure:requestFail,
- params :{action: 'getJDMC' }
- });
- }
- functionrequestFail(response,option){
- Ext.Msg.alert( '獲得階段失敗' , '請檢查網(wǎng)絡' );
- }
- //GridPanel的內(nèi)容折疊項
- varexpander= new Ext.ux.grid.RowExpander({
- tpl: new Ext.Template(
- '<pstyle="height:auto"><b>匯報內(nèi)容:</b><br>{HBNR}</p>'
- )
- });
- //GridPanel的數(shù)據(jù)源
- varstore0= 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' }
- ])
- });
- //數(shù)據(jù)容器GirdPanel
- vargrid_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的數(shù)據(jù)(即初始化gridpanel)，其它的tab只有初始ID值]
- varcenterTabs= new Ext.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點擊事件加載數(shù)據(jù)源
- 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，沒有參數(shù)，所以在后臺需要做一下處理，默認沒有參加時，獲得第一個階段的數(shù)據(jù)。
2.TAB的點擊事件，
首先要清空之前的加載的GRIDPANEL的數(shù)據(jù)：grid_info.getStore().removeAll();
然后再通過不同的參數(shù)重新為GRIDPANEL加載數(shù)據(jù)：grid_info.getStore().load({params:{JDMC: com_jdmc1}});
然后再把獲得新的數(shù)據(jù)的GRIDPANEL加載到TAB上：args.add(grid_info);args.doLayout();
尤其注意不要忘了： args.doLayout();
剛開始處理的時候，一直處理，tab的點擊事件只有第一次可以加載上，第二的話就會空的情況，原來是沒有執(zhí)行tab的doLayout()方法。
后臺的方法就不再贅述，就是通過方法獲得JSON數(shù)據(jù)源。
更多文章、技術交流、商務合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯(lián)系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
