前几天做了一个功能实现,在一个tabpanel上的多个tab标签存放同一个数据源里的的不同的数据,其中tab标签的title为自动生成的。其中存放数据里的容器为GridPanel,因为是同一个GridPanel,所以store是唯一一个,如里每个tab页都存放一个GridPanel的话,就需要同等量的store,这里会很麻烦。页面效果如下图:
其中,每个tab页里存放的不同的数据,加载数据的方式也为异步加载,点击事件触发时,加载数据。
上面四个tab标签的title为数据里面的字段(四个不同阶段:JDMC),在加载数据源前,先有自动通过后台方法获得四个阶段的名称,方便tab点击事件触发事,根据不同的阶段(JDMC)为参数获得数据。
前台引用EXTJS的代码就省略,直接上引用JS代码:
这里面要注意的是:
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数据源。