Adding css class to specific xtype with certain name's

Question

In my ExtJS app, I want the ability to add a specific class name to xtype's (regardless if xtype is a button, checkbox, text field, grid panel item etc) throughout my app if the itemId/name matches list/dictionary of id's that I have.

Is this possible?

So let's pretend this is how my code currently looks like when defining elements

{
    xtype: 'button',
    text: 'some text',
    id:'elementA',
    cls: 'mycustomclass'
},
{
    xtype: 'checkbox',
    itemId: 'chkBoxC',
    id:'elementC',
    cls: 'mycustomclass'    

},
{
    xtype: 'button',
    text: '',
    id:'elementB'
}

So in above snippet what I want to happen is (pseudo-code)

if (xtype.items.id == 'elementA' or xtype.items.id= 'elementC')
   add class = "mycustomclass"

I want to be able to avoid sprinkling mycustomclass within all my files and continue to keep it looking below. Where can I override?

{
    xtype: 'button',
    text: 'some text',
    id:'elementA',

},
{
    xtype: 'checkbox',
    itemId: 'chkBoxC',
    id:'elementC'
},
{
   xtype: 'button',
   text: '',
   id:'elementB'

}

Answer 1

You can override initComponent in all types.

Ex.

Ext.define('OverrideButton', {
    override: 'Ext.button.Button',
    initComponent: function () {
        if(this.id == 'elementA' or this.id == 'elementB') {
            this.cls = 'mycustomclass';
        }
        this.callParent(arguments);
    }
});

Ext.define('OverrideCheckBox', {
    override: 'Ext.form.field.Checkbox',
    initComponent: function () {
        if(this.id == 'elementA' or this.id == 'elementB') {
            this.cls = 'mycustomclass';
        }
        this.callParent(arguments);
    }
});

You can try to override just Ext.Component which is base for checkbox, fields etc. (extjs 7.1 example)

Ext.define('OverrideComponent', {
    override: 'Ext.Component',
    initComponent: function () {
        if(this.id == 'elementA' or this.id == 'elementB') {
            this.cls = 'mycustomclass';
        }
        var me = this,
            width = me.width,
            height = me.height;

        // If plugins have been added by a subclass's initComponent before calling up to here
        // (or any components that don't have a table view), the processed flag will not have been
        // set, and we must process them again.
        // We could just call getPlugins here however most components don't have them so prevent
        // the extra function call.
        if (me.plugins && !me.plugins.processed) {
            me.constructPlugins();
        }

        me.pluginsInitialized = true;

        // this will properly (ignore or) constrain the configured width/height to their
        // min/max values for consistency.
        if (width != null || height != null) {
            me.setSize(width, height);
        }

        if (me.listeners) {
            me.on(me.listeners);
            me.listeners = null; // change the value to remove any on prototype
        }

        if (me.focusable) {
            me.initFocusable();
        }
        
    }
});