只需在Panel-Ext JS中放置一个工具栏

Question

我正在下面的代码中创建一个工具栏。我想知道的是如何将这些放置在面板内？

var toptoolbar = Ext.create('Ext.toolbar.Toolbar', {
    id: 'ttool',
    width: '100%',
    items: [
        {   text : 'MetaCenter',
            menu : {
            items: [
                { text : 'Wiki' }, 
                { text : 'JIRA' }, 
                { text : 'SVN' }, 
                { text : 'Sharepoint',
                    menu : {
                        items: [
                            {text : 'text 1'}, 
                            {text : 'text 2'}
                        ]
                    }
                }]
            }
        }           
    ]        
});

我想做的是：

Ext.create.('Ext.panel.Panel', {
    id: 'panel',
    tbar: { //code to create the toptoolbar }
    ....

编辑：

我想要的是一个非常广泛的下拉菜单，在工具栏上有子菜单，我试图避免将所有创建工具栏的代码放在我的应用程序中。相反，我希望能够从一个变量（或者更好的是，从一个类？）调用它。有点像抽象/封装。

这是一种标准的组件实例化方式，还是有更有效的方法？

干杯！

Answer 1

查看dockedItems的ExtJS文档，它们正是以这个场景为例：http://docs.sencha.com/extjs/4.2.1/#/api/Ext.panel.panel-cfg-dockedItems

Answer 2

您可以在面板的initComponent方法中定义工具栏。

Ext.define('MyApp.view.MyPanel', {
    extend: 'Ext.panel.Panel',
    height: 250,
    width: 400,
    title: 'My Panel',
    initComponent: function() {
        var me = this;
        Ext.applyIf(me, {
            dockedItems: [
                {
                    xtype: 'toolbar',
                    dock: 'top'
                }
            ]
    });
    me.callParent(arguments);
}
});