0

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

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 }
    ....

编辑：

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

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

干杯!

4

2 回答 2

1

查看 ExtJS 文档dockedItems，他们以这种情况为例：http ://docs.sencha.com/extjs/4.2.1/#!/api/Ext.panel.Panel-cfg-dokedItems

于 2013-08-21T14:15:13.477 回答
1

您可以在面板的 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);
}

});
于 2013-08-21T14:16:25.437 回答