Changing the Style Dynamically on ExtJS 6

Question

So, I have my component (which might be a combobox, textfield etc), what I want it's to change its style (put his borders blue) when I trigger an event.

So this is my event:

//input is the component itself
changeComponents:function (input) {
        ...

   input.border = me.border;
   input.style = me.style;
   input.updateLayout();

       ...
}

For some reason, when I trigger that function the layout won't update.

I used that exact code on:

input.on('afterrender', function(){
        ...
   input.border = me.border;
   input.style = me.style;

       ...
}

And it works, so I would like to know what is happening and why it doesn't work.

Answer 1

In ExtJs docs provide method to set style for any component. You can refer ExtJs docs

I have create small demo to show you, how it work. 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

For some reason, while rendering using:

input.style = me.style;

Works, but after it it won't work. So, the best solution is to use:

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

This solution seems to work on rendering and editing the field properties.