Sencha Touch List of a panel - sencha-touch

Question

I have a app set up and on my hoe page/screen several links. When I click on a link it will then display a list of items (like a contact list ), then again a detailed view when the list item is clicked on as well.
I have the following set up:
App.views.Viewport = Ext.extend(Ext.Panel, {
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
dockedItems: [
{
dock : 'top',
xtype: 'toolbar',
title: '<img src="res/img/generic/TT_Small.png" />',
cls: 'homeHeader'
},
],
});
and the view I want as a list is:
App.views.HomeAbout = Ext.regModel('Contact', {
fields: ['firstName', 'lastName']
});
var store = new Ext.data.JsonStore({
model : 'Contact',
root: 'images',
sorters: 'firstName',
getGroupString : function(record) {
return record.get('firstName')[0];
},
data: [
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Rob', lastName: 'Dougan'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Michael', lastName: 'Mullany'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'}
]
});
var list = new Ext.List({
fullscreen: true,
itemTpl : '{firstName} {lastName}',
grouped : true,
indexBar: false,
store: store
});
I am using the simple 'contact' eg to start with so once running I will amend my data etc as needed, but when I click on the link to go to this view I get the following
Uncaught Attempting to create a component with an xtype that has not been registered: HomeAbout
But in my controller i have :
about: function()
{
if ( ! this.aboutView)
{
this.aboutView = this.render({
xtype: 'HomeAbout',
});
}.....
Any ideas or help would be appreciated

Answer 1

First change:
App.views.HomeAbout = Ext.regModel('Contact', {
fields: ['firstName', 'lastName']
});
to
App.models.Contact = Ext.regModel('Contact', {
fields: ['firstName', 'lastName']
});
Then have this
App.views.HomeAbout = Ext.extend(Ext.List, {
fullscreen: true,
itemTpl : '{firstName} {lastName}',
grouped : true,
indexBar: false,
store: store
});
instead of var list...
and finally reg the new xtype - class that extends default sencha-touch class - like this
Ext.reg('HomeAbout', App.views.HomeAbout);