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中，docs提供了为任何组件设置样式的方法。您可以参考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'
    }]
});

Answer 2

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

input.style = me.style;

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

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

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

在ExtJS 6上动态更改样式

2 个答案: