View Full Version : Displaying a list as my secodn page with detailed view

19 Sep 2011, 3:56 AM
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/DMT_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

19 Sep 2011, 5:10 AM
Looks liek I have sorted my issue out with the following, by submitting it as a var.

var mylist=Ext.regModel('Contact', { fields: ['firstName', 'lastName'] });

then addign it to the panel:

App.views.HomeAbout = Ext.extend(Ext.Panel, {
items :

this adds it under the tooldbar so I can utalise this fro back etc.

Now my question is I have sussed how to complete a click event on a list item, but how would I then display a detailed view page?

I have:

onItemDisclosure: function(record, btn, index) {...}


19 Sep 2011, 7:52 AM
I have got further a little.

I ahve created a nets view list but what I nwo after is when they press a selection within the last item list, it then opens another page that is used to show a detail view of text and images.
Below is my nested list.

var data = {text: 'My List',
items: [{ text: 'First List Item',
items: [{text: 'Sub list one'}, {text: 'Sub list Two'}] },
{ text: 'Second List Item',
items: [{text: 'Sub list one'},{text: 'Sub list Two'}] } ] };

When me / the user clciks on the list and gets to the sublist then clicks on the list item called say "Sub list One(or) Two" then at the moment it opens to a blank page as there are no more lists, but instead I woudl liek to dispaly a normal page with details on, that can scroll and everything.

At the moment I dotn need to worry about loading in my json dynamiocally as I woudl liek to get a working model before I move on to that side of it

This is not a phonegap app but a standard web app to be view online via mobiles.