使用 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] 我怎么能显示我想要的那个对象的部分，作为 role[的 name

Answer 1

您需要将 reader 类型更改为 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' 属性是一个数组，所以它在网格中显示为对象，我'已更新 fiddle 以显示获取此信息的可能方法，但这不是推荐的方法。为此，您可能应该查看 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()
        });
    }
});

使用 EXTJS 处理 Json 数据

Processing Json data with EXTJS

ajax

json

extjs