前几天做了一个功能实现，在一个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数据源。

 

Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生