PDA

View Full Version : Using Anchor in Hbox



Hook
18 Apr 2011, 5:29 AM
I have an hbox layout that contains two panels. I set a height on the hbox and use align: 'stretch'.

The rightmost item is a panel that contains two panels, one above the other. I want these two panels to split the area. Here's what I have (simplified):

{
xtype: 'panel',
layout: 'anchor',
title: 'Products',
frame: true,
flex: 1.3,
items: [
{
xtype: 'panel',
anchor: '0, 50%',
html: '<div id="product-info">Top Panel</div>'
},
{
xtype: 'panel',
anchor: '0, 50%',
html: '<div id="product-info">Bottom Panel</div>'
}
]
}

But when this is displayed, the two panels do not split the height. Instead, they both use only enough space to render the html. What am I missing?

--
JR

Screamy
18 Apr 2011, 8:36 AM
Your container panel must have some type of height applied to it.
Your 'anchor' attribute values are malformed. Remove the comma and seeAnchor Layout (http://dev.sencha.com/deploy/dev/docs/?class=Ext.layout.AnchorLayout) API docs for examples of proper usage.

Hook
18 Apr 2011, 8:56 AM
Thanks for the reply. I discovered in fooling around that adding a hiehgt made things work. But I was hoping to only have to specify the hiehgt at the outermost levgel & have everything else pick this up as needed.

Any way to make this work.

Thanks for pointing out th errors in my anchor props.

--
JR

Screamy
18 Apr 2011, 9:13 AM
You could try 'autoHeight: true' on the container panel, but I'm not sure if you'll get the desired effect. 'autoHeight' seems to be discouraged in most of the forum posts I've read.

From what I can tell, if you're dealing with a layout which specifically handles a height or width concern, they you have to provide an initial height/width for the container...

Hook
18 Apr 2011, 12:00 PM
autoHeight worked. Thanks.

--
Hook