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