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