PDA

View Full Version : Problems with fit layout and padding



bozzoz
26 Jul 2010, 2:40 AM
Hello, i'm develpoing an interface with one panel inside a viewport component. I have set the layout option of viewport to fit. I would want to add 10px of padding of viewport so the panel remains detached from the edge of the browser windows. How I can make this?

The code of my interface


applicationUi = Ext.extend(Ext.Viewport, {
layout: 'fit',
initComponent: function() {
this.items = [
{
xtype: 'panel',
title: 'My Panel',
tbar: {
xtype: 'toolbar',
items: [
{
xtype: 'button',
text: 'MyButton'
}
]
},
bbar: {
xtype: 'toolbar',
items: [
{
xtype: 'tbtext',
text: 'My Text',
width: 355,
height: 22
},
{
xtype: 'tbseparator'
},
{
xtype: 'tbtext',
text: 'My Text'
}
]
}
}
];
applicationUi.superclass.initComponent.call(this);
}
});

Thanks

Condor
26 Jul 2010, 3:21 AM
Add style:{padding:'10px'} to the panel.

bozzoz
26 Jul 2010, 3:31 AM
Thank you, now works perfectly!

j-joey
26 Jul 2010, 4:04 AM
you can set your viewport's style property as "padding: 10px" to achieve what you want.