PDA

View Full Version : Layout allows resize by dragging



sj_tt6
19 Aug 2012, 8:31 AM
Hi,

I'm using HBox layout for my page that has 3 columns.

How do I do to allow the user to resize the columns manually with the mouse? Is there any other layouts that supports dragging to adjust the size in the run time?

Thank you,

sword-it
19 Aug 2012, 11:16 PM
Hi!

take a look on this




Ext.create('Ext.Panel', {
width: 500,
height: 300,
title: "HBoxLayout Panel",
layout: {
type: 'hbox'
},
defaults:{
xtype:'panel',
resizable:true,
width:100,
height:125
},
items: [{
title: 'Panel One',
},{
title: 'Panel Two',
},{
title: 'Panel Three',
}]
});

sj_tt6
20 Aug 2012, 7:49 AM
Hi,

Thank you for your sample! I added resizable attribute to my code the panels in the HBOX allow me to drag, however as soon as I release the mouse they go back to the original size.

sword-it
20 Aug 2012, 9:52 PM
HI!

Are you 'flex' for your panels in hbox??

if yes, you must remove flex and give them specific height and width ,as i provided in the sample code.

If you are not using flex, may you paste your code here for better understanding your problem scenario.

sj_tt6
21 Aug 2012, 8:15 AM
Hi,

Even I commented out flex, the issue is still unsolved.



layout: {
type: 'border'
},
items: [{
region:'west',
width: 650,
split: true,
xtype: 'panel',
layout: {
type: 'hbox',
align: 'stretch'
},
defaults: {
resizable: true
},
items: [{
width: 250,
// flex:1,
xtype: 'panel_1',
layout: {
type:'fit'
}
},
{
width: 400,
// flex:2,
xtype: 'panel_2',
layout: {
type: 'fit'
}
}]
},