Sencha touch 2 List inside Panel cant be seen

Question

I have a list in a fieldset but it wont display. How can I get it to display. I can put a height, but that makes it a scrollable box which isn't very nice.

Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.Panel',

config: {
    layout: {
        type: 'fit'
    },
    items: [
        {
            xtype: 'formpanel',
            items: [
                {
                    xtype: 'fieldset',
                    title: 'Date',
                    items: [

                        {
                            xtype: 'datepickerfield',
                            label: 'Date',
                            placeHolder: 'dd/mm/yyyy',
                            dateFormat: 'd/n/Y',
                            picker: {
                                yearFrom: 2013
                            }
                        }
                    ]
                },
                {
                    xtype: 'fieldset',
                    layout: {
                        type: 'fit'
                    },
                    title: 'Available times:',
                    items: [
                        {
                            xtype: 'list',
                            store: {
                            fields: ['name','id'],
                            data: [
                                {name: '10:15',id:1},
                                {name: '13:15',id:2},
                                {name: '17:35',id:3},
                            ]
                        },
                        itemTpl: [
                            '<div>{name}</div>'
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

});

Answer 1

I think my requirements are similar: Show the complete contents of two lists, each inside a fieldset, which is inside of another top-level container (which is added to the Viewport). What I wanted was to have the top-level container handle the scrolling and the lists not scroll at all.

I wrestled with this for quite a while (ST 2.4.1) before accepting the fact that the list height isn't calculated automatically, so it has to be set manually for this approach to work. Firing a refresh event from the store and a refresh listener to the list that manually set the list height is an elegant solution.

Here's a Sencha Fiddle demo: https://fiddle.sencha.com/#fiddle/g1n

And the demonstration code itself:

   Ext.Viewport.add({
        xtype: 'container',
        // Using 'vbox' here will break the lists since that
        // is a proportional layout...
        layout: 'default',
        scrollable: true,
        fullscreen: true,
        items: [{
            xtype: 'titlebar',
            docked: 'top',
            title: 'Titlebar'
        }, {
            xtype: 'fieldset',
            title: 'List A',
            layout: 'fit',
            items: [{
                xtype: 'list',
                itemId: 'lista',
                // This is the default row height - don't use
                // magic numbers in shipping code...
                height: 42,
                scrollable: false,
                itemTpl: '{message}',
                store: {
                    fields: ['message'],
                    listeners: {
                        addrecords: function(store) {
                            store.fireEvent('refresh', store);
                        }
                    }
                },
                // Reset the list height when the underlying data
                // store triggers a 'refresh' event...
                listeners: {
                    refresh: function(list) {
                        list.setHeight(list.getItemHeight() * 
                            list.container.getInnerItems().length);
                    }
                }
            }]
        }, {
            xtype: 'fieldset',
            title: 'List B',
            layout: 'fit',
            items: [{
                xtype: 'list',
                itemId: 'listb',
                // This is the default row height - don't use
                // magic numbers in shipping code...
                height: 42,
                scrollable: false,
                itemTpl: '{message}',
                store: {
                    fields: ['message'],
                    listeners: {
                        addrecords: function(store) {
                            store.fireEvent('refresh', store);
                        }
                    }
                },
                // Reset the list height when the underlying data
                // store triggers a 'refresh' event...
                listeners: {
                    refresh: function(list) {
                        list.setHeight(list.getItemHeight() * 
                            list.container.getInnerItems().length);
                    }
                }
            }]
        }]
    });

    // Add a bunch of items to the lists...
    Ext.ComponentQuery.query('list').forEach(function(list) {
        for(var i = 2; i < 20; i++) {
            list.getStore().add({message: 'line ' + i});
        }
    });

Answer 2

Try to add height: 'auto' and scrollable: false to your list

Demo: http://www.senchafiddle.com/#yyCVE#GNEuj#1aEQr#9eCak#oi6dM