I'm in need of a simple nested list-view example. Something along the lines of this...
(source: roosteronacid.com)
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 an example which includes, say, one item with three sub-items, and one item which takes you directly to the "final" view.
you should look into the sencha touch videos on vimeo. here is one that answers your question:
http://vimeo.com/20580117
Try the code given below it will help you understand the basic functionality of created a nested list using sencha touch.
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]
});
}
})
Following link will help you to find more info easily http://dev.sencha.com/deploy/touch/docs/.
Also look for examples in the sencha touch downloadable package.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With