PDA

View Full Version : Update NestedList tree at runtime



skizzato
27 Jan 2012, 5:53 AM
Hi guys,
I'm pretty new on Sencha World and i'm developing an Android app Sencha Based.
Now I have a 2-levels tree menu that works correctly but now i want that, by clicking on some specific items, a new menu has to be added with values taken from local database. The interface and the Query works correctly so I already have the array generated by the query, but now i need to show it.
Obviously I cannot always have a static tree.

Here is my code attached :


var store = new Ext.data.TreeStore({
model: 'ListItem',
root: data,
proxy: {
type: 'ajax',
reader: {
type: 'tree',
root: 'items'
}
}
});

var infoButton = new Ext.Button({
iconCls: 'info',
iconMask: true
});

var leftNav = new Ext.NestedList({
dock: 'left',
useTitleAsBackText: true,
title: 'Testing',
displayField: 'text',
width: '300',
getItemTextTpl: function(node) {
return '<img class="eventIcon" src="{imgURL}" width=32 height=32> {text}'; // I will use a cell icon in my store
},
toolbar: {
title: 'Main Tb',
items: [ {xtype: 'spacer'}, infoButton]
}
});



Where the data is something like this:



var data = {
text: 'Groceries',
items: [{
text: 'Drinks',
items: [{
text: 'Water',
items: [{
text: 'Sparkling',
},{
text: 'Still',
}]
},{
text: 'Coffee',
},{
text: 'Espresso',
},{
text: 'Redbull',
},{
text: 'Coke',
},{
text: 'Diet Coke',
}]
},{
text: 'Fruit',
items: [{
text: 'Bananas',
},{
text: 'Lemon',
}]
},{
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'}]
});



I'm trying to do some stuff on leftNav.on('itemtap',function(subList,subIdx,el,e) { ... }

Thanks for the help.