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

blessanm86 · Accepted Answer · 2013-05-09T07:42:30.957

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.

Hi thanks for this, it worked! Sorry for being dumb but what was wrong with my view originally? I used Sencha Architect to create the layout so am intrigued to know what the issue was. — jaffa, May 09 '13 at 07:29
I've updated my answer. Btw select this as the correct answer. — blessanm86, May 09 '13 at 07:43

score 0 · Answer 2 · answered May 09 '13 at 06:42

0

You need to use:

layout: 'vbox'

instead of:

type: 'vbox'

for your first container and it should work.

answered May 09 '13 at 06:42

Eli

14,779
5
59
77

Does the fact that it is a 'Ext.navigation.View' change anything with regard to it being a list? – jaffa May 09 '13 at 07:15
@jaffa I don't know why but I just create a fiddle and it works for me though: http://www.senchafiddle.com/#BBTuu – Eli May 09 '13 at 07:42

Sencha Touch list not displaying (again!)

2 Answers2

Linked