問題：公司內測過程中發現系統中的訂貨政策模塊中的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>