标签：订货 contentEl title items value Ext Tabpanel 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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。