Question

在我的ExtJS应用程序（ 4.2.1 ）中，我所有来自服务器的回复都有默认结构。

我正在尝试从我的服务器方法填充TreeStore，但我不能。

这是我的服务器JSON回复：

{
  "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
}

我的TreeStore看起来像这样：

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'
            }
        }
});

我的模型看起来像这样：

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

});

我认为我的TreePanel就是这个：

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

这是我在TreePanel中唯一能看到的东西：

enter image description here

关于我做错了什么的任何线索？我无法更改服务器JSON响应结构，因为它是整个应用程序的标准。

Answer 1

在您之前的代码中，代理中缺少 reader ：

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'
           }
       }
   }
);

插入阅读器定义后的代码：

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'
           }
      }
);

ExtJS MVC无法从TreeStore绑定TreePanel（标准JSON服务器结构）

1 个答案: