0

In my ExtJS application (4.2.1) all my responses from server has a default structure.

I'm trying to fill a TreeStore from my server method but I can't.

This is my server JSON response:

{
  "data": [
    {
      "text": "Test 1",
      "id": "1",
      "leaf": true,
      "cls": null,
      "children": [
        {
          "text": "Test 11",
          "id": "11",
          "leaf": true,
          "cls": null,
          "children": null
        }
      ]
    },
    {
      "text": "Test 2",
      "id": "2",
      "leaf": true,
      "cls": null,
      "children": null
    },
    {
      "text": "Test 3",
      "id": "3",
      "leaf": true,
      "cls": null,
      "children": null
    },
    {
      "text": "Test 4",
      "id": "4",
      "leaf": true,
      "cls": null,
      "children": null
    },
    {
      "text": "Test 5",
      "id": "5",
      "leaf": true,
      "cls": null,
      "children": null
    }
  ],
  "message": "",
  "num": 1,
  "success": true,
  "code": null
}

My TreeStore looks like this:

Ext.define('App.store.menu.ReportMenu', {
    extend: 'Ext.data.TreeStore',
    autoLoad: true,
    requires: [
        'App.model.menu.ReportMenu',
        'App.proxy.CustomProxy'
    ],

    model: 'App.model.menu.ReportMenu',
    proxy:
        {
            type: 'customproxy',
            api: {
                read: '/api/Security/GetUserReportsMenu'
            }
        }
});

My model looks like this:

Ext.define('App.model.menu.ReportMenu', {
    extend: 'Ext.data.Model',
    idProperty: 'id',

    fields: [{
        name: 'text'
    }, {
        name: 'id'
    }, {
        name: 'leaf',
        type: 'boolean'
    }, {
        name: 'cls'
    }, {
        name: 'children'
    }],

});

And my TreePanel in my view is this one:

{
 xtype: 'treepanel',
            title: 'Reports List',
            itemId: 'rptList',
            glyph: Glyphs.LIST,
            width: 300,
            border: 1,
            store: Ext.create('App.store.menu.ReportMenu'),
            displayField: 'text',
            useArrows: false,
            rootVisible: true,
}

And this is the only thing I can see in my TreePanel:

enter image description here

Any clue on what I'm doing wrong? I can't change the server JSON response structure because it's a standard in the whole application.

VAAA
  • 14,531
  • 28
  • 130
  • 253

1 Answers1

0

In your previous code missing reader in proxy:

Ext.define('App.store.menu.ReportMenu', {
    extend: 'Ext.data.TreeStore',
    autoLoad: true,
    requires: [
        'App.model.menu.ReportMenu',
        'App.proxy.CustomProxy'
    ],

    model: 'App.model.menu.ReportMenu',
    proxy:
       {               
           type: 'customproxy',
           api: {
              read: '/api/Security/GetUserReportsMenu'
           }
       }
   }
);

The code after insert reader definition:

Ext.define('App.store.menu.ReportMenu', {
    extend: 'Ext.data.TreeStore',
    autoLoad: true,
    requires: [
        'App.model.menu.ReportMenu',
        'App.proxy.CustomProxy'
    ],

    model: 'App.model.menu.ReportMenu',
    proxy:
       {

           type: 'customproxy',
           api: {
              read: '/api/Security/GetUserReportsMenu'
           },
           reader:{
              type:'json'
              ,root:'data'
           }
      }
);
kharulli
  • 1