TabPanel多标签tab页加载同一个GridPanel显示不同的数据
2011-04-07 18:57
555 查看
前几天做了一个功能实现,在一个tabpanel上的多个tab标签存放同一个数据源里的的不同的数据,其中tab标签的title为自动生成的。其中存放数据里的容器为GridPanel,因为是同一个GridPanel,所以store是唯一一个,如里每个tab页都存放一个GridPanel的话,就需要同等量的store,这里会很麻烦。页面效果如下图:
![](http://hi.csdn.net/attachment/201104/7/0_1302172583ONc2.gif)
其中,每个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数据源。
![](http://hi.csdn.net/attachment/201104/7/0_1302172583ONc2.gif)
其中,每个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数据源。
相关文章推荐
- TabPanel多标签tab页加载同一个GridPanel显示不同的数据
- 如何在TabControl中响应右键鼠标(添加一个ContextMenu就可以了),如何让在tab标签处右键菜单和在内容处右键菜单显示不同的菜单?
- asp.net mvc jqgrid 同一个页面查询不同的表,jqgrid显示不同表的表头和数据并且分页
- 怎么在页面还没有加载完成时候,在页面上显示一个:"数据加载中......"
- 实现:左边为菜单导航,当一个菜单中包含多个Tabs,并且不同的Tab要根据权限的不同显示。
- 动态加载的同一个Label的同一行字体显示不同的颜色
- [EXTJs]TabPanel动态生成,加载组件时,组件不能正常显示的解决办法
- Gridpanel数据加载成功后,触发事件,让表格第一行的数据显示在下面的formpanel
- 解决Ext中的Tabpanel中items内的各个tab的数据延迟加载问题
- mui 控制页面标签显示隐藏 调回上一页重新加载数据
- Gridpanel数据加载成功后,触发事件,让表格第一行的数据显示在下面的formpanel
- 如何用数据驱动实现通用化巡检APP(如何一个界面里添加多个点击拍照按钮并显示在不同的imageview里)
- datalist 的用法。也是增删改查,但是比较智能。用数据绑定的方式,可以有不同的显示方法,下面是对一个表的增删改查的参考代码
- ActionBar简单使用——添加搜索按钮;让不同的Activity上显示不同的ActionBar;添加Tab标签;实现DrawerLayout并用ActionBarDrawerToggle控制
- 在写extjs中一个panel里放了3个grid,但就是不显示页面,后台给出数据,前台也有加载数据
- echarts使用,在一个悬浮窗里显示两组不同的数据。
- 如何将不同信息的数据对象合并显示到同一个页面上或者滚动窗口中
- ext布局问题之tab panel内的gridpanel内容数据变多,出现滚动条
- ExtJS两个grid用同一个store显示不同的数据
- Ext2.0之Tabpanel AJAX远程加载多标签页面模式开发技巧