Sencha Touch list not displaying (again!)

Question

My Sencha Touch list isn't displaying. All I did was change the root container to a navigation view so other views can be pushed onto it, but then the navigation doesn't like having 'fit' as the root. So I moved that into another container with type 'fit'. However, now the list doesn't display?!

See below:

Ext.define('MyApp.view.inbox.MyInbox', {
    extend: 'Ext.navigation.View',
    alias: 'widget.myinboxview',

    requires: [
        'Ext.navigation.View'
    ],

    config: {
        title: 'My Inbox',
        xtype: 'card',
        items: [
            {
                xtype: 'container',
                type: 'vbox',
                items: [
                    {
                        xtype: 'container',
                        flex: 1,
                        items: [
                            {
                                xtype: 'container',
                                margin: 10,
                                layout: {
                                    type: 'hbox'
                                },
                                items: [
                                    {
                                        xtype: 'label',
                                        html: 'You have sent'
                                    },
                                    {
                                        xtype: 'label',
                                        html: '0 enquiry',
                                        right: 0
                                    }
                                ]
                            },
                            {
                                xtype: 'container',
                                margin: 10,
                                cls: 'linesAboveBelow',
                                layout: {
                                    type: 'hbox'
                                },
                                items: [
                                    {
                                        xtype: 'label',
                                        html: 'You have'
                                    },
                                    {
                                        xtype: 'label',
                                        html: '1 unread response',
                                        right: 0
                                    }
                                ]
                            }
                            ]
                    },
                    {
                        xtype: 'container',
                        flex: 5,
                        layout: {
                            type: 'fit'
                        },
                        items: [
                            {
                                xtype: 'list',
                                store: 'theInboxEnquiryStore',
                                itemTpl: [
                                    '<div>Date: { CreationDate }</div>'
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    }
});

blessenm blessenm · Accepted Answer · 2013-05-09T07:15:26

I have modified your layout code. Here is a fiddle for it.

Ext.define('MyApp.view.inbox.MyInbox', {
            extend: 'Ext.navigation.View',
            alias: 'widget.myinboxview',
            requires: ['Ext.navigation.View'],
            config: {
                title: 'My Inbox',
                fullscreen: true,
                items: [{
                    xtype: 'container',
                    layout: 'vbox',
                    title: 'My Inbox',
                    items: [{
                        xtype: 'container',
                        items: [{
                            xtype: 'container',
                            margin: 10,
                            layout: 'hbox',
                            items: [{
                                xtype: 'label',
                                html: 'You have sent'
                            }, {
                                xtype: 'label',
                                html: '0 enquiry',
                                right: 0
                            }]
                        }, {
                            xtype: 'container',
                            margin: 10,
                            cls: 'linesAboveBelow',
                            layout: 'hbox',
                            items: [{
                                xtype: 'label',
                                html: 'You have'
                            }, {
                                xtype: 'label',
                                html: '1 unread response',
                                right: 0
                            }]
                        }]
                    }, {
                        xtype: 'list',
                        itemTpl: '{title}',
                        flex: 1,
                        data: [{
                            title: 'Item 1'
                        }, {
                            title: 'Item 2'
                        }, {
                            title: 'Item 3'
                        }, {
                            title: 'Item 4'
                        }]
                    }]
                }]
            }
        });

There were a couple of wrong config items like xtype:card,type:'vbox'. Removed those. Removed the extra wrapper container for the list. Changed the flex properties. Added only flex to the list. As you want the list to fill the remaining space after the labels are rendered. Added the title 'My Inbox' to the child container as the navigation view has its title from the child items.

Sencha Touch list not displaying (again!)

2 Answers