Mar 4, 2015
Needs of baby chicks
large well ventilated box
Escape attempts
trying to fly out of the box
banging head on metal grate
near misses with cats
giving owners heartattacks
seen from United States
seen from Iraq
seen from United States
seen from Iraq
seen from United Kingdom
seen from United States
seen from United States
seen from United Kingdom
seen from Jordan
seen from United States
seen from United Kingdom
seen from Japan
seen from United States
seen from Kuwait
seen from United States
seen from United States
seen from United States
seen from Tunisia
seen from United States
seen from United States
Needs of baby chicks
large well ventilated box
Escape attempts
trying to fly out of the box
banging head on metal grate
near misses with cats
giving owners heartattacks
Sencha Touch : Nested List
When you click an item, you will transition (slide) to the next view/card containing another list, with a "back"-button in the top-menu. And so on and so forth.
The lists doesn't necessarily have to three levels deep. I'd like to give an example which includes, say, one item with three sub-items, and one item which takes you directly to the "final" view.
Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
var data = {
text: 'Groceries',
items: [{
text: 'Drinks',
items: [{
text: 'Water',
items: [{
text: 'Sparkling',
leaf: true
},{
text: 'Still',
leaf: true
}]
}, {
text: 'Coffee',
leaf: true
}, {
text: 'Espresso',
leaf: true
}, {
text: 'Redbull',
leaf: true
}, {
text: 'Coke',
leaf: true
}, {
text: 'Diet Coke',
leaf: true
}]
},{
text: 'Fruit',
items: [{
text: 'Bananas',
leaf: true
},{
text: 'Lemon',
leaf: true
}]
},{
text: 'Snacks',
items: [{
text: 'Nuts',
leaf: true
},{
text: 'Pretzels',
leaf: true
},{
text: 'Wasabi Peas',
leaf: true
}]
},{
text: 'Empty Category',
items: []
}]
};
Ext.regModel('ListItem', {
fields: [{name: 'text', type: 'string'}]
});
var store = new Ext.data.TreeStore({
model: 'ListItem',
root: data,
proxy: {
type: 'ajax',
reader: {
type: 'tree',
root: 'items'
}
}
});
var leftNav = new Ext.NestedList({
dock: 'left',
useTitleAsBackText: true,
title: '',
displayField: 'text',
width: '350',
store: store
});
new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
flex: 1
},
dockedItems:[leftNav]
});
}
You can also refer example on following link:
http://try.sencha.com/touch/2.0.0/guides/nestedlist.1/viewer.html
----------------------------------- Posted By : Manish Kumar Choithani Senior /Lead Architect
Reference Email Ids: [email protected] [email protected] [email protected] [email protected]