在 ExtJS 6 上动态更改样式答案

【问题标题】：Changing the Style Dynamically on ExtJS 6在 ExtJS 6 上动态更改样式
【发布时间】：2017-09-13 10:56:46
【问题描述】：

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

所以这是我的活动：

//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;

       ...
}

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

【问题讨论】：

做一件事创建一个类并在运行时使用“addCls(yourclass)”函数它可能是工作..

标签： javascript css extjs extjs6 extjs6.2

【解决方案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'
    }]
});

【讨论】：

【解决方案2】：

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

input.style = me.style;

有效，但之后它将无法工作。因此，最好的解决方案是使用：

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

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

【讨论】：