title: Populating a grid with json webservice extjs
body: <p>I have a web service that returns a json. The json is this:</p>
  
  <pre><code>aaa(
  {
      "data": 
          {
              "error":0,
              "totalProperty":3,
              "groups":
                  [
                      {
                          "users":
                              [
                                  {
                                      "email":"natalia.busto@geograma.com",
                                      "name":"Natalia",
                                      "surname":"Busto Jimenez",
                                      "rol":"user"
                                  }
                              ],
                          "description":"Grupo por defecto del dominio DEMO",
                          "name":"default",
                                                       "numUsers": 1
                      },
                      {
                          "users":
                              [
                                  {
                                      "email":"gorka.lopez@geograma.com",
                                      "name":"Gorka",
                                      "surname":"López Rivacoba",
                                      "rol":"siteAdministrator"
                                  },
                                  {
                                      "email":"endika.sanchez@geograma.com",
                                      "name":"Endika",
                                      "surname":"Sánchez Gutiérrez",
                                      "rol":"user"
                                  },
                                  {
                                      "email":"ignacio.gamez@geograma.com",
                                      "name":"Ignacio",
                                      "surname":"Gámez Ramírez",
                                      "rol":"administrator"
                                  }
                              ],
                          "description":"Grupo nuevo creado para el dominio DEMO",
                          "name":"Group1",
                                                      "numUsers": 3
                      },
                      {
                          "users":[],
                          "description":"Group2 description",
                          "name":"Group2",
                          "numUsers": 0
                      }
                  ],
              "metadata":
                  {
                      "Request time":"16 ms"
                  }
          },
      "success":true
  }
  </code></pre>
  
  <p>)</p>
  
  <p>I want to create a model and then a store data to put the parameters description, name and numUsers into a grid.</p>
  
  <p>The Ext.data.Model is the next one:</p>
  
  <pre><code>Ext.define('Data', {
          extend: 'Ext.data.Model',
          hasMany: [{ model: 'Group', name: 'groups' }]
      });
  
  Ext.define("Group", {
      extend: 'Ext.data.Model',
      fields: [
          { type: 'string', name: 'description' },
          { type: 'string', name: 'name' },
          { type: 'int', name: 'numUsers' },
      ],
      belongsTo: 'Data'
  });
  </code></pre>
  
  <p>The store data is the next</p>
  
  <pre><code>this.store = Ext.create('Ext.data.Store', {
          model: 'Data',
          proxy: {
              type: 'ajax',
              url : 'http://100.100.100.165:8080/ums_servlet_1_0/services/Ums?request=getGroups&amp;username=endika.sanchez@geograma.com&amp;key=9856a705-0a2c-4f35-bbc9-f12d15ab234u&amp;callback=aaa&amp;extendedInfo=true&amp;filter',
              reader: {
                  type: 'json',
                  root: 'data',
                  idProperty: 'name'
              }
          },
      });
  </code></pre>
  
  <p>And the grid panel is the next one</p>
  
  <pre><code> var itemsPerPage = 8;   // set the number of items you want per page
      this.store.load({
          params:{
              start:0,
              limit: itemsPerPage
          }
      });
  
  
      this.grid = new Ext.grid.Panel( 
              {
                  cls: this.CLASS_NAME + '_grid',
                  autoScroll: true,
                  store: this.store,
                  flex: 1,
                  style: 'border: solid rgb(234,234,236) 1px',
                  columns: [
                            { header: 'Nombre', dataIndex: 'name',flex:1 },
                            { header: 'Descripción', dataIndex: 'description',flex:2},
                            { header: 'Número usuarios', dataIndex: 'numUser',flex:2},
                            { xtype:'actioncolumn',
                                  width:24,
                                  menuDisabled: true,
                                  items: [{
                                      icon: 'img/edit.png', 
                                      iconCls: 'edit_delete',
                                      tooltip: 'Editar',
                                      handler: function(){}
                                  }]
                            },
                            { xtype:'actioncolumn',
                                 width:24,
                                 menuDisabled: true,
                                 items: [{
                                      icon: 'img/delete.png',
                                      iconCls: 'edit_delete',
                                      tooltip: 'Eliminar',
                                      handler: function(){}
                                 }]
                             }
                  ],
                  dockedItems: [{
                      xtype: 'pagingtoolbar',
                      store: this.store,   // same store GridPanel is using
                      dock: 'bottom',
                      displayInfo: true
                  }],
  
      });
  </code></pre>
  
  <p>This paint the grid but dont put the data of the json webservice inside the grid. What is the problem?</p>