PDA

View Full Version : Record is undefined (grid with json)



jeanvincent
26 Feb 2009, 2:28 AM
Hi,

I'm working on a very simple example. However, I'm getting an error that I don't understand. The json returned from my web server seems correct to me (and according to jslint.com):


{"results":[{"name":"John Doe","occupation":"cop"},{"name":"Jane Doe","occupation":"singer"}],"totalcount":2}

The js code:



var myRecord = Ext.data.Record.create([{name: 'name'}, {name: 'occupation'}]);
var myReader = new Ext.data.JsonReader({
root: 'results',
totalProperty:'totalcount'
}, myRecord);
var myJsonStore = new Ext.data.JsonStore({
url: 'http://localhost/app/web/frontend_dev.php/module/action/sf_format/json',
reader: myReader
});
myJsonStore.on({
'load':{
fn: function(store, records, options){
console.info('store load, arguments:', arguments);
console.info('Store count = ', store.getCount());
}, scope:this
},
'loadexception':{
fn: function(obj, options, response, e){
console.info('store loadexception, arguments:', arguments);
console.info('error = ', e);
console.info('response = ', response);
}, scope:this
}
});
var myGrid = new Ext.grid.GridPanel({
store: myJsonStore,
columns: [
{header: "Name", dataIndex: 'name'},
{header: "Occupation", dataIndex: 'occupation'}
]
});
myGrid.render(document.body);
myStoreJson.load();


I added the load and loadexception listeners as advised in the grid faq, and used firebug which takes me to ext-all-debug.js:11532


11531 var s = this.meta, Record = this.recordType,
11532 f = Record.prototype.fields, fi = f.items, fl = f.length;

But to be honest, I don't know what to do with that.
Does anybody have any idea what I'm doing wrong? The example is so simple, yet I can't find my error.

Thanks!

26 Feb 2009, 4:27 AM
when using the jsonStore, why create reader? the jsonStore does that for you. just pass in a 'fields array'

myStoreJson is undefined btw

26 Feb 2009, 4:33 AM
Use data.Store instead of JsonStore



data = {"results":[{"name":"John Doe","occupation":"cop"},{"name":"Jane Doe","occupation":"singer"}],"totalcount":2}


myRecord = Ext.data.Record.create([{name: 'name'}, {name: 'occupation'}]);
myReader = new Ext.data.JsonReader({
root: 'results',
totalProperty:'totalcount'
}, myRecord);
myJsonStore = new Ext.data.Store({
root : 'results',

reader: myReader
});
myJsonStore.on({
'load':{
fn: function(store, records, options){
console.info('store load, arguments:', arguments);
console.info('Store count = ', store.getCount());
}, scope:this
},
'loadexception':{
fn: function(obj, options, response, e){
console.info('store loadexception, arguments:', arguments);
console.info('error = ', e);
console.info('response = ', response);
}, scope:this
}
});
myGrid = new Ext.grid.GridPanel({
store: myJsonStore,
columns: [
{header: "Name", dataIndex: 'name'},
{header: "Occupation", dataIndex: 'occupation'}
]
});
new Ext.Window({
height : 500,
width : 500,
layout : 'fit',
items : myGrid

}).show();
myJsonStore.loadData(data);

jeanvincent
26 Feb 2009, 12:40 PM
Hi Jay,

Thank you for your help. I used the fields config option instead of the reader, and also found out that I had to set the width and height for the grid. Now it works.

I'm not really sure why.

I'll try looking into using a DataStore, why did you recommend it instead of the JsonStore?

Thanks again!

26 Feb 2009, 12:58 PM
JsonStore is a convenience method that helps you easily configure an instance of data.Store with just a few configuration options. It does not allow you to override the reader.


Now if your grid lives outside of any Ext Component, you must specify at least a height. the width will be 100% always to start per the DOM box model.

mjlecomte
26 Feb 2009, 3:55 PM
It does not allow you to override the reader.
It does allow you to configure the reader. JsonStore accepts the configs for JsonReader and passes them along to the implicitly constructed JsonReader.

I don't know what you mean by override though.

27 Feb 2009, 3:50 AM
It does allow you to configure the reader. JsonStore accepts the configs for JsonReader and passes them along to the implicitly constructed JsonReader.

I don't know what you mean by override though.

nein! :) Please see the code for JsonStore below



As I said before, it's just a convenience class. Look at the documentation, you don't even see a 'reader' option :)
taken from Ext 2/source/data/JsonStore.js (*see line 46*)


