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 United States
seen from South Korea
seen from Germany
seen from China
seen from Colombia
seen from China
seen from United States
seen from United States
seen from China
seen from United States
seen from United States
seen from China
seen from China
seen from Canada
seen from United States
seen from United States
seen from China
seen from Germany
seen from Denmark
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]