PDA

View Full Version : Change padding or margin at runtime



farion
13 Jun 2012, 6:08 AM
Hi,

is it possible to change the padding or margin of a component/panel during runtime?


var panel = Ext.create('Ext.panel.Panel',{
padding: 10
});
[...]
panel.setPadding(20); //unfortunately this method does not exist.



Frieder

alexwells
13 Jun 2012, 7:36 AM
You should be able to do it by changing the style on the panels Element:


aPanel.getEl().setStyle({padding:'10px'});

farion
20 Jun 2012, 4:37 AM
This does not work.
The components do not change their layouts, because they do not know, that I modified the css.

sword-it
20 Jun 2012, 5:24 AM
Hi farion,

You should call doLayout() method after setStyle.


Panel.getEl().setStyle({padding : '10px'});
Panel.doLayout();


For more information see ...http://docs.sencha.com/ext-js/4-1/#!/api/Ext.container.AbstractContainer-method-doLayout

suamikim
2 Aug 2012, 2:03 AM
Hi there,

i just tried the same thing with the margin and it didn't work:
http://jsfiddle.net/sL9KN/

After running the script you have to resize the window once manually to make it appear correctely in jsfiddle. After this you can click the "Change margin"-button which applies the correct margin left & top but not at the right & bottom.

I would really appreciate if anyone could give me a hint with this...

Thanks,

Mike

Romick
2 Aug 2012, 7:10 AM
Hi!
I think it of layout: 'fit'.
http://jsfiddle.net/sL9KN/1/

suamikim
2 Aug 2012, 12:02 PM
Hi!
I think it of layout: 'fit'.
http://jsfiddle.net/sL9KN/1/

Thanks for the input but first of all this fiddle does not work correctely because the container-window is 300x300 px with the header-panel & the tbar. Therefore the child-panel is initialy larger than it's container-div and even after the resize in the handler-function there's no margin at the right & the bottom...

Second & most important: this way i would have to check the resizing of the parent-window manually to keep the child-panel with it's margin always in the correct size. And that's what the fit-layout is imho basically for. To not have to worry about stuff like this...

Thanks again for the input but i'm still hoping for a better solution.

mike

suamikim
3 Aug 2012, 1:05 AM
Ok, with the idea of anchor layout at the back of my mind i came up with a solution that is at least working for me:

Simple one ("only" change the whole margin with 1 value):
http://jsfiddle.net/suamikim/sL9KN/2/

var win = Ext.create('Ext.window.Window', {
width: 500,
height: 500,
layout: "anchor",
items: [{
xtype: 'panel',
id: 'testpanel',
title: 'the panel',
anchor: '100%, 100%'
}],

tbar: {
items: {
xtype: 'numberfield',
fieldLabel: 'Margin all',
value: 0,
minValue: 0,
listeners: {
'change': function(field, newValue, oldValue) {
var panel = Ext.getCmp('testpanel');

panel.getEl().setStyle({margin: newValue + 'px'});
panel.anchor = (newValue * -2) + ', ' + (newValue * -2);
win.doLayout();
}
}
}
}
}).show();

Extended version with the ability to set all 4 margins independently:
http://jsfiddle.net/suamikim/gGc3p/

// Initial margins
var actMargin = { top: 0, right: 0, bottom: 0, left: 0 };

function marginChanged(field, newValue, oldValue) {
var panel = Ext.getCmp('testpanel');

actMargin[field.itemId] = newValue;

panel.getEl().setStyle({ margin: actMargin.top + 'px ' + actMargin.right + 'px ' + actMargin.bottom + 'px ' + actMargin.left + 'px' });
panel.anchor = ((actMargin.left + actMargin.right) * -1) + ', ' + ((actMargin.top + actMargin.bottom) * -1);
win.doLayout();
};

var win = Ext.create('Ext.window.Window', {
width: 500,
height: 500,
layout: "anchor",
items: [{
xtype: 'panel',
id: 'testpanel',
title: 'the panel',
margin: actMargin.top + ', ' + actMargin.right + ', ' + actMargin.bottom + ', ' + actMargin.left,
anchor: '100%, 100%'
}],

tbar: {
defaultType: 'numberfield',
defaults: {
minValue: 0,
listeners: {
'change': marginChanged
}
},
items: [
'Top:', { itemId: 'top', value: actMargin.top, width: 60 },
'Right:', { itemId: 'right', value: actMargin.right, width: 60 },
'Bottom:', { itemId: 'bottom', value: actMargin.bottom, width: 60 },
'Left:', { itemId: 'left', value: actMargin.left, width: 60 }
]
}
}).show();

This still is a workaround, but at least one that doesn't feel too bad to me. Nonetheless i'd still appreciate every other good working solution!

Thanks