PDA

View Full Version : Grid not showing the data



brsanthu
7 Dec 2012, 1:10 PM
I did see many posts covering the same issue but unfortunately, I couldn't get the data displayed yet. Here is my code and json.

Grid is coming up on the screen but it doesn't display the record.

Any help is appreciated.

Code:


<script>
Ext.Loader.setConfig({enabled: true});
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.toolbar.Paging'
]);


Ext.define('User', {
extend: 'Ext.data.Model',
fields: [ {
"name" : "id",
"type" : "string"
}, {
"name" : "name",
"type" : "string"
}, {
"name" : "email",
"type" : "string"
}, {
"name" : "phone",
"type" : "string"
}, {
"name" : "status",
"type" : "string"
} ],
idProperty: 'id'
});


Ext.onReady(function(){


Ext.QuickTips.init();


// configure whether filter query is encoded or not (initially)
var encode = false;

var userStore = Ext.create('Ext.data.JsonStore', {
// store configs
autoDestroy: true,

model: 'User',

proxy: {
type: 'ajax',
url: 'Data?id=a09K0000002eB1K',
reader: {
type: 'json',
root: 'data',
idProperty: 'id',
totalProperty: 'total'
}
},

remoteSort: false,

sorters: [{
property: 'name',
direction: 'ASC'
}],

pageSize: 100
});


var selModel = Ext.create('Ext.selection.CheckboxModel', {
checkOnly: false // select from anywhere on row
});

var grid = Ext.create('Ext.grid.Panel', {
border: true,


store: userStore,


columns: [ {
"header" : "Id",
"dataIndex" : "id",
"sortable" : true,
"hideable" : true,
"draggable" : true,
"groupable" : true
}, {
"header" : "Name",
"dataIndex" : "name",
"sortable" : true,
"hideable" : true,
"draggable" : true,
"groupable" : true
}, {
"header" : "Email",
"dataIndex" : "email",
"sortable" : true,
"hideable" : true,
"draggable" : true,
"groupable" : true
}, {
"header" : "Phone",
"dataIndex" : "phone",
"sortable" : true,
"hideable" : true,
"draggable" : true,
"groupable" : true
}, {
"header" : "Status",
"dataIndex" : "status",
"sortable" : true,
"hideable" : true,
"draggable" : true,
"groupable" : true
} ],


loadMask: true,


multiSelect: true,


dockedItems: [Ext.create('Ext.toolbar.Paging', {
dock: 'bottom',
store: userStore
})],

selModel: selModel,
emptyText: 'There are no Users!',
height: 600,
title: 'Users',
renderTo: 'report-grid',
viewConfig: {
stripeRows: true,
enableTextSelection: true
}
});

userStore.load();
});
</script>
<div id="report-grid"></div>
</body></html>


Data:



{ "total" : "1", "data:" : [ { "phone" : "(415) 222-3333", "status" : "Registered", "id" : "a0BK000000GLuD0MAL", "email" : "john.smith@yopmail.com", "name" : "john smith" }] }

mitchellsimoens
9 Dec 2012, 8:15 AM
Have you checked the store to see if it has the data in it (haven't run your code)