Question

我在这里有工作代码：

         var panel = Ext.create('Ext.tab.Panel', {
            width: 500,
            height: 300,
            activeTab: 1, //sets active tab (2nd)
            title: 'Specific Data',
            floating: true, // make this panel an absolutely-positioned floating component
            items: [{
                title: 'Tab 1',
                html: 'data data data'
            }, {
                title: 'Tab 2',
                html: 'different data'
            }]

        });

我正在尝试添加一个工具栏（或按钮，不确定我应该使用哪个）来添加一个简单的“关闭窗口”命令。有什么帮助吗？

Answer 1

以下是向面板标题添加关闭按钮的示例。您可以使用tools配置属性。 Ext docs for this解释了许多选项。

这里还有一个小提琴：http://jsfiddle.net/cfarmerga/JVMUG/1/

var panel = Ext.create('Ext.tab.Panel', {
    renderTo: Ext.getBody(),
    width: 500,
    height: 300,
    activeTab: 1, //sets active tab (2nd)
    title: 'Specific Data',
    floating: true, // make this panel an absolutely-positioned floating component
    items: [{
        title: 'Tab 1',
        html: 'data data data',

        // to enable closing of a tab
        closable: true

    }, {
        title: 'Tab 2',
        html: 'different data'
    }],

    tools: [
        { type: 'close', handler: function () { this.up('panel').close() } }
    ]


});

Answer 2

你有没有探讨过这些文档？这是非常常见的功能，您应该能够在Sencha的API文档中轻松找到它。有关此特定问题，请参阅此处：http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.panel.Panel-cfg-tbar

使用选项卡为面板创建工具栏

2 个答案: