注册 登录
> 编程技术

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

系统 1767 0

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

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

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

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

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

[c-sharp] view plain copy
  1. varcom_jdmc;
  2. varcom_jdmc1;
  3. varcom_jdmc2;
  4. varcom_jdmc3;
  5. varcom_jdmc4;
  6. Ext.onReady(function(){
  7. //首先运行此方法，获得过后获得所需的不同阶段的参数
  8. renderPage();
  9. //为tab设置title，同时初始化开始定义的JDMC的值，下面往后台传参时使用
  10. functiongetJdmcInfo(response,option){
  11. try
  12. {
  13. varobj=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;
  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. functionrenderPage(){
  34. Ext.Ajax.request(
  35. {
  36. url: 'xxxx.aspx' ,
  37. success:getJdmcInfo,
  38. failure:requestFail,
  39. params :{action: 'getJDMC' }
  40. });
  41. }
  42. functionrequestFail(response,option){
  43. Ext.Msg.alert( '获得阶段失败' , '请检查网络' );
  44. }
  45. //GridPanel的内容折叠项
  46. varexpander= new Ext.ux.grid.RowExpander({
  47. tpl: new Ext.Template(
  48. '<pstyle="height:auto"><b>汇报内容:</b><br>{HBNR}</p>'
  49. )
  50. });
  51. //GridPanel的数据源
  52. varstore0= 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. vargrid_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. varcenterTabs= 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: '0000' ,
  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数据源。

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


更多文章、技术交流、商务合作、联系博主

微信扫码或搜索：z360901061

微信扫一扫加我为好友

QQ号联系： 360901061

您的支持是博主写作最大的动力，如果您喜欢我的文章，感觉我的文章对您有帮助，请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧，狠狠点击下面给点支持吧，站长非常感激您！手机微信长按不能支付解决办法：请将微信支付二维码保存到相册，切换到微信，然后点击微信右上角扫一扫功能，选择支付二维码完成支付。

【本文对您有帮助就好】元

您的支持是博主写作最大的动力，如果您喜欢我的文章，感觉我的文章对您有帮助，请用微信扫描上面二维码支持博主2元、5元、10元、自定义金额等您想捐的金额吧，站长会非常 感谢您的哦！！！

发表我的评论
最新评论 总共0条评论