title: GRID is not properly rendered in ExtJS 4 by using Store
body: <p>Here is the Src code for HTML file</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4 /strict.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;MVC Architecture&lt;/title&gt;
  &lt;link rel="stylesheet" type="text/css" href="/bh/extjs/resources/css/ext-all.css" /&gt;
  &lt;script type="text/javascript" src="extjs/ext-debug.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="Main.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>File path: /bh/Main.js [Main File]</p>
  
  <pre><code>Ext.require('Ext.container.Viewport');
  Ext.application({
  name: 'App',
  appFolder: 'app',
  controllers: ['UserController'],
  
  launch: function() {
  
  Ext.create('Ext.container.Viewport', {
  layout: 'border',
  items: [
          {
              xtype: 'userList'
          }
         ]
    });
   }
  });
  </code></pre>
  
  <p>File path: /app/controller/UserController.js [Controller]</p>
  
  <pre><code>Ext.define('App.controller.UserController',{
   extend: 'Ext.app.Controller',
   stores: ['UserStore'],
   models:['UserModel'],
   views:['user.UserList'],
   init: function() {
    this.getUserStoreStore().load();
    }
  });
  </code></pre>
  
  <p>File path: /app/store/UserStore.js</p>
  
  <pre><code> Ext.define('App.store.UserStore', {
    extend: 'Ext.data.Store',
    model: 'App.model.UserModel',
  
    proxy: {
     type: 'ajax',
     url: 'app/data/contact.json'
    }
  });
  </code></pre>
  
  <p>File path: /app/model/UserModel.js [Model]</p>
  
  <pre><code>Ext.define('App.model.UserModel',{
  extends:'Ext.data.Model',
  fields:[
      {name: 'name', type: 'string'},
      {name: 'age', type: 'string'},
      {name: 'phone', type: 'string'},
      {name: 'email', type: 'string'}
  ]
  });
  </code></pre>
  
  <p>File path: /app/view/UserList.js [View]</p>
  
  <pre><code>Ext.define('App.view.user.UserList' ,{
  extend: 'Ext.grid.Panel',
  alias:'widget.userList',
  title:'Contacts',
  region:'center',
  resizable:true,
  initComponent: function() {
  this.store = 'UserStore';
  this.columns = [
            {text: 'Name',flex:1,sortable: true,dataIndex: 'name'},
            {text: 'Age',flex:1,sortable: true,dataIndex: 'age'},
            {text: 'Phone',flex:1,sortable: true,dataIndex: 'phone'},
            {text: 'Email',flex:1,sortable: true,dataIndex: 'email'}
          ];
  
  this.callParent(arguments);
  }
  </code></pre>
  
  <p>});</p>
  
  <p>In fire bug it shows the JSON response as follows:</p>
  
  <pre><code>[{
    "name": "Aswini",
     "age": "32",
     "phone": "555-555-5555",
     "email": "aswininayak@.in"
   }]
  </code></pre>
  
  <p>Why the Data has not been displayed although I have a valid json response. Please help!!!</p>
  
  <p><img src="https://i.stack.imgur.com/OKlvF.png" alt="enter image description here"></p>