PDA

View Full Version : panel with renderTo not getting the full height



bartvde
18 Apr 2011, 5:55 AM
Can anybody explain to me why the following does not work (i.e. the panel does not get a height):



new Ext.Viewport({
layout:'hbox',
layoutConfig: {
align : 'stretch',
pack : 'start'
},
items: [
{id: 'map2', flex: 1, title: "Source map"},
{id: 'map1', flex: 1, title: "Reference map"}
]
});
new Ext.Panel({renderTo: Ext.getCmp('map1').body, bodyStyle: "background-color: red"});


I've found a workaround, by adding a computed height, but there must be a nicer way to achieve this that I do not know about. TIA.



new Ext.Panel({height: Ext.getCmp('map1').getHeight(), renderTo: Ext.getCmp('map1').body, bodyStyle: "background-color: red"});

Screamy
18 Apr 2011, 6:28 AM
Try this instead:



new Ext.Viewport({
layout:'hbox',
layoutConfig: {
align : 'stretch',
pack : 'start'
},
items: [
{id: 'map2', flex: 1, title: "Source map"},
{id: 'map1', flex: 1, title: "Reference map", layout: 'fit'}
]
});

var p = new Ext.Panel({bodyStyle: "background-color: red"});
var target = Ext.getCmp('map1');
target.add(p);
target.doLayout();



Also note that hard-coded ID attributes are a bad thing. Check out the uses of the 'ref' attribute and different styles of object composition:

http://tdg-i.com/392/ext-js-screencast-the-dangers-of-ext-getcmp