View Full Version : Problem with dynamically (from db) building TreeStore for Ext.NestedList

18 Aug 2011, 2:15 AM

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:

Ext.regModel('myModel', {
fields : [
{name: 'id', type: 'int'},
{name: 'parentId', type: 'int'},
{name: 'name', type: 'string'}

And the code is:

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;
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]


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.

21 Sep 2011, 8:34 PM
I'm trying to do the exact same thing and running into some issues loading it properly into the list. Also want to load the child item on click. Thanks.

22 Sep 2011, 12:03 AM
Unfortunately not..

I'm thinking about creating a json string during the database selection and put a whole string as an data to my NestedList. But it's not a solution which I was looking for.

Does nobody have any other suggestions?