解决Ext中的Tabpanel中items内的各个tab的数据延迟加载问题
2016-01-11 00:00
579 查看
问题:公司内测过程中发现系统中的订货政策模块中的list页面点击进入view页面速度很慢,由于我们开发时没有想到客户操作时会在tab页面中加入全选数据,
因此导致进入页面时要查询很多数据,速度慢。
思路:老大考虑到由于订货政策表中存放多个字段数据(如渠道,订货指标。。。),想把其中的各个字段分开到单独的表中,这样做的话就不会查询这么多数据,但是带来的问题是要改变原来的测好的页面布局和代码结构。所以这是下策。最后决定在list页面中进入view页面时先不查询各个tab中数据,等进入view页面后当用户点击tab时加载相应的数据。这样就能两全其美了。
过程:
原来tdhset_view.jsp的中Ext代码如下:
<link rel="stylesheet" type="text/css" href="${ctx}/widgets/ext2/resources/css/ext-all.css?v=22" /> <script type="text/javascript" src="${ctx}/widgets/ext2/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="${ctx}/widgets/ext2/ext-all.js"></script> <body style="margin:10px;"> <html:form action="/tdhset.do" method="post"> ....... <div id="tabs1"> <div id="tab1" class="x-hide-display"> <%@ include file="tabcmp.jsp"%> </div> <div id="tab2" class="x-hide-display"> <%@ include file="tabtarget.jsp"%> </div> <div id="tab3" class="x-hide-display"> <%@ include file="tabprod.jsp"%> </div> <div id="tab4" class="x-hide-display"> <%@ include file="tabmin.jsp"%> </div> <div id="tab5" class="x-hide-display"> <%@ include file="tabsizebox.jsp"%> </div> <div id="tab6" class="x-hide-display"> <%@ include file="tabother.jsp"%> </div> </div> </html:form> </body> <script language="javascript"> Ext.onReady(function() { 3ff0 var tabs = new Ext.TabPanel( { id : "tabPanel", renderTo : 'tabs1', activeTab : ${struts_form.activeTab}, autoWidth : true, height : 520, defaults : { autoScroll : true }, items : [ { contentEl : 'tab1', title : '渠道范围' },{ contentEl : 'tab2', title : '订货指标' }, { contentEl : 'tab3', title : '订货商品' }, { contentEl : 'tab4', title : '最低起订量' }, { contentEl : 'tab5', title : '配码范围' }, { contentEl : 'tab6', title : '其他信息' }], listeners:{ 'tabchange':function(){ var title = Ext.getCmp('tabPanel').getActiveTab().title; var tab = document.all.item("activeTab"); if(title =='渠道范围') { tab.value = 0; } if(title =='订货指标') { tab.value = 1; } if(title =='订货商品') { tab.value = 2; } if(title =='最低起订量') { tab.value = 3; } if(title =='配码范围') { tab.value = 4; } if(title =='其他信息') { tab.value = 5; } ;} } }); }) </script> </html>
它是在进入view页面时就把数据查出并放到不同的页面,如:
<div id="tab1" class="x-hide-display">
<%@ include file="tabcmp.jsp"%>
</div>中的tabcmp.jsp,而改成延迟加载后,刚开始时div里没有页面的,比如<div id="tab1" class="x-hide-display"></div>
必需点击tab才调用html中的src,然后走action并返回一个jsp页面到tab中<iframe></iframe>
html:'<iframe id="f_1" scrolling="auto" frameborder="0" width="100%" height="100%" src="tdhset.do?method=queryForCmp&tdhsetid='+document.all.item("tdhsetid").value+'"></iframe>'
<link rel="stylesheet" type="text/css" href="${ctx}/widgets/ext2/resources/css/ext-all.css?v=22" /> <script type="text/javascript" src="${ctx}/widgets/ext2/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="${ctx}/widgets/ext2/ext-all.js"></script> <html> <body style="margin: 10px;"> <html:form action="/tdhset.do" method="post"> ...... <div id="tabs1"> <div id="tab1" class="x-hide-display"> </div> <div id="tab2" class="x-hide-display"> </div> <div id="tab3" class="x-hide-display"> </div> <div id="tab4" class="x-hide-display"> </div> <div id="tab5" class="x-hide-display"> </div> <div id="tab6" class="x-hide-display"> <%@ include file="tabother.jsp"%> </div> </div> </html:form> </body> <script language="javascript"> Ext.onReady(function() { var tabs = new Ext.TabPanel( { id : "tabPanel", renderTo : 'tabs1', activeTab : ${struts_form.activeTab}, autoWidth : true, height : 520, defaults : { autoScroll : true }, items : [{ contentEl : 'tab6', title : '其他信息' }, { contentEl : 'tab1', title : '渠道范围', html:'<iframe id="f_1" scrolling="auto" frameborder="0" width="100%" height="100%" src="tdhset.do?method=queryForCmp&tdhsetid='+document.all.item("tdhsetid").value+'"></iframe>' },{ contentEl : 'tab2', title : '订货指标', html:'<iframe id="f_2" scrolling="auto" frameborder="0" width="100%" height="100%" src="tdhset.do?method=qureyviewline&tdhsetid='+document.all.item("tdhsetid").value+'"></iframe>' },{ contentEl : 'tab3', title : '订货商品', html:'<iframe id="f_3" scrolling="auto" frameborder="0" width="100%" height="100%" src="tdhset.do?method=queryForProd&tdhsetid='+document.all.item("tdhsetid").value+"&auth_string ="+document.all.item("auth_string").value+'"></iframe>' },{ contentEl : 'tab4', title : '最低起订量', html:'<iframe id="f_2" scrolling="auto" frameborder="0" width="100%" height="100%" src="tdhset.do?method=queryForMin&tdhsetid='+document.all.item("tdhsetid").value+"&auth_string ="+document.all.item("auth_string").value+'"></iframe>' }, { contentEl : 'tab5', title : '配码范围', html:'<iframe id="f_2" scrolling="auto" frameborder="0" width="100%" height="100%" src="tdhset.do?method=queryForSizeBox&tdhsetid='+document.all.item("tdhsetid").value+'"></iframe>' }], listeners:{ 'tabchange':function(){ var title = Ext.getCmp('tabPanel').getActiveTab().title; var tab = document.all.item("activeTab"); if(title =='其他信息') { tab.value = 0; } if(title =='渠道范围') { tab.value = 1; } if(title =='订货指标') { tab.value = 2; } if(title =='订货商品') { tab.value = 3; } if(title =='最低起订量') { tab.value = 4; } if(title =='配码范围') { tab.value = 5; } ;} } }); }) </script> </html>
相关文章推荐
- 自动刷新
- 使用UDP协议的JAVA网络聊天程序
- java中冒泡排序的实现
- js 设置焦点放到最后
- 基于JAVA的图书数据库管理-具有新增,修改,删除,查询功能
- 使用JDBC访问SQLServer 2005
- AJAX回调函数内部给全局变量赋值的问题与解决
- JAVA源码学习-ArrayList
- 印前总理辛格求达赖
- 女连环杀手都有什么共同之处?
- 挂载光盘与u盘
- testng基本注解
- Keymob成为国际最大的移动广告平台
- Keymob移动网盟与芒果移动网盟的对比
- Nginx 服务器的搭建
- java泛型--简单泛型
- python 条件判断和循环
- 内联图像简介
- how to call javascript function in webview
- vim tag not found: println