I have a composite view: a tab panel (which is a view, call it Man) has in one of the panels a vertical box (another view, call it ListView), inside this vertical box there is a list object (it's an item of the vbox).
It is clear how to load/refresh etc the list items, but I am able to visualize the list only if I assign a fixed height to the vbox.
I don't know how many list items there will be so I can't always use a fixed height. The only way I've found so far is to count the items and use "setHeight" on the vbox. I don't like this approach because I must fix the height of each item row (which is ok-ish but not optimal). If I remove the vbox from the ListView view, I can't have the list rendered properly in the page: I find the values if I inspect the page but they are inside some boxes with height and width 0 so the list values can't be seen.
Main View relevant code:
//Tabbed view
xtype: 'tabpanel',
tabBarPosition: 'bottom',
flex: 1,
items: [
{
...
},
{
title: 'List',
iconCls: 'more',
id:'more',
scrollable: true,
styleHtmlContent: true,
items: [
Ext.create('MyApp.view.ListView')
]
},
{
...
}
]
Relevant code of ListView:
Ext.define('MyApp.view.ListView', {
extend: 'Ext.Container',
requires: [...,'Ext.List'],
config:{
layout: 'vbox',
id: 'listBox',
scrollable:false,
height: 200, //**without a fixed height, the list is not visible in the page**
items: [
Ext.create('Ext.List',{
model: 'MyApp.model.SomeModel',
flex: 1,
scrollable:false
})
]
},
....