PDA

View Full Version : Side-by-side panels with HBox layout



r_honey
14 Feb 2010, 11:56 AM
I am trying to have 2 side-by-side panels with their height stretched to match their container height. Here's my code till now:



Ext.onReady(function() {
var left = new Ext.Panel( {
autoHeight: true,
layout: 'fit'
});
var right = new Ext.Panel( {
autoHeight: true,
layout: 'fit'
});

var p = new Ext.Panel( {
title: 'File Browser',
renderTo: 'take_control_fb_container',
autoWidth: true,
height: 500,
layout: 'column',
items: [ {
columnWidth: .3,
autoHeight: true,
items: [ left ]
}, {
columnWidth: .7,
autoHeight: true,
items: [ right ]
} ]
});
});


I understand that Column layout does not support stretching heights. I have even seen Animal's extension to column layout for the purpose, and Saki's remarks on the forums that HBox does the same in Ext 3. I am just having trouble implementing this with HBox.

Can someone please help me out??

Animal
14 Feb 2010, 12:03 PM
http://www.extjs.com/deploy/dev/docs/?class=Ext.layout.HBoxLayout&member=align

Animal
14 Feb 2010, 12:04 PM
You are overnesting.

Why NEST your "left" Panel INSIDE the column Panel? Make IT the column Panel!

r_honey
14 Feb 2010, 12:11 PM
You are overnesting.

Why NEST your "left" Panel INSIDE the column Panel? Make IT the column Panel!

Hi Animal, I have tried the stretch property for align before posting on forums, I have been googling for more than 2 hours, before posting, and I am still unable to get it going. Can you please provide an example? And I was not sure what you meant by over-nesting??

r_honey
14 Feb 2010, 8:52 PM
Can somebody please help me out? I really need to get this going.

bclinton
14 Feb 2010, 9:10 PM
And I was not sure what you meant by over-nesting??

In your panel named 'p' you have an items array with two items. Those two items are panels. Each of those panels have an items array with a panel in it, your 'right' and 'left' panels.

Why not put right and left directly in 'p' like this:



var p = new Ext.Panel( {
title: 'File Browser',
renderTo: 'take_control_fb_container',
autoWidth: true,
height: 500,
layout: 'column',
items: [ left, right ]
});

bclinton
14 Feb 2010, 9:16 PM
I understand that Column layout does not support stretching heights. I have even seen Animal's extension to column layout for the purpose, and Saki's remarks on the forums that HBox does the same in Ext 3. I am just having trouble implementing this with HBox.

You say you are having trouble implementing this with hbox but you have layout: column in your example. If you tried it with hbox after animal's link, post some updated code.

r_honey
14 Feb 2010, 9:21 PM
In your panel named 'p' you have an items array with two items. Those two items are panels. Each of those panels have an items array with a panel in it, your 'right' and 'left' panels.

Why not put right and left directly in 'p' like this:


And how do I specify columns widths in your sample code? I will post my hbox code soon.

bclinton
14 Feb 2010, 9:55 PM
And how do I specify columns widths in your sample code? I will post my hbox code soon.

You would put them in the definition of the panels:

var left = new Ext.Panel( {
autoHeight: true,
columnWidth: .3,
layout: 'fit'
});

r_honey
14 Feb 2010, 11:56 PM
Thanx bclinton, and Animal for the help till now. Here's my hbox code:



Ext.onReady(function() {
var p = new Ext.Panel( {
title: 'File Browser',
renderTo: 'take_control_fb_container',
autoWidth: true,
height: 500,
layout: 'hbox',
items: [ {
xtype: 'panel',
layout: 'fit',
flex: 3,
align: 'stretch',
title: 'left',
autoHeight: true
}, {
xtype: 'panel',
layout: 'fit',
flex: 7,
align: 'stretch',
title: 'right',
autoHeight: true
} ]
});
});


I have tested the above code with and without autoHeight: true for the inner panels. Still their height just equals their content without stretching to the parent.

Animal
15 Feb 2010, 12:13 AM
I told you.

http://www.extjs.com/deploy/dev/docs/?class=Ext.layout.HBoxLayout&member=align

r_honey
15 Feb 2010, 12:16 AM
I told you.

http://www.extjs.com/deploy/dev/docs/?class=Ext.layout.HBoxLayout&member=align

I might have got you wrong, but my code above clearly uses align:'stretch' on both the Panel properties. What else should I do??

bclinton
15 Feb 2010, 1:04 AM
I think the problem is where you are putting it. Try this:


Ext.onReady(function() {
var p = new Ext.Panel( {
title: 'File Browser',
renderTo: 'take_control_fb_container',
autoWidth: true,
height: 500,
layout: 'hbox',
layoutConfig: {
align: 'stretch'
},
items: [ {
xtype: 'panel',
layout: 'fit',
flex: 3,
title: 'left',
autoHeight: true
}, {
xtype: 'panel',
layout: 'fit',
flex: 7,
title: 'right',
autoHeight: true
} ]
});
});I don't think you need those autoHeight configs.

r_honey
15 Feb 2010, 1:07 AM
Thanx bclinton, that resolved it.