are refs overriden or inherited in extjs?

Question

i had this parent class : assume its on correct syntax (views aliases, stores and xtypes):

    Ext.define('myParent' {
       extend : 'Ext.app.Controller',

refs : [{
        ref : 'formwindow',
        selector : 'forms-formwindow'
    }, {
        ref : 'mainForm',
        selector : '#mainForm'
    }],

    });

    i had this subclass :

    Ext.define('myChild' {
       extend : 'myParent',

    });

whenever i put this code in my subclass:

refs : [{
        ref : 'myReference',
        selector : 'myProduct'

    }],

i got this error during runtime :

Uncaught TypeError: Object [object Object] has no method 'getMainForm'

i wonder if refs from the parent class were overriden by my child class....

what happened ? does it really overrides myParent's refs?

score 5 · Accepted Answer · answered Jun 03 '13 at 10:38

As you've found out yourself, there's no special treatment of the refs property so, yes, it does get overridden.

To augment it instead of replacing, you'll have to do it in the child classes constructor, like in this example:

Ext.define('myChild', {
    extend: 'myParent'
    ,constructor: function() {
        this.refs = (this.refs || []).concat([{
            ref: 'myReference',
            selector: 'myProduct'
        }]);
        this.callParent(arguments);
    }
});

score 2 · Answer 2 · answered Nov 27 '14 at 17:40

This really bugs me about Ext Controllers so today I had a go a fixing it, rixo solution works great but here is an alternative to extending every child class. Extend Ext.app.Controller instead using "onClassExtended" method

    /**
 * Extends Ext.app.Controller with the ability to have refs defined in
 * Controllers and any of subclasses.
 * Duplicate refs overwrite each other, last one in class hierarchy wins.
 */
Ext.define('App.Controller', {
    extend: 'Ext.app.Controller',
    //private make refs extensible by any subclasses
    onClassExtended : function(cls, data, hooks) {
        var onBeforeClassCreated = hooks.onBeforeCreated;
        hooks.onBeforeCreated = function(cls, data) {
            var me = this,
                name = Ext.getClassName(cls),
                prototype = cls.prototype,
                superCls = cls.prototype.superclass,
                thisRefs = data.refs || [],
                superRefs = superCls.refs || [],
                newRefs = [],
                i = 0;
            if (thisRefs.length > 0) {
                for (i=0; i < thisRefs.length; i++) {
                    if (typeof thisRefs[i] !== 'undefined') {
                        newRefs.push(thisRefs[i]);
                    }
                }
            }
            if (superRefs.length > 0) {
                for (i=0; i < superRefs.length; i++) {
                    if (typeof superRefs[i] !== 'undefined') {
                        newRefs.push(superRefs[i]);
                    }
                }
            }
            data.refs = newRefs;
            onBeforeClassCreated.call(me, cls, data, hooks);
        };
    }
});

are refs overriden or inherited in extjs?

2 Answers2