在extjs 4.2.x的树面板中没有填充JSON数据

时间:2014-04-24 19:36:51

标签: extjs extjs4 treepanel

使用以下配置,我无法在树状面板中填充json数据。

从服务器加载存储后,我无法在控制台日志中看到任何记录。

是否需要从服务器发送任何特定的json结构?

是否有配置错过?

以下是我正在使用的配置

MODEL

Ext.define('nsoapp.model.nso.Client', {
    extend: 'Ext.data.Model',

    requires: [
        'Ext.data.Field'
    ],

    fields: [
        {
            name: 'jsxid'
        },
        {
            name: 'name'
        },
        {
            name: 'type'
        },
        {
            name: 'countryId'
        },
        {
            name: 'contact'
        },
        {
            name: 'email'
        }
    ]
});

商品

Ext.define('nsoapp.store.nso.Client', {
    extend: 'Ext.data.TreeStore',

    requires: [
        'nsoapp.model.nso.Client',
        'Ext.data.proxy.Ajax',
        'Ext.data.reader.Json'
    ],

    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            model: 'nsoapp.model.nso.Client',
            storeId: 'nso.Client',
            defaultRootProperty: 'record',
            proxy: {
                type: 'ajax',
                url: '/client/',
                reader: {
                    type: 'json',
                    root: 'populateClientRes'
                }
            }
        }, cfg)]);
    }
});

TREE PANEL

xtype: 'treepanel',
    flex: 1,
    margins: '0 0 3 0',
    itemId: 'treeClient',
    overlapHeader: false,
    title: 'Clients',
    titleCollapse: false,
    animate: true,
    displayField: 'name',
    rootVisible: false,
    viewConfig: {
        rootVisible: false
    }

在控制器中我将树存储绑定到树面板

var storeClient=this.getStore('nso.ordermanagement.clientcustomization.Client');
storeClient.load({
callback: function(records, operation, success) {
var treeClient=Ext.ComponentQuery.query("#treeClient")[0];
treeClient.bindStore(storeClient);
}
});

JSON DATA

{
  "populateClientRes":{
    "record":[
      {
        "name":"A_KPI",
        "type":"CLIENT",
        "jsxid":"14487361",
        "countryId":"484",
        "contact":"34434334",
        "email":"",
        "record":[
          {
            "name":"Products",
            "value":"1",
            "type":"PRODUCT"
          },
          {
            "name":"Stores",
            "value":"1",
            "type":"STORE"
          }
        ]
      },
      {
        "name":"aCCStudyTest",
        "type":"CLIENT",
        "jsxid":"14425073",
        "countryId":"484",
        "contact":"1234567890",
        "email":"",
        "record":[
          {
            "name":"Products",
            "value":"1",
            "type":"PRODUCT"
          },
          {
            "name":"Stores",
            "value":"1",
            "type":"STORE"
          }
        ]
      }
    ]
  }
}

1 个答案:

答案 0 :(得分:0)

简短回答:JSON响应错误!

答案很长

您指定为root populateClientRes ,因此所有子项(以及子项的子项)都必须使用此标记。

标准JSON响应:

{
    "success": true,
    "children": [
        { 
            "id": 1, 
            "name": "Phil", 
            "leaf": true 
        },
        { 
            "id": 2, 
            "name": "Nico", 
            "expanded": true, 
            "children": [
                { 
                    "id": 3, 
                    "name": "Mitchell", 
                    "leaf": true 
                }
            ]},
        { 
            "id": 4, 
            "name": "Sue", 
            "loaded": true 
        }
    ]
}

在您的情况下,您必须将记录替换为 populateClientRes

{
    "success": true,
    "populateClientRes": [ 
        {
            "name":"A_KPI",
            "type":"CLIENT",
            "jsxid":"14487361",
            "countryId":"484",
            "contact":"34434334",
            "email":"",
            "populateClientRes": [
                {
                    ...         
                }, {
                    ...
                    populateClientRes: [{...},{...}]
                },
            ]
        },
        {
            ...
        }
    ]
}

重要提示

对于所有没有子节点的非叶节点(例如,名称为Sue的Person),服务器响应必须将loaded属性设置为true。否则,代理将在扩展时尝试为这些节点加载子节点。

您可以找到更多信息here