extjs - 将 TabPanel 动态添加到面板区域

Question

我在一个区域中有一个带有 TreePanel 的面板布局。用户单击树中的一个节点，TabPanel 应显示在另一个区域，其中包含该树节点的信息、编辑工具等。

我有一个带有树面板和触发的 on('click') 事件的工作布局。但是，我似乎无法让 TabPanel 能够在布局中呈现。

如果我允许 TabPanel 作为面板的一部分而不是在单击事件中呈现，它会按预期工作。

我不确定在将选项卡面板呈现为命名元素方面缺少什么。任何帮助，将不胜感激。

下面是有问题的代码。

非常感谢

斯蒂芬

    var treePanel = new Ext.tree.TreePanel({
    id: 'tree-panel',
    title : 'Site Tree',
    region : 'center',
    height : 300,
    minSize: 150,
    autoScroll: true,
    rootVisible: false,
    lines: false,
    singleExpand: true,
    useArrows: true,

    dataUrl:'admin.page.getSiteTreeChildren',
root: {
        nodeType: 'async',
        text: 'nowt here',
        draggable: false
    }
});

treePanel.on('click', function(n){
    var sn = this.selModel.selNode || {}; // selNode is null on initial selection
    renderPageTabs(n.id);
}); 

function renderPageTabs(resourceid) {
    pageTabPanel.render('contentpanel');
    alert('resourceid'+resourceid);
}

var pageTabPanel = new Ext.TabPanel({
    activeTab: 0,
    plain:true,
    defaults:{autoScroll: true},
    items:[{
            title: 'Page Overview',
            html: 'This will be the page overview detail tab'
        },{
            title: 'Content Editor',
            html: 'This will be the page editor tab'
        },{
            title: 'Property Editor',
            html : 'This will be the property editor tab'
        },{
            title: 'Workflow',
            html : 'This will be the workflow tab'
        }
    ]
})

var contentPanel = {
    id : 'contentpanel',
    region : 'center',
    margins : '0 0 0 0',
    border : false
};

// TODO perhaps the tool bar should be in a north region of this panel
var dashPanel = new Ext.Panel({
            layout : 'border',
            height : 500,
            items : [{
                        layout : 'border',
                        id : 'site-nav',
                        region : 'west',
                        collapsible : true,
                        border : false,
                        split : true,
                        margins : '0 0 0 0',
                        width : 275,
                        minSize : 100,
                        maxSize : 500,
                        items : [actionPanel, treePanel]
                    }, contentPanel],
            renderTo : 'dashboardPanel'
        });

Answer 1

我认为您没有以正确的方式使用 render 方法。

Tab Panel: render

If you are using a Container object to house this Component, then do not use the render method.

您的树是否允许在任何时候单击树节点时打开选项卡？一次会有多个标签吗？如果是这样，我想也许您只想使用 .add() 而不是 .render()。在执行 .add() 之后，您还需要在容器面板上调用 .doLayout() 以便它显示。

您可能需要更改您的 renderPageTabs 函数，以便它在其中为每个选项卡构建 pageTabPanel 对象，然后使用 .add() 将其放置在 contentpanel 对象中。