How to apply padding dynamically to a panel ?

[gizmo410]

Hi !

I would like to apply padding around a panel dynamically but it does not render correctly.

This is my structure :


{xtype: 'basePanel', cls:'mainPanel', layout:'fit', items:[
{xtype:'panel', layout: 'border', items: [
{xtype:'panel',region:'west', frame: true, width:300, items:[
{xtype:'recordingStatisticsFieldSet'},
{xtype:'surveyStatisticsFieldSet'}
]},
{xtype:'panel', region:'center', frame: true},
{xtype:'activityLogGrid',region:'east', width: 400}
]}
]}


The panel containing the layout border should receive the padding.
So I tried applying a style containing the padding rules by doing this :


var panel = this.getMainPanel().getComponent(0);
panel.getEl().toggleCls('padding50');



But it does not work.
The panel is partly rendered outside the view.

Any idea ?

Thanks in advance !

[sword-it]

Hello buddy,
When you are adding padding to your panel after that you must recalculate its layout also.
For that you just call the doLayout() of that panel to which you are giving padding.Code is below:



var panel = this.getMainPanel().getComponent(0);
panel.getEl().toggleCls('padding50');
panel.doLayout(); // this is the line you need to add to your code.

[gizmo410]

Thx for the quick reply !

Well, I already tried it and sadly enough, it does not work.

This is the content of my css class :


.padding50 {
padding-top: 50px;
padding-right: 50px;
padding-left: 50px;
padding-bottom: 50px;
}

[sword-it]

Hi,
As I review your code you have given width-400px to the west panel & width-300px to the east panel. You are applying padding 50px to the parent container. It means that the Ext-item where you are rendering your xtype: 'basePanel' should have width atleast 800px(400px of west + 300px of east + 100px padding).
So width may be the problem. So review the following code, it is working well:



var myForm = Ext.extend(Ext.window.Window, {
renderTo: Ext.getBody(),
title: 'doLayout method testing',
layout: 'fit',
height: 400,
width: 500,
initComponent: function () {
this.items = this.buildItems();
this.tbar = this.buildTbar();
myForm.superclass.initComponent.call(this);
}
, buildTbar: function(){
return [
{
xtype: 'button'
, text: 'Click to add padding.'
, handler: function(){
var panel = this.ownerCt.ownerCt.getComponent(0).getComponent(0);
panel.getEl().toggleCls('padding50');
panel.doLayout();
}
}
];
}
, buildItems: function () {
return {
xtype: 'panel'
, cls:'mainPanel'
, layout:'fit'
, items:[
{
xtype:'panel'
, name: 'paddingPanel'
, layout: 'border'
, items: [
{
xtype:'panel'
,region:'west'
, frame: true
, width:150
, items:[
{xtype:'box', html: 'first item of west panel.'},
{xtype:'box', html: 'second item of west panel.'}
]
},
{xtype:'panel', region:'center', frame: true},
{xtype:'panel',region:'east', width: 50}
]
}
]
};
}
});


Ext.onReady(function () {
new myForm().show();
});

[gizmo410]

Thx sword-it for your help.

I dug a bit further and found that it was caused by a bug inside Ext 4.0.7.
When using Ext 4.1.0, the problem does not occur anymore.