Динамическое добавление 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

Я не думаю, что вы используете метод рендеринга правильным образом.

Панель вкладок: рендер

Если вы используете объект-контейнер для размещения этого компонента, не используйте метод рендеринга.

Собирается ли ваше дерево открывать вкладку при каждом нажатии на узел дерева? Будет ли несколько вкладок одновременно? Если так, я думаю, может быть, вы просто хотите использовать .add () вместо .render (). После того, как вы выполните .add (), вам также нужно будет вызвать .doLayout () на панели контейнера, чтобы он появился.

Вам может потребоваться изменить функцию renderPageTabs, чтобы она создавала объект pageTabPanel внутри нее для каждой вкладки, а затем использовала .add () для помещения ее в объект contentpanel.

Answer 2

Я предполагаю, что pageTabPanel не определен во время запуска обработчика. Попробуйте удалить ключевое слово var перед "var pageTabPanel =", чтобы сделать его глобальной переменной.

Если это работает, это проблема области видимости / переменной. Лучшее решение - присвоить идентификатору tabpanel идентификатор и вызвать Ext.getCmp ('tabpanelid'). Render ('contentpanel') в вашем методе renderPageTabs.

Надеюсь, это поможет.

С уважением, Штеффен