如何使用 extjs 在 Widget 内实现 Tab 面板？答案

【问题标题】：how to implement Tab panel inside Widget with extjs?如何使用 extjs 在 Widget 内实现 Tab 面板？
【发布时间】：2013-08-13 09:09:31
【问题描述】：

我正在尝试在小部件中实现 TAB 面板。

我可以看到它，但完全在错误的地方......这是 VIEW 的代码我怎样才能把它放在 widget.TESTusersettings????

我想 renderTo: Ext.getBody() 在这里不正确...你是什么意思？

Ext.define("TEST.view.settings.UserSettings", {
    extend: "Ext.window.Window",
    alias: "widget.TESTdusersettings",

    requires: [
        "TEST.overrides.LocalComboBox",
        "TEST.common.LocaleManager",
        "Ext.form.Panel"
    ],

    width: 600,
    height: 300,
    border: false,
    closeAction: "hide",
    resizable: false,

    layout: "fit",

    title: 'User Settings',


    initComponent: function() {
        debugger;
        Ext.create('Ext.tab.Panel', {
            width: 300,
            height: 200,
            activeTab: 0,
            items: [
                {
                    title: 'Userdata',
                    bodyPadding: 10,
                    html: 'A simple tab'
                },
                {
                    title: 'Connections',
                    html: 'Connections one'
                },
                {
                    title: 'Payment',
                    html: 'Payment one'
                },
                {
                    title: 'Bills',
                    html: 'Bills one'
                }
            ],
            renderTo: Ext.getBody()
        });
    }

});

【问题讨论】：

您希望将工具栏放在哪里？看，如果你正在使用项目并在里面定义一个 TabPanel，你最好使用tbar 或fbar 属性并在那里定义你的工具栏。否则，请扩展您的列表。请提供更多信息，您希望将其放置在何处。
我有一个小部件：widget.TESTdusersettings 在这里我需要放置 TabPabel....

标签： javascript extjs tabs panel

【解决方案1】：

把初始化改成这个。

initComponent: function() {
    var me = this;
    Ext.applyIf(me, {
        items: Ext.create('Ext.tab.Panel', {
            activeTab: 0,
            items: [
                {
                    title: 'Userdata',
                    bodyPadding: 10,
                    html: 'A simple tab'
                },
                {
                    title: 'Connections',
                    html: 'Connections one'
                },
                {
                    title: 'Payment',
                    html: 'Payment one'
                },
                {
                    title: 'Bills',
                    html: 'Bills one'
                }
            ]
        })
    });

    me.callParent(arguments);
}

【讨论】：