PDA

View Full Version : Need help with JSON store and loading into grid



hflipman
4 Jun 2012, 8:18 AM
Hi,

I have a simple MVC application that has a grid to display data, and uses data store to load the data from the server.

If I hard code the data in the app it all works fine. But if I get the data though the store, the grid remains empty. So the problem is either with my store definition or with the JSON data provided. Or maybe it is my mode definition?

When looking at network traffic I do see that the store is loading the data file. Btu internally the load get marked as unsuccessful. I just do not know why ;-).

Can anyone take a look and point out my (probably dumb) mistake?

Here is the standalone app:



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ExtJS4 MVC with JSON Store</title>
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/extjs/4.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="http://extjs.cachefly.net/extjs/4.0.0/ext-all-debug.js"></script>
<script>
// testapp/model/Widget.js
Ext.define('TestApp.model.Widget', {
extend : 'Ext.data.Model',
fields : [
{ name : 'id', type : 'int' },
{ name : 'name', type : 'string' },
{ name : 'email', type : 'string' }
]
});


// testapp/store/Widget.js
Ext.define('TestApp.store.Widget', {
extend : 'Ext.data.Store',
requires : [
'TestApp.model.Widget'
],


storeId : 'Widget',
autoLoad : true,
model : 'TestApp.model.Widget',
proxy : {
type : 'ajax',
url : 'data.json',
reader : {
type : 'json',
root : 'widgets',
totalProperty : 'total'
}
}
});

// testapp/view/widget/Grid.js
Ext.define('TestApp.view.widget.Grid', {
extend : 'Ext.grid.Panel',
alias : 'widget.widgetgrid',
requires : [
'TestApp.store.Widget'
],
constructor : function() {
Ext.apply(this, {
store : Ext.create('TestApp.store.Widget'),
// store : {
// fields: ['id', 'name', 'email'],
// data: [
// { 'id': '1', "name": 'Lisa', "email": "lisa@simpsons.com" },
// { 'id': '2', "name": 'Bart', "email": "bart@simpsons.com" },
// { 'id': '3', "name": 'Homer', "email": "home@simpsons.com" },
// { 'id': '4', "name": 'Marge', "email": "marge@simpsons.com" }
// ]
// },
columns : [
{
header : 'ID',
dataIndex : 'id'
},
{
header : 'Name',
dataIndex : 'name'
},
{
header : 'Email',
dataIndex : 'email'
}
]
});
this.callParent(arguments);
}
});

// testapp/controller/Widget.js
Ext.define('TestApp.controller.Widgets', {
extend: 'Ext.app.Controller',
views: ['widget.Grid']
});


// testapp/view/Viewport.js
Ext.define('TestApp.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: 'border',
requires: [
'TestApp.view.widget.Grid',
],
initComponent: function () {
Ext.apply(this, {
items: [{
xtype: 'widgetgrid',
title: 'Widgets',
region: 'center',
margins: '5 5 5 5'
}]
});
this.callParent(arguments);
}
});


// testapp.js
Ext.application({
name : 'TestApp',
appFolder : './testapp',
controllers: [
'Widgets'
],
autoCreateViewport: true
});
</script>
</head>
<body>
</body>
</html>




And here is data.json:


{
"total" : "4",
"widgets" : [
{
"id" : "1",
"name" : "Lisa",
"email" : "lisa@simpsons.com"
},
{
"id" : "2",
"name" : "Bart",
"email" : "bart@simpsons.com"
},
{
"id" : "3",
"name" : "Homer",
"email" : "homer@simpsons.com"
},
{
"id" : "4",
"name" : "Marge",
"email" : "marge@simpsons.com"
}
]
}



Any help would be greatly appreciated!

Thanks.

Henk

scottmartin
4 Jun 2012, 8:35 AM
You are creating a new instance of the store in your grid, simply reference the store you defined

Scott.

hflipman
4 Jun 2012, 8:43 AM
Thanks, Scott.

Sorry to be dense, but instead of:



store : Ext.create('TestApp.store.Widget'),


I would write what?

Thanks.

Henk

scottmartin
4 Jun 2012, 9:09 AM
From your store define:



Ext.define('TestApp.store.Widget', { .. })


Just reference the existing instance in your grid:



store: 'Widget'



Scott.

hflipman
4 Jun 2012, 9:24 AM
Thanks, Scott.

That leads to the following JS error on Safari (and a similar one on FF):



TypeError: 'undefined' is not an object (evaluating 'item.on') ext-all-debug.js:13249


This is in 'addManagedListener()'. Any clues?

Thanks.

Henk

hflipman
4 Jun 2012, 11:36 AM
I was able to resolve the JS error by going to ExtJS 4.1.0 and by putting in:



store : Ext.data.StoreManager.lookup('Widget'),


but the data still doesn't show. In fact I no longer see the data.json file being fetched from the server even though autoLoad is set to true for this store.

scottmartin
4 Jun 2012, 11:51 AM
You will need to create a proxy in your model with a reader




Ext.define('APP.model.User', {
extend : 'Ext.data.Model',
idProperty : 'id_user',
fields : [ .. ],
proxy : {
type : 'ajax',
// actionMethods : 'POST',
api : {
//read : 'data/users.json',
read : 'list_users',
create : 'create_user',
update : 'update_user',
destroy : 'delete_user'
},
reader : {
type : 'json',
totalProperty : 'total',
successProperty : 'success',
messageProperty : 'message',
root : 'data'
}
}
});


Regards,
Scott.

scottmartin
4 Jun 2012, 12:14 PM
Please have a look at the following changes to your project. As mentioned, it is recommend to place the proxy on your model as shown above, but was not included in the changes.

See attached:

hflipman
5 Jun 2012, 6:22 AM
Thanks for all your help, Scott!