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?

Answer 1

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,
    }

});