1 /**
2 * @class Ext.data.JsonStore
3 * @extends Ext.data.Store
4 * Small helper class to make creating Stores for remotely-loaded JSON data easier. JsonStore is pre-configured
5 * with a built-in {@link Ext.data.HttpProxy} and {@link Ext.data.JsonReader}. If you require some other proxy/reader
6 * combination then you'll have to create a basic {@link Ext.data.Store} configured as needed.<br/>
7 <pre><code>
8 var store = new Ext.data.JsonStore({
9 url: 'get-images.php',
10 root: 'images',
11 fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date'}]
12 });
13 </code></pre>
14 * This would consume a returned object of the form:
15 <pre><code>
16 {
17 images: [
18 {name: 'Image one', url:'/GetImage.php?id=1', size:46.5, lastmod: new Date(2007, 10, 29)},
19 {name: 'Image Two', url:'/GetImage.php?id=2', size:43.2, lastmod: new Date(2007, 10, 30)}
20 ]
21 }
22 </code></pre>
23 * An object literal of this form could also be used as the {@link #data} config option.
24 * <b>Note: Although they are not listed, this class inherits all of the config options of Store,
25 * JsonReader.</b>
26 * @cfg {String} url The URL from which to load data through an HttpProxy. Either this
27 * option, or the {@link #data} option must be specified.
28 * @cfg {Object} data A data object readable by this object's JsonReader. Either this
29 * option, or the {@link #url} option must be specified.
30 * @cfg {Array} fields Either an Array of field definition objects as passed to
31 * {@link Ext.data.Record#create}, or a {@link Ext.data.Record Record} constructor created using {@link Ext.data.Record#create}.<br>
32 * <p>This config is used to create the <tt>recordType</tt> parameter to the {@link Ext.data.JsonReader#JsonReader JsonReader}
33 * constructor that is implicitly called, and creates the {@link Ext.data.Record Record definition} used by the Store.
34 * @constructor
35 * @param {Object} config
36 */
37 Ext.data.JsonStore = function(c){
38 /**
39 * @cfg {Ext.data.DataReader} reader @hide
40 */
41 /**
42 * @cfg {Ext.data.DataProxy} proxy @hide
43 */
44 Ext.data.JsonStore.superclass.constructor.call(this, Ext.apply(c, {
45 proxy: c.proxy || (!c.data ? new Ext.data.HttpProxy({url: c.url}) : undefined),
46 reader: new Ext.data.JsonReader(c, c.fields)
47 }));
48 };
49 Ext.extend(Ext.data.JsonStore, Ext.data.Store);

27 Feb 2009, 3:52 AM
What i mean by override, as in you can explicitly specify a reader.

Configuring a reader is different than specifying/overriding the reader.

Going back to the first post:


var myRecord = Ext.data.Record.create([{name: 'name'}, {name: 'occupation'}]);
var myReader = new Ext.data.JsonReader({
root: 'results',
totalProperty:'totalcount'
}, myRecord);
var myJsonStore = new Ext.data.JsonStore({
url: 'http://localhost/app/web/frontend_dev.php/module/action/sf_format/json',
reader: myReader //invalid
});

27 Feb 2009, 3:53 AM
To clear things up, what i mean by override:



new Ext.Panel({


initComponent : function() {
overrides can happen here too

}
})

mjlecomte
27 Feb 2009, 4:47 AM
Let me rephrase for clarity. And to do that I'll just point to the API Docs:
http://extjs.com/deploy/dev/docs/?class=Ext.data.JsonStore

In the example code provided "root" is a config property of JsonReader. So you can pass along all of the JsonReader configs in the JsonStore configuration. You would not explicitly create a JsonReader.

27 Feb 2009, 5:10 AM
I think we're on the same page :)

dzegarra
24 Nov 2010, 12:35 PM
when using the jsonStore, why create reader? the jsonStore does that for you. just pass in a 'fields array'

myStoreJson is undefined btw

I debug my script many times to see the behavior of JsonStore when the server response in json and get to the same line (when aparenly JsonReader intent to read the data but doesn't found the recordType variable).

Tried not use the JsonReader (only moving de config params of JsonReader to JsonStore) and work. The result when use JsonReader o not is exactly the same, so... I don't know why don't work before (event defined the record in the constructor of JsonReader) but this way is more simple and doen's give me problems.

Thanks.