Set default column config "menuDisabled" in Ext JS class definition

Question

In ExtJS 5.1, I would like to define a class extending Ext.grid.Panel that sets defaults for columns, specifically the menuDisabled property. I do not want this set for all grids, just this class. In Ext 5 this property was changed to a column specific property and you can set the default in a grid config this way:

columns: {
    defaults: { menuDisabled: true },
    items: [...]
}

How do I set this in a class definition so that users of this class do not have to set it? I've tried different incantations like:

Ext.define('MyGridPanel', {
    extend: 'Ext.grid.Panel',
    menuDisabled: true
});

and

Ext.define('MyGridPanel', {
    extend: 'Ext.grid.Panel',
    defaults: {
        columns: {
            menuDisabled: true
        }
    }
});

I was able to get it to change globally for all grids using the answer here, but I want to set it just for my grid class.

score 1 · Accepted Answer · answered Jun 24 '15 at 02:25

Use either cpastore84's answer or maybe better the following way because it does not impose the limitation of the columns configuration having to be an array at all times:

Ext.define('MenuDisabledGrid', {
    extend: 'Ext.grid.Panel',
    initComponent: function() {
        this.callParent(arguments);
        this.headerCt.items.each(function(c){
            c.menuDisabled = true;
        });
    }
});

Doing it through initComponent seems to be unavoidable because in the Ext.panel.Table's source code the header is created this way:

me.headerCt = new Ext.grid.header.Container(headerCtCfg);

instead of

me.headerCt = Ext.create(headerCtCfg);

In the latter case we could do it all declaratively by specifying a custom header config in the MenuDisabledGrid class definition.

score 0 · Answer 2 · answered Jun 23 '15 at 19:46

Not sure if there is a better way, but one way to achieve this would be to override your component's initComponent method like this:

initComponent : function () {
    // for each column
    Ext.Array.each(this.columns, function (col) {

       // set menuDisabled to true
        Ext.apply(col, {
            menuDisabled : true
        });

    });

    this.callParent(arguments);
}

Set default column config "menuDisabled" in Ext JS class definition

2 Answers2