PDA

View Full Version : Grid will not render data



mstudebaker
7 Dec 2009, 9:27 PM
Hello all -

I'm new to ExtJS and am trying to render a grid using data from a server. I think I have the DS setup correctly and I can see the JSON in FF but the only thing that gets rendered are the column headers.

Below is the code and the JSON I get back from the server. Any help would be greatly appreciated.

- Mark



// defining the data store
var contactStore = new Ext.data.DirectStore({
autoLoad: true,
idProperty: 'ContactKey',
root: 'Rows',
api: {
load: Contact.GetAll
},
fields: [
{ name: 'ContactKey', mapping: 'ContactKey', type: 'int' },
{ name: 'FirstName', mapping: 'FirstName', type: 'string' },
{ name: 'LastName', mapping: 'LastName', type: 'string' },
{ name: 'PhoneNumber', mapping: 'PhoneNumber', type: 'string' },
{ name: 'Carrier', mapping: 'Carrier', type: 'string' },
{ name: 'Email', mapping: 'Email', type: 'string' },
{ name: 'Created', mapping: 'Created', type: 'date', dateFormat: 'n/j h:ia' },
{ name: 'Updated', mapping: 'Updated', type: 'date', dateFormat: 'n/j h:ia' }
]
});

// create the Grid
var grid = new Ext.grid.GridPanel({
store: contactStore,
colModel: new Ext.grid.ColumnModel({
defaults: {
width: 75,
sortable: true
},
columns: [
{ id: 'ContactKey', header: 'ContactKey', dataIndex: 'ContactKey' },
{ header: 'FirstName', dataIndex: 'FirstName' },
{ header: 'LastName', dataIndex: 'LastName' },
{ header: 'PhoneNumber', dataIndex: 'PhoneNumber' },
{ header: 'Carrier', dataIndex: 'Carrier' },
{ header: 'Email', dataIndex: 'Email' },
{ header: 'Created', width: 85, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'Created' },
{ header: 'Updated', width: 85, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'Updated' }
]
}),
stripeRows: true,
height: 350,
width: 700,
title: 'Grid'
});

// render the grid to the specified div in the page
grid.render('grid-example');


------ JSON Data -------------


"{"Rows":[{"ContactKey":2,"AccountKey":1,"FirstName":"Mark","LastName":"Studebaker","PhoneNumber":"586 269 0393","Carrier":"Sprint","Email":"mark@itsusnow.com","Created":null,"Updated":null},{"ContactKey":5,"AccountKey":1,"FirstName":"Mark","LastName":"Studebaker","PhoneNumber":"586 269 0393","Carrier":"Sp","Email":"mark@usn.com","Created":null,"Updated":null},{"ContactKey":6,"AccountKey":null,"FirstName":"kjhkjh","LastName":"kjh","PhoneNumber":"kjh","Carrier":"kh","Email":"kj","Created":"\/Date(1259040064057-0500)\/","Updated":"\/Date(1259040064057-0500)\/"},{"ContactKey":7,"AccountKey":null,"FirstName":"kjhkjh","LastName":"kjh","PhoneNumber":"kjh","Carrier":"kh","Email":"kj","Created":"\/Date(1259040067160-0500)\/","Updated":"\/Date(1259040067160-0500)\/"},{"ContactKey":8,"AccountKey":null,"FirstName":"kjhkjh","LastName":"kjh","PhoneNumber":"kjh","Carrier":"kh","Email":"kj","Created":"\/Date(1259040125067-0500)\/","Updated":"\/Date(1259040125067-0500)\/"},{"ContactKey":9,"AccountKey":null,"FirstName":"kjhkjh","LastName":"kjh","PhoneNumber":"kjh","Carrier":"kh","Email":"kj","Created":"\/Date(1259040396270-0500)\/","Updated":"\/Date(1259040396270-0500)\/"},{"ContactKey":10,"AccountKey":null,"FirstName":"kjhkjh","LastName":"kjh","PhoneNumber":"kjh","Carrier":"kh","Email":"kj","Created":"\/Date(1259040404550-0500)\/","Updated":"\/Date(1259040404550-0500)\/"},{"ContactKey":11,"AccountKey":null,"FirstName":"kjhk","LastName":"jhkjh","PhoneNumber":"kjhk","Carrier":"jhkj","Email":"hk","Created":"\/Date(1259441404920-0500)\/","Updated":"\/Date(1259441404920-0500)\/"},{"ContactKey":12,"AccountKey":null,"FirstName":"989879898","LastName":"987987","PhoneNumber":"987","Carrier":"987","Email":"987","Created":"\/Date(1259441504930-0500)\/","Updated":"\/Date(1259441504930-0500)\/"},{"ContactKey":13,"AccountKey":null,"FirstName":"","LastName":"","PhoneNumber":"","Carrier":"","Email":"","Created":"\/Date(1259990468090-0500)\/","Updated":"\/Date(1259990468090-0500)\/"},{"ContactKey":14,"AccountKey":null,"FirstName":"ljlkj","LastName":"ljljlkj","PhoneNumber":"ljllj","Carrier":"lkjlkjlk","Email":"ljl","Created":"\/Date(1259990478570-0500)\/","Updated":"\/Date(1259990478570-0500)\/"},{"ContactKey":15,"AccountKey":null,"FirstName":"ljlkj","LastName":"ljljlkj","PhoneNumber":"ljllj","Carrier":"lkjlkjlk","Email":"ljl","Created":"\/Date(1259990622573-0500)\/","Updated":"\/Date(1259990622573-0500)\/"}]}"

jay@moduscreate.com
14 Dec 2009, 8:10 AM
is your JSON really surrounded by double quotes?

"{"Rows...}" ?

elishnevsky
14 Dec 2009, 8:12 AM
Add paramsAsHash:false to the DirectStore.

mstudebaker
14 Dec 2009, 8:41 AM
I did a couple of things...

I upgraded to EXTJS 3.0.3, changed to the .Net router ver 0.6 but I think the real issue was that the JSON results were not formatted properly.

my "Rows" should have been "result":{"rows":[{.....

Switching to the new router and serializing JObjects did the trick. :)