Code:
<!DOCTYPE html>
<html>
<head>
<title>Sencha Touch</title>
<link href="http://cdn.sencha.io/touch/1.1.0/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="stylesheets/styles.css" rel="stylesheet" type="text/css" media="screen"/>
<script src="http://cdn.sencha.io/touch/1.1.0/sencha-touch.js" type="text/javascript"></script>
<!-- app, models, stores, views, controllers [in that order!] -->
<script type="text/javascript">
Ext.regModel('tickets', {
idProperty: 'id',
fields: [
{name: 'id', type: 'int'},
{name: 'title', type: 'string'},
{name: 'image', type: 'string'},
{name: 'description', type: 'string'},
{name: 'city', type: 'string'}
]
});
Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function(){
var store = new Ext.data.TreeStore({
model: 'tickets',
proxy: {
type: 'scripttag',
url: 'http://www.undertheradar.co.nz/feeds/showsRssRegionsiPhoneGrouped_json.php',
reader: {
type: 'tree',
root: 'tickets'
}
}
});
var nestedList = new Ext.NestedList({
fullscreen: true,
title: 'Tickets',
displayField: 'title',
image: 'image',
desc: 'description',
id: 'id',
// add a / for folder nodes in title/back button
getTitleTextTpl: function() {
return '{' + this.displayField + '}<tpl if="leaf !== true">dd</tpl>';
},
// add a / for folder nodes in the list
getItemTextTpl: function() {
return '<img src="{' + this.image + '}" align="left">{' + this.displayField + '} <tpl if="leaf != true">{' + this.id + '}</tpl>';
},
// provide a codebox for each source file
getDetailCard: function(record, parentRecord) {
return new Ext.ux.CodeBox({
value: 'Loading...',
scroll: {
direction: 'both',
eventTarget: 'parent'
}
});
},
store: store
});
nestedList.on('leafitemtap', function(subList, subIdx, el, e, detailCard) {
var ds = subList.getStore(),
r = ds.getAt(subIdx);
Ext.Ajax.request({
url: '../../src/' + r.get('id'),
success: function(response) {
detailCard.setValue(response.responseText);
},
failure: function() {
detailCard.setValue("Loading failed.");
}
});
});
}
});
/*
new Ext.Application({
name: 'xmlexample',
launch: function(){
Ext.regModel('tickets', {
fields: ['title','description','city','image'] //etc...
});
this.stores.profiles = new Ext.data.TreeStore({
model: 'tickets',
autoLoad:true,
implicitIncludes: true,
proxy: {
type: 'scripttag',
url : 'http://www.undertheradar.co.nz/feeds/showsRssRegionsiPhoneGrouped_json.php',
reader: {
type : 'tree',
root : 'tickets'
}
}
});
var productTpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="item">',
'<div class="data"><img src="{image}"/> {title} {city} {description} </div>',
'</div>',
'</tpl>'
);
new Ext.Panel({
fullscreen: true,
items: new Ext.NestedList({
store: this.stores.profiles,
tpl: productTpl,
itemSelector: 'div.item'
//other config goes here
})
});
}
});
*/
</script>
</head>
<body>
</body>
</html>