View Full Version : Modifying load function in Ext.data.TreeStore

16 Nov 2012, 11:03 PM
I have been loading TreeStore from a REST server, all works great if I construct the classes in the format the Tree requires on the Server.
However I want the client to identify which nodes are leaf nodes by inspecting the JSON for children and setting the leaf property accordingly.
I tried in onAppend listener but I think this is too late as the original JSON has already been bound to the model.

I have a model as below...
and load the Ext.data.TreeStore with this model assigned then apply this as a property in Ext.Tree.Panel.

Where could I place a listener to intercept the loading of the model in the store from the JSON in the response? I have been looking for this but could not find it...Maybe I am looking in the wrong place or taking the wrong approach

var e1tree = Ext.create('Ext.tree.Panel', {
title: 'Namespace',
width: 500,
height: 300,
collapsible: true,
rootVisible: false,
store: treeStore,
multiSelect: true,
columns: [{ var treeStore = Ext.create('Ext.data.TreeStore', {
model: 'NamespaceModel',
proxy: {
type: 'ajax',
url: Ei.sys.Appdata.eiHost + 'mysite/test', //elements',
listeners: {
append: function( thisNode, newChildNode, index, eOpts ) {

Ext.define('NamespaceModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'uid', type: 'string'},
{name: 'name', type: 'string'},
{name:'uicls', type:'string'},
{name:'leaf', type:'boolean'}

16 Nov 2012, 11:13 PM
How do you determine the value of leaf field? Have you tried to define a convert() (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Field-cfg-convert) function?

16 Nov 2012, 11:28 PM
no i have not , I will search on that... thanks

18 Nov 2012, 11:41 PM
I found that convert does not have enough scope to do what I need.

I implemented the code I want on the server (see below). It applies the properties I want on the fly. Whilst this works it is on the server not the client where it should be.
I would like to intercept the JSON and apply this code or similar to it.
That way different clients can adjust the recieved data to match the UI.
Until then I have this on my server side... :-(

var UpdateTree = function(tree){
tree.forEach (function(x){
if(x.children != undefined && x.children.length > 0)
x.leaf = false;
x.expandable = true;
x.leaf = true;
x.expandable = false;