PDA

View Full Version : Resizing panel elements



savsw
6 Sep 2010, 8:29 PM
Hellow,

There are some panels within Ext.Viewport object:



var panel = new Ext.Panel({
id: "x-portal",
region: 'center',
items:[{
id: 'portal_col_0',
columnWidth:.33,
style:'padding:10px 0 10px 10px',
items:[]
},{
id: 'portal_col_1',
columnWidth:.33,
style:'padding:10px 0 10px 10px',
items:[]
},{
id: 'portal_col_2',
columnWidth:.33,
style:'padding:10px',
items:[]
}]
});
var viewport = new Ext.Viewport({
layout : 'border',
items : [panel]
});
When panel's elements are displayed there is no possibility to click on their border and resize it.
Is it possible to add such functionality via setting some properties or doing anything else?
I can only resize elements inside the "viewport" objects (but not panel's element themselves.)

Please help.

Regards,

Alexander.

anhphuoc
6 Sep 2010, 8:52 PM
You see http://www.sencha.com/forum/showthread.php?28318-Fit-to-parent&highlight=Ext.ux.FitToParent

laurentParis
6 Sep 2010, 9:36 PM
use border layout instead column :


var panel = new Ext.Panel({
id: "x-portal",
region: 'center',
layout: 'border',
items:[{
region: 'west',
width: '33%',
split: true,
id: 'portal_col_0',
bodyStyle:'padding:10px 0 10px 10px'
},{
region: 'center',
id: 'portal_col_1',
bodyStyle:'padding:10px 0 10px 10px'
},{
region: 'east',
split: true,
width: '33%',
id: 'portal_col_2',
bodyStyle:'padding:10px'
}]
});
var viewport = new Ext.Viewport({
layout : 'border',
items : [panel]
});


sure, it's ok because you choose 3 columns, not more, on your example )
I don't know other element instead border who have possibility to re-adjust their size !

Condor
6 Sep 2010, 10:46 PM
You would need to create an Ext.Resizable for every portlet (have a look at the source code of Ext.Window).

savsw
6 Sep 2010, 11:15 PM
To laurentParis,

Thank you!

Your solution helped me.

Some questions have appeared concerning solution.
Could you please clarify, what's difference between:
width: '33%',
and
columnWidth:.33
Also it works only when the 'split : true' option is used.
I cannot find it among the properties of 'Panel' class.
Could you describe what this property means?

Regards,
Alexander