ExtJS treeStore : make a tree panel from json

Question

hi all.

I have a service return json response for object containing group object that its children may contain group object or device object.

how to make a model and store for a tree panel.

this is my Json file:

{
  "1": {
    "group": {
      "name": "مجموعة1",
      "groupId": 0,
      "attributes": {},
      "id": 1
    },
    "children": [
      {
        "group": {
          "name": "مجموعة2",
          "groupId": 1,
          "attributes": {},
          "id": 2
        },
        "children": [
          {
            "device": {
              "name": "مهند",
              "uniqueId": "585549",
              "lastUpdate": "Mar 17, 2020 1:04:02 PM",
              "positionId": 2796,
              "geofenceIds": [],
              "phone": "",
              "model": "",
              "contact": "",
              "disabled": false,
              "groupId": 2,
              "attributes": {},
              "id": 1
            },
            "children": []
          },
          {
            "device": {
              "name": "فراس",
              "uniqueId": "11111",
              "positionId": 0,
              "geofenceIds": [],
              "phone": "",
              "model": "",
              "contact": "",
              "disabled": false,
              "groupId": 2,
              "attributes": {},
              "id": 2
            },
            "children": []
          },
          {
            "group": {
              "name": "مجموعة 5",
              "groupId": 2,
              "attributes": {},
              "id": 5
            },
            "children": []
          }
        ]
      }
    ]
  },
  "2": {
    "group": {
      "name": "مجموعة2",
      "groupId": 1,
      "attributes": {},
      "id": 2
    },
    "children": [
      {
        "device": {
          "name": "مهند",
          "uniqueId": "585549",
          "lastUpdate": "Mar 17, 2020 1:04:02 PM",
          "positionId": 2796,
          "geofenceIds": [],
          "phone": "",
          "model": "",
          "contact": "",
          "disabled": false,
          "groupId": 2,
          "attributes": {},
          "id": 1
        },
        "children": []
      },
      {
        "device": {
          "name": "فراس",
          "uniqueId": "11111",
          "positionId": 0,
          "geofenceIds": [],
          "phone": "",
          "model": "",
          "contact": "",
          "disabled": false,
          "groupId": 2,
          "attributes": {},
          "id": 2
        },
        "children": []
      },
      {
        "group": {
          "name": "مجموعة 5",
          "groupId": 2,
          "attributes": {},
          "id": 5
        },
        "children": []
      }
    ]
  },
  "3": {
    "group": {
      "name": "مجموعة3",
      "groupId": 0,
      "attributes": {},
      "id": 3
    },
    "children": [
      {
        "group": {
          "name": "مجموعة4",
          "groupId": 3,
          "attributes": {},
          "id": 4
        },
        "children": []
      }
    ]
  },
  "4": {
    "group": {
      "name": "مجموعة4",
      "groupId": 3,
      "attributes": {},
      "id": 4
    },
    "children": []
  },
  "5": {
    "group": {
      "name": "مجموعة 5",
      "groupId": 2,
      "attributes": {},
      "id": 5
    },
    "children": []
  }
}