javascript - 在 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

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

我创建了一个小演示来向您展示它是如何工作的。Sencha 小提琴示例

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

Answer 2

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

input.style = me.style;

工作，但它不会工作。因此，最好的解决方案是使用：

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

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