Sencha Touch 2 list is invisible in container

Question

I'm trying to write simple view with list on container but i have some problems. First of all, the List is not visible when I'm trying to do it like this:

 Ext.define('App.view.News', {
    extend: 'Ext.Container', 

but when it's written like this:

Ext.define('App.view.News', {
    extend: 'Ext.navigation.View',

it works.

The problem is that when I write it with extend of navigation.View, im getting two toolbars on top and I can't find solution to disable the second one (added by the list).

Full code:

Ext.define('App.view.News', {
    extend: 'Ext.Container', //Ext.navigation.View
    xtype: 'news',
    requires: [
        'Ext.dataview.List',
        'Ext.data.proxy.JsonP',
        'Ext.data.Store'
    ],
    config: {
        style: ' background-color:white;',

        items: 
        [
            {
                xtype: 'toolbar',
                docked: 'top',
                title: 'News',
                minHeight: '60px',
                items: [
                    {
                        ui: 'back',
                        xtype: 'button',
                        id: 'backButton', 
                        text: 'Back',
                    },

                    {
                        minHeight: '60px',
                        right: '5px',
                        html: ['<img src="resources/images/Image.png"/ style="height: 100%; ">',].join(""),
                    },
                ],          
            },

            { 
                xtype: 'list',
                itemTpl: '{title},{author}',
                store: {
                    autoLoad: true,
                    fields : ['title', 'author'],
                    proxy: {
                        type: 'jsonp',
                        url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog',
                        reader: {
                            type: 'json',
                            rootProperty: 'responseData.feed.entries'
                        }
                    }
                }
            }   
        ]
    }
});

Help please!

Answer 1

You need to give your container a layout and your list a flex property. The flex is important on lists as they don't have a viewable height since they scroll. I added a couple properties to your code below. Hope this helps.

Ext.define('App.view.News', {
    extend: 'Ext.Container', //Ext.navigation.View
    xtype: 'news',
    requires: [
        'Ext.dataview.List',
        'Ext.data.proxy.JsonP',
        'Ext.data.Store'
    ],
    config: {
        style: ' background-color:white;',
        layout: 'vbox', //  add a layout
        items: 
        [
            {
                xtype: 'toolbar',
                docked: 'top',
                title: 'News',
                minHeight: '60px',
                items: [
                    {
                        ui: 'back',
                        xtype: 'button',
                        id: 'backButton', 
                        text: 'Back',
                    },

                    {
                        minHeight: '60px',
                        right: '5px',
                        html: ['<img src="resources/images/Image.png"/ style="height: 100%; ">',].join(""),
                    },
                ],          
            },

            { 
                xtype: 'list',
                itemTpl: '{title},{author}',
                flex: 1,    //  add a flex property
                store: {
                    autoLoad: true,
                    fields : ['title', 'author'],
                    proxy: {
                        type: 'jsonp',
                        url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog',
                        reader: {
                            type: 'json',
                            rootProperty: 'responseData.feed.entries'
                        }
                    }
                }
            }   
        ]
    }
});