只需在面板内放置一个工具栏 - Ext JS

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

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

编辑：

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

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

干杯！

来源

2013-08-21 Kurai Bankusu

退房ExtJS的文档为dockedItems，他们给的正是这种场景为例：http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.panel.Panel-cfg-dockedItems

来源

2013-08-21 14:15:13 kevhender

感谢凯文，我知道dockedItems配置运作良好，但我试图抽象我的工具栏的配置，从我的应用程序远，这样所有我需要做的就是调用它的变量或类名来创建整个事情 –

使用上面的代码，你不能在面板创建中使用'tbar：toptoolbar'吗？ – kevhender

这确实有用，谢谢凯文。我可以将工具栏创建放在单独的文件中吗？我猜是一种观点？ –

可以在面板的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-21 14:16:25

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

只需在面板内放置一个工具栏 - Ext JS

回答

相关问题