ExtJS treepanel not getting real children items

Question

I have a treepanel in ExtJS 4.2.1.

The tree data is shown in the panel but everytime I expand a node, I get the same information below the node and so to the infinite.

I'm not getting the real children items. You can appreciate that the json response has children for the parent nodes but somehow everytime I expand one node, an ajax call to my service is done and thus I get again all the tree data structure.

This is my json:

[
    {
      "text": "QUALITY AREA",
      "cls": null,
      "expanded": false,
      "checked": false,
      "leaf": false,
      "children": [
        {
          "text": "JUNIOR A",
          "cls": null,
          "expanded": false,
          "checked": false,
          "leaf": true,
          "children": null
        }
      ]
    },
    {
      "text": "HUMAN RESOURCES",
      "cls": null,
      "expanded": false,
      "checked": false,
      "leaf": false,
      "children": [
        {
          "text": "SENIOR C",
          "cls": null,
          "expanded": false,
          "checked": false,
          "leaf": true,
          "children": null
        }
      ]
    },
    {
      "text": "IT DEPARTMENT",
      "cls": null,
      "expanded": false,
      "checked": false,
      "leaf": false,
      "children": [
        {
          "text": "JUNIOR E",
          "cls": null,
          "expanded": false,
          "checked": false,
          "leaf": true,
          "children": null
        }
      ]
    },
    {
      "text": "TRAINING",
      "cls": null,
      "expanded": false,
      "checked": false,
      "leaf": false,
      "children": [
        {
          "text": "JUNIOR F",
          "cls": null,
          "expanded": false,
          "checked": false,
          "leaf": true,
          "children": null
        }
      ]
    },
    {
      "text": "BENEFITS & COMP",
      "cls": null,
      "expanded": false,
      "checked": false,
      "leaf": false,
      "children": [
        {
          "text": "SENIOR D",
          "cls": null,
          "expanded": false,
          "checked": false,
          "leaf": true,
          "children": null
        }
      ]
    },
    {
      "text": "ADMIN",
      "cls": null,
      "expanded": false,
      "checked": false,
      "leaf": false,
      "children": [
        {
          "text": "CHIEF A",
          "cls": null,
          "expanded": false,
          "checked": false,
          "leaf": true,
          "children": null
        }
      ]
    }
  ],

This is my treepanel:

{
                xtype: 'treepanel',
                itemId: 'treepaneltest',
                store: store,
                rootVisible: false,
                useArrows: true,
                frame: true,
                title: 'Check Tree',
                width: 500,
                height: 250,

            }

Do I have to change something in my json?

You need to set loaded: true, otherwise it tries to load again when you expand the node. — Evan Trimboli

Manish Sharma Manish Sharma · Accepted Answer · 2014-11-20T12:02:09

Can you show the store.

Ideally the tree store should look like this as stated below.

Ext.define('MyApp.store.Hierarchies',{
    extend: 'Ext.data.TreeStore', 
    model : 'MyApp.model.Hierarchy',
    proxy: {
        type: 'ajax',
        url: 'path-to-json-file.json',
    },

    root: {
       text: 'Root',
       id: 'root',
       iconCls: 'cls',
       expanded: false,
    }

});

ExtJS treepanel not getting real children items

1 Answers