将具有特定名称的CSS类添加到特定的xtype

时间:2020-07-22 17:36:45

标签: css extjs xtype

在我的ExtJS应用程序中,我希望能够在我的整个应用程序中为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'
}

所以在上面的代码片段中,我想发生的是(伪代码)

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'

}

1 个答案:

答案 0 :(得分:0)

您可以覆盖所有类型的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();
        }
        
    }
});