ExtJS TreeStore appendChild - problems with ids

Question

I am trying to dynamically add new nodes using following code:

var root = this.treeStore.getRootNode();
            var n = {
                    id:--this.counter,
                    leaf: (type=='group') ? false : true,
                    expanded:true,
                    cls:'redtext',
                    text: (name == undefined) ? 'Nowa warstwa': name,
                    gsip:{
                        isGroup: (type=='group') ? true : false,
                        layer:{}
                    }
            };
root.appendChild(n);

The above code adds new node to root node but, what is strange, the newly created node cotains all the children of the root node. So the tree crashes as there are nodes with same id. When i remove id:--this.counter, everything works fine. I need this id and the one i provide is unique. The newly created node has internalId different than id, all other existing nodes have internalId=data.id.

Below store and model code:

Ext.define('GSIP_PORTAL.model.Layer',{
    extend: 'Ext.data.Model',
    fields: [
             {name: 'id',  type: 'int'} , 'text', 'leaf', 'gsip'],
    idProperty:'id'
});


Ext.define('GSIP_PORTAL.store.Layers', {
    extend: 'Ext.data.TreeStore',
    model:'GSIP_PORTAL.model.Layer',
    proxy: {
        type: 'ajax',
        url: dispatcher.getUrl('getProfile'),
        reader: {
            type: 'json',
            root: 'layers'
        }
    },
    defaultRootId:0,
    root:{
        expanded:true
    }
});

Below is json response used to build tree. I use this json to build tree at once that is why i have attribute layers as root.

{
   "id":10003,
   "name":"GSIP",
   "defaultProfile":false,
   "layers":[
      {
         "id":10012,
         "expanded":true,
         "text":"GSIP",
         "leaf":false,
         "layers":[
            {
               "id":10013,
               "expanded":true,
               "text":"Dzialki",
               "leaf":true,
               "layers":[

               ],
               "gsip":{
                  "displayName":"Dzialki",
                  "internalName":"test",
                  "isGroup":false,
                  "layer":{
                     "id":1006,
                     "type":{
                        "id":1002,
                        "name":"WMS (queryable)",
                        "description":"WMS z zapytaniami GetFeatureInfo."
                     },
                     "url":"http://192.168.21.10:8080/geoserver/gsip/wms",
                     "layerName":"egb_dzialki"
                  },
                  "order":0
               }
            }
         ],
         "gsip":{
            "displayName":"GSIP",
            "internalName":"test",
            "isGroup":true,
            "order":0
         }
      }
   ],
   "tools":[

   ]
}

I get following ext-all-debug error after adding new node TypeError: records[i] is undefined in line: ns[i].viewRecordId = records[i].internalId;

Are you 100% sure --this.counter is unique, even when compared with ids returned from the server (like that of root)? — Izhaki
Yes, i am sure. Even if i manuall add id like -666, same error. — patryks

Izhaki Izhaki · Accepted Answer · 2013-01-17T12:35:58

There are a few things I think you should fix, as your json is pretty wild.

Node records are wrapped with NodeInterface, so no need to declare fields like leaf in your model.
Model record fields can only be made of primitive types (int, bool, string, etc.). ExtJS doesn't know how to handle object fields - you need associations for that. You declare a field called gsip, but the json returned is an object.
What's 'tools'?

I'd recommend you clean your json to include layers hierarchy only. And take it from there.

In addition, to the best of my knowledge this is not the right way to add child nodes to a tree. This is:

var root = this.treeStore.getRootNode();
var n = root.createNode({
    id:--this.counter,
    leaf: (type=='group') ? false : true,
    expanded:true,
    cls:'redtext',
    text: (name == undefined) ? 'Nowa warstwa': name,
    gsip:{
        isGroup: (type=='group') ? true : false,
        layer:{}
    }
});
root.appendChild(n);

Then, internalId is used internally by ExtJs for any record that wasn't yet added to the server side - ExtJs needs its own internal id, as the client id might not be set by the client and instead be that returned from the server after saving to a database. So as soon a record is returning from the server, Ext sets the internalId same as the id field; but that won't happen for records created in the client.

ExtJS TreeStore appendChild - problems with ids

2 Answers