Question

我有一个Panel布局，在一个区域中有一个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

如果您使用Container对象来容纳此Component，则不要使用render方法。

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

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

Answer 2

我假设在触发处理程序时未定义pageTabPanel。尝试删除“var pageTabPanel =”前面的var关键字，使其成为全局变量。

如果可行，则是范围/变量问题。更好的解决方案是给tabpanel一个id并在你的renderPageTabs方法中调用Ext.getCmp（'tabpanelid'）。render（'contentpanel'）。

希望有所帮助。

此致斯特芬

动态添加TabPanel到面板区域

2 个答案: