Sench Touch 2 - Rendering a List - extjs

Question

I have a simple MVC Sencha Touch application, with 1 store, 2 models and 2 views - a toolbar and a list. My toolbar renders fine, but the list does not. No exception is thrown and I can't find what I'm doing wrong.
The store (Books.js):
Ext.define('App.store.Books', {
extend: 'Ext.data.Store',
model: 'App.model.Book',
autoLoad: true,
data: [
{ id: '1', name: '1984', publisher: 'Orwell' },
{ id: '2', name: 'Biography', publisher: 'abcde' },
{ id: '3', name: 'The Old Man and the Sea', publisher: 'Hemingway' }
]
});
The view (List.js - I have another Bar.js which renders fine):
Ext.define('App.view.List', {
extend: 'Ext.List',
store : 'Books',
xtype : 'mylist',
itemTpl: '<div><strong>Name: {name}</strong>Publisher: {publisher}</div>'
});
The viewport (Viewport.js) - extends Ext.Container as I saw in several examples:
Ext.define('App.view.Viewport', {
extend: 'Ext.Container',
requires : [
'App.view.Bar',
'App.view.List'
],
config: {
fullscreen: true,
layout: 'fit',
items: [
{
xtype : 'toolbar',
docked: 'top'
},
{
xtype: 'mylist'
}
]
}
});
As I wrote - my toolbar is shown, my list ('mylist') isn't.
What am I missing or doing wrong?
Thanks

Answer 1

Try adding a config to your view
Ext.define('App.view.List', {
extend: 'Ext.List',
config: {
title: 'Books',
cls: 'books',
store: 'Books',
itemTpl: '<div><strong>Name: {name}</strong>Publisher: {publisher}</div>'
}
});