javascript - Extjs 4.1 - 如何创建没有窗口或容器的选项卡面板？

Question

我想创建选项卡面板，以便当我单击按钮时它会打开。 我可以像这样在窗口内创建它:

var window = new Ext.Window({
            id: 'item1',
            closable: true,
            floating: true,
            collapsible: true,
            width: 900,
            height: 600,
            autoScroll: true,
        items  : mytabpanel

}).show();

但是我想知道没有窗口怎么办？ 看来 show() 不适用于 tabpanel。

Answer 1

我不完全确定您要实现的目标，假设您创建选项卡面板的代码是正确的，那么我不明白为什么您的代码不起作用。

如果您不想在窗口中渲染选项卡面板，则始终可以使用 renderTo 属性将其渲染到实际的 DOM 元素。 例如

Ext.create('Ext.tab.Panel', {
            width: 400,
            height: 400,
            renderTo: document.getElementById('component'),
            items: [{
                title: 'Foo'
            }, {
                title: 'Bar',
                tabConfig: {
                    title: 'Custom Title',
                    tooltip: 'A button tooltip'
                }
            }]
        });

其中“组件”是 HTML 页面中容器元素(例如 DIV)的 id。如果您在按钮的 onclick 事件中调用它，希望它能够满足您的要求。