解决Ext中的Tabpanel中items内的各个tab的数据延迟加载问题
作者：互联网
原文链接：https://my.oschina.net/u/2610264/blog/601108
问题：公司内测过程中发现系统中的订货政策模块中的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() {
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>
转载于:https://my.oschina.net/u/2610264/blog/601108
标签：订货,contentEl,title,items,value,Ext,Tabpanel,tab,页面 来源： https://blog.csdn.net/chutongmei5165/article/details/100982042