Note that there are some explanatory texts on larger screens.

plurals
  1. POGRID is not properly rendered in ExtJS 4 by using Store
    primarykey
    data
    text
    <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>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload