解决Ext中的Tabpanel中items内的各个tab的数据延迟加载问题

最新推荐文章于 2021-03-11 15:06:53 发布

weixin_30449453

最新推荐文章于 2021-03-11 15:06:53 发布

阅读量112

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhongjinbin/archive/2012/01/04/2312100.html

版权

问题：公司内测过程中发现系统中的订货政策模块中的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>