只需在面板內放置一個工具欄 - 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

回答

相關問題