title: Extjs loading local JSON Object in to grid
body: <p>I am new to Ext JS and trying various options on Grid. I have created a grid and added it to panel(Ext.panel.Panel). The grid is getting displayed with empty data(I have not added proxy to it). On occurrence of some event I construct a JSON Object and trigger <code>loadData</code> on grid.</p>
  
  <p>Following is my code snippet.</p>
  
  <pre class="lang-js prettyprint-override"><code>Ext.define('AM.view.grid.Details', {
      extend: 'Ext.grid.Panel',
      alias: 'widget.details',
      title: 'Widget Data',
  
      store: {
          autolaod: true,
          fields: [{
              name: 'widgetid',
              mapping: 'widget_id',
              type: 'string'
          }, {
              name: 'widgetname',
              mapping: 'widget_name',
              type: 'string'
          }, {
              name: 'widgetnotes',
              mapping: 'widget_notes',
              type: 'String'
          }],
          reader: {
              type: 'json'
          }
      },
      width: 620,
      height: 400,
  
      forceFit: true,
      columns: [{
          header: 'id',
          dataIndex: 'widgetid',
          hidden: true
      }, {
          header: 'Name',
          dataIndex: 'widgetname',
          width: 150
      }, {
          header: 'Note',
          dataIndex: 'widgetnotes',
          width: 150
      }],
  
      renderTo: Ext.getBody()
  });
  </code></pre>
  
  <p>I have a function which is a callback function of another widget. When an event occurs this function getTriggered.</p>
  
  <pre class="lang-js prettyprint-override"><code>function someFunction(grid) {
      var jsonData = formGridData();
      grid.store.loadData(jsonData);
  }
  </code></pre>
  
  <p>Please assume that grid is created and I have function formGridData() which converts the formed String to JSON Object and returns.</p>
  
  <p>So when I run the app, If the jsonData is of length 5 then 5 empty rows appear in the grid.</p>
  
  <p>Following is the JSONData</p>
  
  <pre class="lang-js prettyprint-override"><code>[{
      'widget_id':    'widget-1',
      'widget_name':  'gridpanel',
      'widget_notes': 'This is used to handle..'
  }, {
      'widget_id':    'widget-2',
      'widget_name':  'combo',
      'widget_note':  'This is used to handle..'
  }, {
      'widget_id':    'widget-3',
      'widget_name':  'panel',
      'widget_note':  'This is used to handle..'
  }]
  </code></pre>
  
  <p>Is there anything wrong in what I am doing? </p>
  
  <p>Thanks,<br>
  Phani</p>