Extjs 在Tab中使用Iframe

最新推荐文章于 2020-04-07 10:43:15 发布

转载最新推荐文章于 2020-04-07 10:43:15 发布 · 125 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xiexing1986/archive/2009/11/06/1597181.html

文章标签：

#php #ux

本文介绍了在ExtJS框架中如何有效地使用Iframe组件来实现动态加载内容到Tab面板的方法。提供了两种方案：一种是在单一Tab中通过更新Iframe的src属性来显示不同页面；另一种是通过扩展BoxComponent创建更专业的Tab布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在Tab中不是很好实用Iframe，提供两种参考方式：

一：单一的tab,每次左边的tree的node事件都会更新的。

先创建一个拥有HTML的标签

Code
new Ext.TabPanel({
                id:'main-tabs',
                activeTab:0,
                region:'center',
                margins:'39 5 5 0',
                resizeTabs:true,
                tabWidth:150,
                deferredRender:true,
                layoutOnTabChange:true,
                defaults:{autoScroll: true},
                items:[
                    {
                        id:'main-view',
                        title:'Loading

',
                        tag: 'iframe',
                        autoHeight:true,
                        autoScroll:true,
                        autoWidth:true,
                        frame:true,
                        html:'<iframe id="HelloIframe" src="module/ComplainAll.html" width="100%" height="800" frameborder="0" scrolling="auto"></iframe>'
                    }]
              })
         ]
    });

在每次更新的时候更新src目标

Code
var tree = Ext.getCmp('Complain-tree');
    tree.on('append', function(tree, p, node){
       if(node.id == 1001){
           node.select.defer(100100, node);
       }
    });
    var sm = tree.getSelectionModel();
    sm.on('beforeselect', function(sm, node){
         return node.isLeaf();
    });
    function LoadTab(nodetext,nodeid){
        var centerpanel = Ext.getCmp('main-tabs');
        var  tabs=Ext.getCmp('main-view');
        tabs.setTitle(nodetext);

        if(nodeid == 100100){
            Ext.get('HelloIframe').dom.src="module/ComplainAll.aspx";
        }else if(nodeid == 100101){
           Ext.get('HelloIframe').dom.src="module/Replay.aspx";
        }else
              Ext.get('HelloIframe').dom.src="hello.aspx";
        centerpanel.setActiveTab(tabs);
    }
    sm.on('selectionchange', function(sm, node){
        Ext.getCmp('main-view').setTitle(node.text);
        LoadTab(node.text,node.id)
    });

二、这种方式显得比较professional一点

首先对BoxComponent进行扩展：

Code
Ext.ux.IFrameComponent = Ext.extend(Ext.BoxComponent, {
     onRender : function(ct, position){
          this.el = ct.createChild({tag: 'iframe', id: 'iframe-'+ this.id, frameBorder: 0, src: this.url});
     }
});

这样tab就比较简单一点了。

Code
var tab = center.add({
                    id : node.id,
                    iconCls : "tabicon",
                    xtype : "panel",
                    title : node.text,
                    closable : true,
                    layout : "fit",
                    frame : true,
                    items: [ new Ext.ux.IFrameComponent({ id: node.id+"panel", url: "../Search.aspx" }) ]
                });

        center.setActiveTab(tab);

关于这个的详细信息可以参考：http://www.extjs.com/forum/showthread.php?t=18144

和http://www.extjs.com/forum/showthread.php?p=54322#post54322

不在多说!

Best Wishes!

转载于:https://www.cnblogs.com/xiexing1986/archive/2009/11/06/1597181.html