Question

I’m using the mvc architecture method for a ui I’m building. I have a menu that I would like to reuse and would like to know if the following is possible:

File structure:

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...',
        }
    ]
});

Is it possible to reuse previously defined view components in other views, and if so how should I go about doing this?

Edit – Forgot the error thrown when using this configuration:

Uncaught TypeError: Cannot set property 'ownerCt' of undefined

Answer 1

Yes, it’s perfectly reasonable, but the menu property should be a menu instance, a menu id or an object config.

I would go with:

menu: {xtype: 'myappsavemenu'},

ExtJS docs are available online. The button’s menu config is addressed here: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.button.Button-cfg-menu

In general, I’m just getting familiar with Ext.

Also note, the first method, which I’ve now removed, will give you the same menu instance across all myapptoolbars. This may or may not be a terrible thing depending on what you’re doing. I try to stay away from it as it can be hard to debug when problems are introduced.