在 ExtJS 6 上动态更改样式

Question

所以，我有我的组件（可能是组合框、文本字段等），我希望它在触发事件时更改其样式（将其边框设为蓝色）。

所以这是我的活动：

//input is the component itself
changeComponents:function (input) {
        ...

   input.border = me.border;
   input.style = me.style;
   input.updateLayout();

       ...
}

出于某种原因，当我触发该功能时，布局不会更新。

我使用了那个确切的代码：

input.on('afterrender', function(){
        ...
   input.border = me.border;
   input.style = me.style;

       ...
}

它有效，所以我想知道发生了什么以及为什么它不起作用。

Answer 1

出于某种原因，渲染时使用：

input.style = me.style;

可以，但之后就不行了。所以，最好的解决办法是使用：

input.setStyle('borderColor', me.style.borderColor);
input.setStyle('borderStyle', me.style.borderStyle);

此解决方案似乎适用于渲染和编辑字段属性。

Answer 2

在 ExtJs 文档中，提供了为任何组件设置样式的方法。可以参考ExtJs docs

我已经创建了一个小演示来向您展示它是如何工作的。 Sencha fiddle example

Ext.create('Ext.Container', {
    renderTo: Ext.getBody(),
    defaults:{
        xtype: 'button',
        margin:10,
        tooltip:'Click to change background of container',
        tooltipType:'Click to change background of container',
        handler: function () {
           this.up('container').setStyle('background',this.text)
        }
    },
    items: [{
        text: 'purple'
    },{
        text: 'gray'
    },{
        text: 'green'
    },{
        text: 'pink'
    }]
});

在 ExtJS 6 上动态更改样式

Changing the Style Dynamically on ExtJS 6

javascript

css

extjs

extjs6

extjs6.2