CODEWITHSUNDEEP
arraysjsonmodelextjs4gridpanel
N3vik
N3vik

Reputation: 11

EXTJS 4 nested json array data to grid panel

I'm new to ExtJS but I am unable find anyway to populate my grid with a simple JSON array of strings. My JSON looks like this:

{
 ...stuff...
 "users": ["kevin","ryan", "david", "mark", "ed"]
 ...more stuff...
}

I want to populate a simple one column grid with this list of users, but can't seem to find any way to do it! :(

My code looks like this:

  Ext.define('usersModel', {
      extend: 'Ext.data.Model',
      fields: [{ name: 'users', type: 'auto'}]
  });

  var usersStore = Ext.create('Ext.data.Store', {
      model: 'usersModel',
      proxy: {
          type: 'ajax',
          url : '/users',
          reader: 'json'
      },
      autoLoad: true
  });

  // create the Grid
  Ext.create('Ext.grid.Panel', {
      store: usersStore,
      columns: [{
          dataIndex: 'users',
          width: 500,
          text: 'User'
      },
      ],
  });

But it just displays a comma separated list of the users in one cell. I can see why it would do that, I'm setting the dataIndex of the column to be the array, not the elements in the array, but have no idea how to fix it.

Upvotes: 1

Views: 1662

Answers (1)

Ye Liu
Ye Liu

Reputation: 8976

Try this: 

  Ext.define('usersModel', {
      extend: 'Ext.data.Model',
      fields: [{ name: 'name', type: 'auto'}]
  });

  var usersStore = Ext.create('Ext.data.Store', {
      model: 'usersModel',
      proxy: {
          type: 'ajax',
          url : '/users',
          reader: {
              type: 'json',
              rootProperty: 'users'
          }
      },
      autoLoad: true
  });

  // create the Grid
  Ext.create('Ext.grid.Panel', {
      store: usersStore,
      columns: [{
          dataIndex: 'name',
          width: 500,
          text: 'User'
      },
      ],
  });

Upvotes: 1

Related Questions