PDA

View Full Version : Change padding of viewport dynamically



lumart
8 Jan 2014, 6:34 AM
Hi,

I've got a created viewport:




Ext.create('Ext.container.Viewport', {
id:'mainViewPortId',
layout: 'fit',
padding: '120 0 0 0',
border: false,
frame: false,
items: [contentPanel],
renderTo: 'bodyPage'
});



And with calling this function:



function redimViewPort(){
var mainViewPort = Ext.getCmp('mainViewPortId');
if(parent.ribbonCollapsed){
Ext.apply(mainViewPort, {padding: '40 0 0 0'});
}else if(!parent.ribbonCollapsed){
Ext.apply(mainViewPort, {padding: '120 0 0 0'});
}
}


I would like to change the padding.

I've tried with

- Ext.apply
- style
- set({padding:'...'})

Anyone please ?

Thanks

scottmartin
8 Jan 2014, 9:40 AM
See if the following will help:



Ext.application({
name: 'Fiddle',

launch: function() {

var vp = Ext.create('Ext.container.Viewport', {
layout: 'fit',

padding: '120 0 0 0',

items: [{
xtype: 'panel',
title: 'My Panel'
}]
});

vp.getEl().setStyle('padding-top', '50px');
}
});

lumart
8 Jan 2014, 11:03 AM
Thanks !