Sencha touch List - extjs

Question

I'm new in sencha touch. I run into some strange behavior. Shortly I want to make one window with toolbar and list below.
Main launch code:
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
name: 'xxx',
controllers: ['Main'],
views: ['Home', 'Header', 'Footer', 'list.MainMenu'],
stores: ['MainMenu'],
models: ['MenuItem'],
launch: function() {
Ext.create('xxx.view.Viewport');
}
});
Viewport view:
Ext.define('xxx.view.Viewport', {
extend: 'Ext.Panel',
config: {
fullscreen: true,
items: [
{
xtype: 'headerpanel',
},{
xtype: 'MainMenu'
}
]
}
});
Header view:
Ext.define('xxx.view.Header', {
extend: Ext.Panel,
xtype: 'headerpanel',
config: {
items: [
{
xtype: 'titlebar',
docked: 'top',
title: '<img src="lib/resources/images/x.png" />',
items: [
{
text: 'One',
align: 'left'
},{
text: 'Two',
align: 'right'
}
]
}
]
}
});
Meniu view:
Ext.define('xxx.view.list.MainMenu', {
extend: 'Ext.List',
xtype: 'MainMenu',
requires: ['xxx.store.MainMenu'],
config: {
itemTpl: '{title}',
store: 'MainMenu'
}
});
Menu store:
Ext.define('xxx.store.MainMenu', {
extend: 'Ext.data.Store',
config: {
model: 'xxx.model.MenuItem',
data: [
{icon: 'a', title: 'A'},
{icon: 'b', title: 'B'},
]
}
});
Menu model:
Ext.define('xxx.model.MenuItem', {
extend: 'Ext.data.Model',
config: {
fields: ['icon', 'title']
}
});
The result of this piece code is just toolbar without any list.
I set layout to 'fit' value the result is opposite: only list I can see.

Answer 1

You forgot to set a layout to your Viewport view. Without a layout, container don't know how to display inner items.
Try the following :
Ext.define('xxx.view.Viewport', {
extend: 'Ext.Panel',
config: {
fullscreen: true,
layout:'fit',
items: [
{
xtype: 'titlebar',
docked: 'top',
title: '<img src="lib/resources/images/x.png" />',
items: [{
text: 'One',
align: 'left'
},{
text: 'Two',
align: 'right'
}]
},{
xtype: 'list',
itemTpl: '{title}',
store: 'MainMenu'
}
]
}
});
You can find more about layout here