Sencha Touch 2 list is invisible in container

containers, extjs, list, touch

Solution

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

Problem

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!

Original source