使用EXTJS处理Json数据

Question

Java应用程序向前发送以下json数据：

{"data":[{"id":1,"name":"","password":"xxxxxxxxxxxxxxxxxxx","roles":[{"id":1,"name":"Administrator"}],"username":"admin"}]}

在前面我有一个如下的用户模型：

Ext.define('App.store.Users', {
  extend: 'Ext.data.Store',
   fields: [
      {name: 'id', type: 'auto'},
      {name: 'name', type: 'auto'},
      {name: 'password', type: 'auto'},
      {name: 'roles', type: 'auto'},
      {name: 'username', type: 'auto'},
   ],
   autoLoad: true,
   proxy: {
      type: 'ajax',
      url: '/web/user',
      reader: {
          type: 'json',
          root: 'data'
      }
   }
});

编辑： 我更新了代码，这样就加载了数据。

我也做了一个网格，所以我可以显示结果。

Ext.define('App.view.Home', {
  extend: 'Ext.panel.Panel',
  alias: 'widget.home',
  title: 'Home',
  layout: 'fit',
  items: [
      {
          xtype: 'gridpanel',
          store: 'Users',
          title: 'Users grid',
          columns: [
              {text: 'Id', dataIndex: 'id' },
              {text: 'Username', dataIndex: 'username', width : 200 },
              {text: 'Role', dataIndex: 'roles', width : 200 },
              {text: 'Name', dataIndex: 'name', width : 200 },
          ]
      }
  ]
});

现在剩下的问题是，网格正在显示[object Object]我如何才能显示我想要来自该对象的部分，作为name的{​​{1}}

Answer 1

您需要将阅读器类型更改为JSON，此代码适用于我：

Fiddle

Ext.application({
    name: 'Fiddle',

    launch: function() {
        Ext.define('Users', {
            extend: 'Ext.data.Store',
            fields: ['id', {
                name: 'username',
                type: 'string'
            }, {
                name: 'name',
                type: 'string'
            }],
            autoLoad: true,
            proxy: {
                type: 'ajax',
                url: 'data1.json',
                reader: {
                    type: 'json',
                    rootProperty: 'data'
                }
            }
        });

        Ext.create("Users", {
            listeners: {
                load: function() {
                    console.log("Loaded " + this.getCount() + " records");
                }
            }
        });
    }
});

我也删除了映射，因为我认为你不需要它们。

修改

关于网格中显示的数据，JSON数据中的'roles'属性是一个数组，这就是为什么它在网格中显示为对象的原因，我已经更新了小提琴，以显示一种可能的方法来获取这个信息，但它不是推荐的方法。您可能应该在ExtJs中查看associations。

查看Data Package上的指南也可能对此有所帮助。

Ext.application({
    name: 'Fiddle',

    launch: function() {
        Ext.define('Users', {
            extend: 'Ext.data.Store',

            fields: [{
                name: 'id',
                type: 'int' 
            }, {
                name: 'username',
                type: 'string'
            }, {
                name: 'name',
                type: 'string'
            }, {
                name: 'roles',
                type: 'auto'
            }],

            autoLoad: true,

            proxy: {
                type: 'ajax',
                url: 'data1.json',
                reader: {
                    type: 'json',
                    root: 'data'
                }
            },
            listeners: {
                load: function(store, records) {
                    console.log("Loaded " + this.getCount() + " records");
                }
            }
        });

        var users = Ext.create("Users");

        Ext.define('App.view.Home', {
            extend: 'Ext.panel.Panel',
            alias: 'widget.home',
            title: 'Home',
            layout: 'fit',
            items: [{
                xtype: 'gridpanel',
                store: users,
                title: 'Users grid',
                columns: [{
                    text: 'Id',
                    dataIndex: 'id'
                }, {
                    text: 'Username',
                    dataIndex: 'username',
                    width: 200
                }, {
                    text: 'Role',
                    dataIndex: 'roles',
                    width: 200,
                    renderer: function(v, metadata) {
                        return v[0].name;
                    }
                }, {
                    text: 'Name',
                    dataIndex: 'name',
                    width: 200
                }]
            }]
        });

        Ext.create('App.view.Home', {
            renderTo: Ext.getBody()
        });
    }
});