ExtJS 4.1 Controller inheritance with generated getters for stores and models

Question

I tried to create base controller and write in it:

Ext.define('My.Users.controller.Role', {
    extend      : 'Ext.app.Controller',
    stores       : [
        'Modules', 'ModulesList'
    ],
    models       : [
        'Modules', 'ModulesList'
    ]
});

But when I tried to use getters for them (in this base class, or in it's child classes, like My.Users.controller.Group), like getModulesStore(), or getModulesListModel(), I have an error that them are not functions. And in Firebug I can see there aren't this methods in child class and in it superclass. How can I to fix it?

The full description how to reproduce this bug: 1) Download ExtJS 4.1 GPL from Sencha

2) Unzip the archive, and go to directory extjs-4.1.0/examples/app/feed-viewer/

3) In file feed-viewer.html comment line <script type="text/javascript" src="all-classes.js"></script> to force dynamic loading of js files: now you can normally edit the content of project files.

4) In folder app/controller create file named Entities.js with following code:

Ext.define('FV.controller.Entities', {
    extend: 'Ext.app.Controller',
    models: ['Shared'],
    stores: ['Shared']
});

5) In files Articles.js and Feeds.js change extend to 'FV.controller.Entities'

6) In folders app/model and app/store create files Shared.js with content

Ext.define('FV.model.Shared', {
    extend: 'Ext.data.Model',
    idProperty: 'id',
    fields: [
    {
        name: 'id',
        type: 'int'
    },
    {
        name: 'title',
        type: 'string'
    }
    ]
});

for Model and

Ext.define('FV.store.Shared', {
    extend: 'Ext.data.Store',
    model: 'FV.model.Shared',
    proxy: {
        type: 'ajax',
        url: 'test.json',
        reader: {
            type: 'json',
            root: 'item'
        }
    }
});

for Store.

7) Finally, for example, in init method of Article.js try to console.log(this); In Firebug you will not get getSharedModel() and getSharedStore() methods.

I've uploaded my sample to http://nekaka.com/d/W1_EOlnPST

Your code looks correct to me, so there may be a mismatch in the name/id of the store and model you're trying to use. — JohnnyHK

Izhaki Izhaki · Accepted Answer · 2012-06-18T10:20:45

models and stores are config properties. If you look at the source of Ext.app.Controller you'll see the getters created in the constructor.

FV.controller.Articles inherent from your controller class but it has its own models and stores properties which will override the ones in your own base class. This is very much the same way as if your component has height config, it will override that of all base classes (unless the base class forces such config by overriding it in the constructor or initComponent, this is not the case with controller that uses simple config properties).

If you want this to work the class that inherent from your controller will have to explicitly merge the base class config with its new ones. Again, same like with components.

Alternatively (and probably a better solution), instead of defining your shared models and stores as config properties in your base class, you could merge these into the config the constructor gets. Something like this in the constructor of your base controller class:

Ext.merge( config, {
    models: ['Shared'],
    stores: ['Shared']
});

ExtJS 4.1 Controller inheritance with generated getters for stores and models

2 Answers