Extjs中实现类似iframe功能的问题

Question

先看下图：

[img]http://dl.iteye.com/upload/attachment/316926/6eafef61-19f7-3e41-b86b-00b1ddabc127.jpg[/img]

[color=darkred][b]问题描述：[/b][/color]

[b]一.就是实现left菜单栏中不同模块对应的URL在center中展示
二.在网上看过很多关于Extjs与iframe的帖子：miframe.js这个似乎性能比较好（没办法对这一块不熟悉，望不吝指教），因此望给出结合miframe.js这个实现的实例[/b]

附上，我测试代码：
Ext.onReady(function() {
var contextPath = '/TestExt/';

        var topPanel = new Ext.Panel({
            region : 'north',
            height : 60,
            collapsible : false

// bodyStyle : 'background-image:url(' + contextPath +
// '/images/longbar.jpg);background-repeat:repeat;'
});

        var footPanel = new Ext.Panel({
                    region : 'south',
                    height : 20,
                    collapsible : false
                });

        var tbPanel = new Ext.TabPanel({
                    region : 'center',
                    plugins : new Ext.ux.TabCloseMenu(),
                    enableTabScroll : true,
                    activeTab : 0,
                    items : [{
                        title : ' 欢迎页面 ',
                        closable : false
                            // ,
                            // html : "<iframe src='"
                            // + contextPath
                            // + "/view/security/jsp/welcome.jsp' width =
                            // '100%' height = '100%' marginwidth=0
                            // marginheight=0 hspace=0 frameborder ='0'
                            // ></iframe>"
                        }]
                });

        // 生成菜单树
        var tree = new Ext.tree.TreePanel({
                    el : 'menu_tree',
                    rootVisible : true, // 隐藏根节点
                    // loader:new
                    loader : new Ext.tree.TreeLoader({
                                dataUrl : encodeURI('/TestExt/menu.do')
                            }),
                    region : 'west',
                    title : '菜单栏',
                    width : 180,
                    split : true,
                    minSize : 160,
                    maxSize : 220,
                    collapsible : true,
                    layout : 'fit'
                });

        // AsyncTreeNode 会延迟加载没有展开的节点 认为凡是leaf不为true的都要延迟加载
        var root = new Ext.tree.AsyncTreeNode({
                    text : '功能模块',
                    draggable : false,// false表示这个节点将不能被拖拽
                    // 树的根节点的ID设置成0有个好处就是初始化树的时候默认先加载父亲节点为0的孩子结点
                    id : '-1'
                });

        tree.setRootNode(root);

// tree.on('click',function(node,event){
// alert(node.id);
// });
root.expand();

        var viewport = new Ext.Viewport({
                    enableTabScroll : true,
                    layout : "border",
                    autoScroll : true,
                    items : [topPanel, tree, tbPanel,footPanel]
                });
    });

[color=darkred][b]注：[/b][/color]
千万别吝惜您代码，谢谢！

Answer 1

以前写的一个供你参考：
实例化一个TabPanelInstance，然后在左树的node的Click事件中调用这个实例化对象tabpanel.addTab(...);

[code="java"]
TabPanelInstance = function() {
var _this = this;
_this.tabs = new Ext.TabPanel({
activeTab : 0,
border : false,
enableTabScroll : true,
region : 'center',
defaults : {
autoScroll : true
},
listeners :{'tabchange':function(){
//if(_this.tabs.getActiveTab().title=='主页')
}
}
});

_this.addTab = function(title, url, id, closable,path) {
    if (document.getElementById(id + 'panel')) {
        _this.tabs.setActiveTab(id + 'panel');
        return;
    }

    var label = new Ext.form.Label({
        text : '所在位置：'+path
    });
    _this.tabs.add({
                id : id + 'panel',
                title : title,
                iconCls : 'tabs',
                tbar : [label],
                contentEl : Ext.DomHelper.append(document.body, {
                            tag : 'iframe',
                            id : id,
                            style : "border 0px none;scrollbar:true",
                            src : url,
                            height : "100%",
                            width : "100%"
                        }),
                closable : closable
            }).show();
}

_this.closeActiveTab = function(message) {
    if (null != message && "" != message) {
        Ext.Msg.show({
                    title : '处理结果信息',
                    msg : message,
                    buttons : Ext.MessageBox.OK,
                    fn : Ext.emptyFn,
                    icon : 'ext-mb-info',
                    fn : function() {
                        _this.tabs.remove(_this.tabs.getActiveTab());
                    }
                });
    }else{
        _this.tabs.remove(_this.tabs.getActiveTab());
    }
}

}
[/code]