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);
}

});

只需将工具栏放在Panel中 - Ext JS即可

2 个答案: