Question

I building my ExtJS 4 application following the MVC structure. I want to make an extendable grid MyGrid with some functionality that I can reuse several times. Therefore, I guess, it should have its own controller which is also extended, so that the functionality is inherited. How is this properly done?

In the code below I illustrate how I extend the controller MyGrid with MyExtendedGrid. I realize that I’m overriding the init function in the MyGrid controller, so that it is never called. Is the problem simply solved by calling the “super” init in MyGrid from MyExtendedGrid init, or merge the control objects? Is that the proper way to do this in the MVC spirit? If so, how?

controller/MyGrid.js :

Ext.define('App.controller.MyGrid', {
    extend: 'Ext.app.Controller',
    refs: [
        {
            ref: 'myGridView',
            selector: 'mygrid'
        }
    ],
    init: function() {
        var me=this;
        me.control({
            'mygrid textfield[name=searchField]': {
                change: function() {
                    var view = me.getMyGridView();
                    // Do something with view
                }
            }
        });
    }
});

controller/MyExtendedGrid.js :

Ext.define('App.controller.MyExtendedGrid', {
    extend: 'App.controller.MyGrid',
    views: [
        'grids.MyExtendedGrid'],
    refs: [
        {
            ref: 'myExtendedGridView',
            selector: 'myextendedgrid'
        }
    ],
    init: function() {
        var me=this;
        me.control({
            'myextendedgrid': {
                // Some control code
                // Using getMyExtendedGridView()
            }
        });
    }
});

view/grids/MyGrid.js :

Ext.define('App.view.grids.MyGrid', {
    extend: 'Ext.grid.Panel',
    alias : 'widget.mygrid',
    requires: [
    ],
    store: '', // Not defined here
    columns: [ ], // Not defined here

    initComponent: function() {
        var me = this;
        me.tbar = [
            'Search',
            {
                 xtype: 'textfield',
                 name: 'searchField',
                 hideLabel: true,
                 width: 150
            }
        ];
        me.callParent(arguments);
    }
});

view/grids/MyExtendedGrid.js :

Ext.define('App.view.grids.MyExtendedGrid', {
    extend: 'App.view.grids.MyGrid',
    alias : 'widget.myextendedgrid',
    store: 'MyStore',
    columns: [
        // ...
    ],

    initComponent: function() {
        var me = this;
        me.bbar = [
            //...
        ];
        me.callParent(arguments);
    }
});

Answer 1

Ok, after some thinking I decided on the following solution, which has the advantage that mygrid does not need to know about myextendedgrid.

I extend my gridview as in the question.

I gave the base grid its own controller for doing common functionality, for instance deleteButton.setDisable(false) when something is selected in the grid.

Next, I remind myself that using refs:[ (for instance with selector: 'mygrid') would ambiguously point to both instances of the base class any extended instances. When using me.control({ I instead get the relevant grid by traversing from the activated element using up:

me.control({
    'mygrid textfield[name=searchField]': {
        change: function(searchfield) {
            var grid=searchfield.up('mygrid'); // (mygrid or myextendedgrid!)
            // Do something with view
        }
    }
...

The extended grid I give its own controller and here I could use refs. I don’t extend the controller from the MyGrid class (but rather from 'Ext.app.Controller'), unless I would like to use functions or variables from the MyGrid controller. All the controllers are started from app.js using:

Ext.application({
    controllers: [
        'MyGrid'
        'MyExtendedGrid',
    ],
...

In order to get the grid when rows are selected in the grid, I stored the grid in the selection model as below:

In controller/MyGrid.js :

me.control({
    'mygrid': {
        afterrender: function(grid) {
            var selModel=grid.getSelectionModel();
            selModel.myGrid=grid;
        },
        selectionchange: function(selModel, selected, eOpts) {
            var grid=selModel.theLookupGrid;
            // Do something with view
        }
...