1. #1
    Sencha Premium Member
    Join Date
    May 2008
    Location
    Pasadena, California
    Posts
    172
    Answers
    27
    Vote Rating
    2
    NickT is on a distinguished road

      0  

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

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


    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?

  2. #2
    Sencha - Sencha Touch Dev Team Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Answers
    17
    Vote Rating
    21
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    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.

  3. #3
    Sencha Premium Member
    Join Date
    May 2008
    Location
    Pasadena, California
    Posts
    172
    Answers
    27
    Vote Rating
    2
    NickT is on a distinguished road

      0  

    Default


    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...

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

  4. #4
    Sencha User
    Join Date
    Dec 2011
    Posts
    3
    Vote Rating
    0
    grantcox is on a distinguished road

      0  

    Default Are fluid list heights not possible?

    Are fluid list heights not possible?


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

  5. #5
    Sencha User
    Join Date
    Feb 2012
    Posts
    6
    Vote Rating
    1
    hanguokai is on a distinguished road

      0  

    Default


    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.

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