Processing Json data with EXTJS

Question

Java application sends to the front the following json data:

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

In the front I have an user model like the following:

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

Edit: I updated the code and this way the data is loaded.

Also i made a grid so I can show the results.

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 },
          ]
      }
  ]
});

Now the question that remains is that the grid is showing [object Object] how could i be showing the part that i want from that object, as the name of the role

Scriptable · Accepted Answer · 2015-02-03 19:53:10Z

You need to change the reader type to JSON, This code is working for me:

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

I also removed the mappings as I don't think that you need them.

EDIT

In regards to the data showing in a grid, the 'roles' property in the JSON data is an array, that's why it's showing in the grid as object, I've updated the fiddle to show a possible way to get this information, But it's not the recommended method. You should probably look at associations in ExtJs for this.

Reviewing the guide on the Data Package may also help with this.

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

sakir thanks for that, updated. @LogofaT I've updated the answer
My project uses extj 4.XX and this doesnt seem to work on that version
I have updated the fiddle so that it is compatible with ExtJs 4.1. The main changes are changing rootProperty to root and defining the roles field on the store.

Collectives™ on Stack Overflow

Processing Json data with EXTJS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related