How to dynamically change padding of a panel in ExtJS?

Question

I want to change the panel's padding value after resize event.

{
    xtype : 'panel',
    flex : 10,
    layout : {
        type : 'hbox',
        align : 'stretch',
        padding : '0 5 0 5'
    },
    listeners:{
        resize:'resizePanel'
    },
}

There is resizePanel function:

resizePanel:function(target, width, height, oldWidth, oldHeight, eOpts){
        target.padding='0 ' + width / 7 + ' 0 ' + width / 7;
        target.doLayout();
    },

But this function doesn't change anything. Do you have any suggestion?

Answer 1

The target param in that function will be an Ext Panel instance which doesn't have a padding property.

Instead you should get to the underlying element, something like target.el or target.getEl() which will return you the Ext Element instance for the panel.

If you look at the Ext Element in the api docs you can use the setStyle function. So as an example you could do

target.getEl().setStyle('padding','0 ' + width / 7 + ' 0 ' + width / 7)

Hope this helps!