Code:
/***Application structure
/index.html
/data/data.json
/app/app.js
/app/controller/Main.js
/app/model/Section.js
/app/model/Product.js
/app/view/Homepage.js
/app/view/Welcomescreen.js
/app/view/Catalog.js
/app/store/Section.js
***/
//app/app.js
//----------------------------------------------------------------------
Ext.Loader.setConfig({
enabled:true
});
Ext.application({
name: 'Myapp',
controllers: ['Main'],
launch: function() {
Ext.create('Myapp.view.Homepage');
}
});
//----------------------------------------------------------------------
//app/controller/Main.js
//----------------------------------------------------------------------
Ext.define('Myapp.controller.Main', {
extend: 'Ext.app.Controller',
views: [
'Homepage',
'Welcomescreen',
'Catalog'
],
models: [
'Product',
'Section'
],
stores: ['Section'],
init: function() {
this.control({
});
}
});
//----------------------------------------------------------------------
//app/view/Homepage.js
//----------------------------------------------------------------------
Ext.define('Myapp.view.Homepage', {
extend: 'Ext.tab.Panel',
config: {
fullscreen: true,
tabBar: {
docked: 'bottom',
layout: {
pack: 'center'
}
},
defaults: {
scrollable: true
},
items: [
{
xtype : 'welcomescreen'
},
{
xtype : 'catalog'
}
]
},
initialize: function() {
console.log("Init homescreen");
this.callParent(arguments);
}
});
//----------------------------------------------------------------------
//app/view/Welcomescreen.js
//----------------------------------------------------------------------
Ext.define('Myapp.view.Welcomescreen', {
extend: 'Ext.Container',
xtype: 'welcomescreen',
config: {
title: 'home',
iconCls: 'home',
defaults: {
styleHtmlContent: true
},
items: [
{
xtype: 'container',
html: '<h2>Hello world!!!</h2>'
}
]
},
initialize: function() {
console.log("Init welcomescreen");
this.callParent(arguments);
}
});
//----------------------------------------------------------------------
//app/view/Catalog.js
//----------------------------------------------------------------------
Ext.define('Myapp.view.Catalog', {
extend: 'Ext.Container',
xtype: 'catalog',
config: {
title: 'My catalog',
iconCls: 'bookmarks',
items: [
{
xtype: 'toolbar',
docked: 'top'
},
{
xtype: 'nestedlist',
store: 'Myapp.store.Section',
displayField: 'name'
}
]
},
initialize: function() {
console.log("Init catalog");
this.callParent(arguments);
}
});
//----------------------------------------------------------------------
//app/model/Section.js
//----------------------------------------------------------------------
Ext.define('Myapp.model.Section', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'string'},
{name: 'name', type: 'string'},
{name: 'items', type: 'auto'}
],
hasMany: {
name: 'products',
model: 'Myapp.model.Product'
}
});
//----------------------------------------------------------------------
//app/model/Product.js
//----------------------------------------------------------------------
Ext.define('Myapp.model.Product', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'string'},
{name: 'name', type: 'string'}
],
belongsTo: 'items'
});
//----------------------------------------------------------------------
//app/store/Section.js
//----------------------------------------------------------------------
Ext.define('Myapp.store.Section', {
extend: 'Ext.data.TreeStore',
model: 'Myapp.model.Section',
autoLoad: true,
root: {},
proxy: {
type: 'ajax',
url: 'data/data.json',
reader: {
type: 'json',
root: 'items'
}
}
});
//----------------------------------------------------------------------
//data/data.json
//----------------------------------------------------------------------
{
"items": [
{
"id": "id1",
"name": "Section #1",
"products": [
{
"id": "pr11",
"name": "Product #1"
},
{
"id": "pr12",
"name": "Product #2"
}
]
},
{
"id": "id2",
"name": "Section #2",
"items": [
{
"id": "id22",
"name": "Section #3",
"products": [
{
"id": "pr21",
"name": "Product #3"
},
{
"id": "pr22",
"name": "Product #4"
}
]
}
]
}
]
}
//----------------------------------------------------------------------
Sencha Touch 2 MVC NestedList
)
