如何点击树的叶子节点，新建Tab面板页(ExtJS牛人进)

Question

如何实现点下左边的连接 在右边新建一个Tab，现在只能在单个Tab上操作。多个的话，JS会报错的
用的2.2版本的
//中间的选项面板 
     var center = new Ext.TabPanel({ 
             region: "center", 
             defaults: {autoScroll:true},//自动出现滚动条 
             items:[{ 
 title: "首页", 
                     html: "欢迎使用本系统！", 
                     id: "index" 
             }], 
 id : 'testTab',
 layoutOnTabChange : true,
          frame : true,             enableTabScroll: true 
     }); 
     center.setActiveTab("index");  
var tree = new Ext.tree.TreePanel({
    el: 'dvMenu',
       loader: new Ext.tree.TreeLoader({dataUrl: 'menu.php'})
    });
tree.on('click',function(node){
// Ext.Msg.show({
// title: '提示',
// msg: '你单击了' + node.id,
// animEl: node.ui.textNode
// });        var leaf = node.leaf; 
var id = node.id; 
var url = node.attributes.url; 
// alert(leaf+":"+id+":"+url);
if(leaf==true)
{ 
if (url != null) {
 var n = center.getComponent('tab'+id);  
 
 
 
 
 if (!n) {
  center.items.each(function(item){
                         if(item.closable)
                         {
                            //可以关闭的其他所有标签页全部关掉
                            center.remove(item);
                         }
                    });





// alert('tab'+id);
n = center.add({
  id:'tab'+id,
  title: node.text,
  closable: true,
  autoLoad: {
url: url,
scripts: true
}
  });

// alert('tab'+id);
  center.setActiveTab(n);
 }
 else {
  center.setActiveTab(n);
 
 }




}
else
{
alert('url为空');
}
} 

});

Answer 1

这个是我放ext api 帮助文档 做的一个demo，基本相同
参考一下。var record = [{ name: "KeyName" }, { name: "Title" }, { name: "Content" }, { name: "Url"}];
var SearchListStore = new Ext.data.Store({
    proxy: new Ext.data.HttpProxy({ url: "" }),
    reader: new Ext.data.JsonReader({ id: "KeyName", totalProperty: "totalCount", root: "data", successProperty: "success" }, record),
    baseParams: { action: "", start: 0, limit: 15 },
    remoteSort: true,
    sortInfo: { field: "KeyName", direction: "DESC" }
});
var win = new Ext.Window({
    title: "帮助文档",
    border: false,
    maximizable: true,
    constrain: true,
    minimizable: true,
    resizable: true,
    width: 800,
    height: 600,
    layout: "border",
    items: [
            { region: "west", width: 160, margins: '3 3 3 3', layout: "fit", collapsible: true, autoScroll: true,
                tbar: [
                       { xtype: "textfield", emptyText: "过滤功能模块", enableKeyEvents: true },
                       { text: "展开", handler: function() { } }, '-',
                       { text: "叠起", handler: function() { } }
                ],
                items: [{
                    xtype: "treepanel",
                    border: false,
                    autoScroll: true,
                    animate: false,
                    loader: new Ext.tree.TreeLoader({ url: "", listeners: { load: function() { (function() { }).defer(1000); } }, baseParams: { action: ""} }),
                    root: new Ext.tree.AsyncTreeNode({ text: "文档中心", expanded: true, id: "0" }),
                    listeners: {
                        click: function(node, e) {
                            if (node.id == "0") return;
                            var tabpanel = win.get(1).get(0);
                            var n = tabpanel.getComponent(node.id);
                            if (!n) {
                                n = tabpanel.add({
                                    id: node.id,
                                    title: node.text,
                                    closable: true,
                                    html: '<iframe id="iframe" src=\'' + node.attributes.url + '\' frameborder="0" scrolling="auto" style="border:0px none;height:100%; width:100%;"></iframe>'
                                });
                                tabpanel.setActiveTab(n);
                            } else {
                                tabpanel.setActiveTab(n);
                            }
                        }
                    }
                }]
                },
            { region: "center", margins: "3 3 3 0", layout: "fit", border: false,
                items: {
                    xtype: "tabpanel", activeTab: 0, frame: true,
                    items: [
                        { title: "文档首页", border: false, layout: "form",
                            tbar: [
                                { xtype: "textfield", emptyText: "请输入关键字", name: "serach",
                                    listeners: {
                                    }
                                },
                                { text: "查找", icon: "", cls: "x-btn-text-icon", handler: function() {
                                }
                                }, "-",
                                { text: "返回首页", icon: "", cls: "", handler: function() {
                                    var panelWrap = win.get(1).get(0).get(0);
                                    var panel = panelWrap.get(0);
                                    if (panel.isSearch == true) {
                                        panelWrap.remove(panel);
                                        panelWrap.add({ xtype: "panel", layout: "form", anchor: "100% 100%", isSearch: false, html: '<iframe id="helpHome-iframe" src=\'' + homeUrl + '\' frameborder="0" scrolling="auto" style="border:0px none;height:100%; width:100%;"></iframe>' });
                                        panelWrap.doLayout();
                                    }
                                }
                                }
                            ],
                            items: {
                                xtype: "panel", isSearch: false, layout: "form", anchor: "100% 100%",
                                html: '<iframe id="helpHome-iframe" src="" frameborder="0" scrolling="auto" style="border:0px none;height:100%; width:100%;"></iframe>'
                            }
                        }
                    ]
                }
            }
    ]
});
win.show();