Динамическое изменение стиля в 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

Я создал небольшую демонстрацию, чтобы показать вам, как это работает. Сенча пример скрипки

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

Это решение, кажется, работает на рендеринг и редактирование свойств поля.