将 css 类添加到具有特定名称的特定类型

Question

在我的ExtJS 应用程序中，如果 itemId/name 与列表匹配，我希望能够在整个应用程序中向 xtype 中添加特定的类名（无论 xtype 是按钮、复选框、文本字段、网格面板项等） /我拥有的 id 的字典。

这可能吗？

所以让我们假设这是我的代码在定义元素时的当前样子

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

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

所以在上面的 sn-p 中我想要发生的是（伪代码）

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

我希望能够避免将mycustomclass 洒在我的所有文件中，并继续保持在下方。 我可以在哪里覆盖？

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

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

}

Answer 1

您可以覆盖所有类型的initComponent。

例如

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);
    }
});

您可以尝试仅覆盖 Ext.Component，它是复选框、字段等的基础（extjs 7.1 示例）

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();
        }
        
    }
});