Problem with dynamically (from db) building TreeStore for Ext.NestedList
Hi!
I'm working at selecting hierarchical data from database table into my store, which I want bind to Ext.NestedList.
My database table looks like: myTable = [ id, parentId, name ]
The model is:
Code:
Ext.regModel('myModel', {
fields : [
{name: 'id', type: 'int'},
{name: 'parentId', type: 'int'},
{name: 'name', type: 'string'}
]
})
And the code is:
Code:
this.dbConn.transaction(function (transaction, results) {
var SQL = "SELECT * FROM myTable ORDER BY name ASC";
transaction.executeSql(SQL, [], function (transaction, results){
var dataArr = [], i, since_id = 0, script;
if (results.rows && results.rows.length) {
for (i = 0; i < results.rows.length; i++) {
if (since_id == 0) {
since_id = results.rows.item(i).id;
}
dataArr.push({
id: results.rows.item(i)['id'],
parentId: results.rows.item(i)['parentId'],
name: results.rows.item(i)['name']
});
}
}
var store = new Ext.data.TreeStore({
model: 'myModel',
nodeParam: 'id',
//parentField: 'twgNadrzednaId', //-founded at Ext forum - didn't found at Touch
root : {
items: dataArr
},
proxy : {
type : 'ajax',
url: '/whateva',
reader : {
type : 'tree',
root : 'items'
}
},
autoLoad : false
});
var nestedList = new Ext.NestedList({
fullscreen : true,
title : 'myNestedList',
useToolbar: true,
updateTitleText: true,
getItemTextTpl: function() {
return '<div><tpl if="leaf !== true">[^] </tpl>{name}</div>';
},
dock : 'top',
store: store
});
var groupPanel = new Ext.CustomPanel({
defaults: {
scroll: 'vertical'
},
floating: true,
modal: true,
centered: true,
width: Ext.Element.getViewportWidth(),
height: Ext.Element.getViewportHeight(),
scroll: 'vertical',
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
title: 'Group',
defaults: {
iconMask: true,
ui: 'plain'
},
items: [{ xtype: 'spacer' }, {
iconCls: 'delete',
iconMask: true,
handler: function(){ groupPanel.hide(); }
}]
}],
items: [nestedList]
});
groupPanel.show()
});
})
The code loading every record into my list, but don't put it in hierarchy. Does someone have idea how to get it work? I want to show NestedList only with main parents and load childrens during selecting items at list.
Every help would be appreciated.
