Sencha Touch nested list detailed page view - sencha-touch

Question

I have the following nested list (only on item in at present to make testing easier).
It works ok, but how can I display a normal page view that has html within it or loads the html page in.
var data = {text: 'Top List',
items: [{
text: 'List item',
items: [{text: 'Selected Page'}]
}]
};
Ext.regModel('ListItem', {
fields: [{name: 'text', type: 'string'}]
});
var store = new Ext.data.TreeStore({
model: 'ListItem',
root: data,
proxy: {
type: 'memory',
reader: {
type: 'tree',
root: 'items'
}
}
});
var nestedList = new Ext.NestedList({
fullscreen: true,
displayField: 'text',
title: 'Theatres',
store: store
});
App.views.Pastcard = Ext.extend(Ext.Panel, {
title: "past",
iconCls: "add",
items: [nestedList]
});
Ext.reg('HomeAbout', App.views.Pastcard);
SO want the user selects the 'Selected Page' item it opens the the detailed view page and html information, preferably from an external source to limit the amount of code on one page.
EDIT
I think i can try and be a little clearer.
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 lsit and gets to the sublist then clicks on the list item called say "Sub list 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
Thsi is not a phonegap app but a standard web app to be view online via mobiles.
* Edn of Edit **
Thanks

Answer 1

To use external source use a store with ajax proxy check this http://dev.sencha.com/deploy/touch/docs/?class=Ext.data.Store.
To display HTML you can use just html: '<h1>Selected Page</h1>', styleHtmlContent:true,
instead of text:'Selected Page'
The best way is to load JSON objects from:
var myStore = new Ext.data.Store({
model: 'User',
proxy: {
type: 'ajax',
url : '/users.json',
reader: {
type: 'json',
root: 'users'
}
},
autoLoad: true
});
then instead of html or text property use a template to display it:
tpl:[
'<h4>Email</h4>',
'<tpl for="emails">',
'<div class="field"><span class="label">{type}: </span>{value}</div>',
'</tpl>'
]
Check this tutorial http://www.sencha.com/learn/a-sencha-touch-mvc-application-with-phonegap/ and the API docs http://dev.sencha.com/deploy/touch/docs/ for more information.
Update
To the last items i.e. to the sub lists add this leaf: true then have add a handler fir onItemDisclosure to the list. You can get the record clicked as first argument passed to the event. Then you can use that object to display it on a different panel.
You can still use the tutorial above, just substitue the code where the contacts are fetched from the phone with some static data.
From that tutorial this is the part you need
app.views.Viewport = Ext.extend(Ext.Panel, {
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
initComponent: function() {
//put instances of cards into app.views namespace
Ext.apply(app.views, {
contactsList: new app.views.ContactsList(),
contactDetail: new app.views.ContactDetail(),
contactForm: new app.views.ContactForm()
});
//put instances of cards into viewport
Ext.apply(this, {
items: [
app.views.contactsList,
app.views.contactDetail,
app.views.contactForm
]
});
app.views.Viewport.superclass.initComponent.apply(this, arguments);
}});
This is the main panel where the list and the details panel are contained. You handle the onItemDisclosure event on the list, get the record that was clicked on, update the details panel with that data and the switch to that panel with
app.views.viewport.setActiveItem(
app.views.contactsList, options.animation
);