Panels containing Lists are not accounting for list height after list store load

[NickT]

I am noticing that my Lists height is not being calculated and the container resized accordingly after the list store is loaded. So, I have a list inside of a panel that is centered and packed for instance. The list loads but does not display the list because no height was explicitly given. I did try 100% and that did not work either. I noticed the elimination of doLayout. My question regarding List is, should the height be recalculating on the container after a list store load? or do I always have to give the list an explicit pixel height?

[Jamie Avins]

Does the container for the list have a height, or some kind of layout that would provide a height. All scrollable items themselves cannot provide height.

[NickT]

Hello,

I have experienced this with the selectfield. Perhaps the selectfield should accept a listConfig (and pickerConfig) because it is difficult to override the internal mechanism. In addition to the height issue, I needed to throttle lists using the ListPagingPlugin, and needed a way to configure the internal list with that plugin, hence I had to override the selectfield class...

            {                xtype: 'selectfield',
                label: 'Merchant',
                listConfig:{
                    height: 500,
                    width: 400,
                    plugins: [new Ext.plugins.ListPagingPlugin({loadPreviousText: 'Load Previous...', loadMoreText:'Load More...'})]
                }
}

[grantcox]

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?

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'
                }
            ]
        });
    }
});

[hanguokai]

Below is your example code, but I modify a little.
Now it's ok, don't set fix height and it's dynamic height !

1)List's all outer(parent) container must be : layout : 'fit'
so the list can fill all the space.
2) but if it use dock child component(the outer's outer in this example) , the container can't use fit layout, so use layout : 'vbox' and must set flex value.

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",
                            layout : 'fit',
                            flex: 1,
                            items: [
                                {
                                    xtype: 'list',
                                    itemTpl: '{title}',
                                    store: {
                                        fields: ['title'],
                                        data: [
                                            {title: 'Group 1'},
                                            {title: 'Group 2'},
                                            {title: 'Group Three'},
                                            {title: 'Group 4'}
                                        ]
                                    }
                                },
                            ]
                        },
                    
                        {
                            html: 'at bottom',
                            dock : 'bottom'
                        }
                    ]
                },
                
                {
                    title: 'Contact',
                    iconCls: 'user',
                    html: 'Contact Screen'
                }
            ]
        });
    }
});