Sencha Touch 2 list is invisible in container - list

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