Question

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
            })         
      ]     
  },
  ....

No correct solution

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top