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, Jan 17 '13 at 12:43
Yes, i am sure. Even if i manuall add id like -666, same error. — patryks, Jan 17 '13 at 13:07

Izhaki · Answer 1 · 2013-01-17T13:50:46.457

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.

Same error. I think my root node is messed up. I updated post with json response used to build tree — patryks, Jan 17 '13 at 13:09
Ad1. So how will tree know if it is leaf or not? What about text field? It is also in NodeInterface but if i do not specify it in model, the node text will be empty Ad2. I dont want it to be handled. I just want it to be there. I do this all the time with grids and other components and it works ok. Ad 3. Tools are just not implemented yet. I did not declared them in model so tools are not part of the record. — patryks, Jan 17 '13 at 15:24
I used the id to communicate with other components. I find really bad workaround: instead of `var node = this.treeStore.getNodeById(data.id);` i use `var node = this.treeStore.getRootNode().findChild('internalId', data.internalId, true);`. After creating node i just have to `node.data['internalId'] = node.internalId;`. Everything works, but i really dont like it. I will get back to the problem when i find some time. Thanks Izhaki for help. — patryks, Jan 17 '13 at 15:32

score -2 · Answer 2 · edited Nov 27 '15 at 08:01

-2

Please override your update indexes function and it will work fine.

edited Nov 27 '15 at 08:01

APC

144,005
19
170
281

answered Nov 27 '15 at 06:18

prj

1

ExtJS TreeStore appendChild - problems with ids

2 Answers2