在ExtJS4中重用其他視圖中的擴展組件MVC

對於我正在構建的用戶界面，我正在使用mvc體系結構方法。我有，我想重用，並想知道，如果以下是可能的菜單：在ExtJS4中重用其他視圖中的擴展組件MVC

文件結構：

app/ 
--->app.js 
--->view/ 
--------->viewport.js 
--------->Toolbar.js 
--------->SaveMenu.js

viewport.js：

Ext.define('MyApp.view.Viewport', { 
extend: 'Ext.container.Viewport', 
layout: 'fit', 

requires: [ 
    'MyApp.view.Toolbar', 
    'MyApp.view.SaveMenu', 
], 

initComponent: function() { 
    this.items = { 
     dockedItems: [ 
      { 
       dock : 'top', 
       xtype : 'myapptoolbar', 
       height : 40, 
      } 
     ] 
... 
// more config, but this works now.

Toolbar.js

Ext.define ('Myapp.view.Toolbar', { 
    extend : 'Ext.toolbar.Toolbar', 
    alias : 'widget.myapptoolbar', 
    items : [ 
     { 
      text : 'Save', 
      // The following doesn't work, is there another way to achieve this? 
      menu : 'myappsavemenu', 
     } 
    ] 
});

SaveMenu.js

Ext.define ('Myapp.view.SaveMenu', { 
    extend : 'Ext.menu.Menu', 
    alias : 'widget.myappsavemenu', 
    items : [ 
     { 
      text : 'Save as...', 
     } 
    ] 
});

是否有可能在其他視圖中重複使用先前定義的視圖組件，如果有的話，我該如何去做這件事？

編輯 - 忘記使用這個配置時拋出的錯誤：

Uncaught TypeError: Cannot set property 'ownerCt' of undefined

來源

2012-02-24 Michael Dillon

是的，這是完全合理的，但菜單屬性應該是一個菜單實例，菜單ID或對象的配置。

我會去的：

menu: {xtype: 'myappsavemenu'},

ExtJS的文檔可在網上。按鈕的菜單配置在這裏：http://docs.sencha.com/ext-js/4-0/#!/api/Ext.button.Button-cfg-menu

一般來說，我只是熟悉分機。

另請注意，我現在刪除的第一個方法將爲您提供跨所有myapptoolbars的相同菜單實例。取決於你在做什麼，這可能是也可能不是一件可怕的事情。我試圖遠離它，因爲當引入問題時可能很難調試。

來源

2012-02-24 15:33:20

謝謝，但我得到這個：Uncaught TypeError：無法調用未定義的方法'substring' Ext.ClassManager.parseNamespace – 2012-02-24 15:40:15

嗯，我沒有看到你是靜態設置你的項目。你可以嘗試'menu：{xtype：'myappsavemenu'}，'而不是。 – 2012-02-24 15:57:42

非常感謝David，這兩種方法實際上都有效。在嘗試第一種方法時，我遇到了一個我沒有注意到的錯字。你能指出我從你從哪裏學到的方向，或者你有一個簡潔的解釋嗎？ – 2012-02-24 16:03:27

在ExtJS4中重用其他視圖中的擴展組件MVC

回答

相關問題