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