Extjs 在Tab中使用Iframe

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

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

先创建一个拥有HTML的标签

 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目标

 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进行扩展：

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就比较简单一点了。

 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!