Problem with dynamically (from db) building TreeStore for Ext.NestedList

[Surykat]

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:

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;
                        }
                        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.

[zonathen]

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.

[Surykat]

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?