So, are fluid list heights not possible?
I understand that a list is dynamic and can't be re-measured when data is loaded. But I want to specify beforehand that the list should "fit" the parent - use all the space possible. But still (using ST PR2) the list will not display at all unless I used a fixed height.
For example, the code below shows a panel with a toolbar at the top, a full-height container (containing the list), and a piece of text that sits at the bottom of the screen - nice and fluid. But unless the list has the explicit height defined (currently commented out), it is completely invisible (default height of 0).
Any suggestions?
Code:
Ext.application({
name: 'Myapp',
//controllers: ['Main'],
launch: function() {
// create all the views
console.log("app launch");
Ext.create('Ext.TabPanel', {
fullscreen: true,
tabBarPosition: 'bottom',
items: [
{
title: 'Home',
iconCls: 'home',
layout: 'vbox',
items: [
{
dock : 'top',
xtype: 'toolbar',
title: 'Groups',
},
{
xtype: "container",
flex: 20,
items: [
{
xtype: 'list',
itemTpl: '{title}',
store: {
fields: ['title'],
data: [
{title: 'Group 1'},
{title: 'Group 2'},
{title: 'Group Three'},
{title: 'Group 4'}
]
},
//height: 200
},
]
},
{
html: 'at bottom',
flex: 1,
}
]
},
{
title: 'Contact',
iconCls: 'user',
html: 'Contact Screen'
}
]
});
}
});