ExtJS Ext.data.JsonStore loadData
Solution 1
Thanks for your replies, they were useful in sending me down the right path. I was able to get my original example to work by removing the 'data' field. I'm guessing it was causing conflicts when I tried to call loadData. Solution listed beflow
function example() {
var exampleData = {'exampleJSON' : {'exampleArray':[{'exampleID':1,'name':'Fred','description':'a guy'},{'exampleID':2,'name':'sue','description':'a girl'}]}};
var exampleStore = new Ext.data.JsonStore({
autoLoad: false,
root: "exampleJSON.exampleArray",
fields: [
{mapping: "exampleID", name:"exampleID"},
{mapping: "name", name:"name"},
{mapping: "description", name:"description"}
],
listeners: {
load: function (oStore, ayRecords, oOptions )
{
alert('loaded successfully: ' + ayRecords.length);
}
}
});
exampleStore.loadData(exampleData);
}
Solution 2
Your code is wrong in a number of places:
Ext.define('MyModel', {
extend: 'Ext.data.Model',
fields: ['exampleID', 'name', 'description']
});
function example() {
var exampleData = [{
exampleID: 1,
name: 'Fred',
description: 'a guy'
}, {
exampleID: 2,
name: 'sue',
description: 'a girl'
}];
var exampleStore = new Ext.data.Store({
model: 'MyModel',
data: exampleData
});
}
Also, there's no ext-base file for Ext 4, so it's a redundant include.
abeauchamp
Developer in the following platforms: Android, C#, Java, Unity, PHP
Updated on June 04, 2022Comments
-
abeauchamp almost 2 years
Can you help me solve the issue I'm running into with the loadData function as part of the Ext.data.JsonStore? I've created a basic example of the problem I'm running into:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Ext JSON example</title> <script type="text/javascript" src="lib/ext-base.js"></script> <script type="text/javascript" src="lib/ext-all.js"></script> <script> function example() { var exampleData = "{'exampleJSON' : {'exampleArray':[{'exampleID':1,'name':'Fred','description':'a guy'},{'exampleID':2,'name':'sue','description':'a girl'}]}}"; var exampleStore = new Ext.data.JsonStore({ data: new Ext.data.MemoryProxy(exampleData), autoLoad: false, root: 'exampleJSON.exampleArray', fields: [ {mapping: "exampleID", name: 'exampleID'}, {mapping: "name", name: 'name'}, {mapping: "description", name: 'description'} ], listener: { load: function (oStore, ayRecords, oOptions ) { alert('loaded successfully'); } } }); exampleStore.loadData(exampleData); } </script> </head> <body> <center><button onclick="example();">Click for Example</button></center> </body> </html>
The problem I'm running into is I'm getting this error reported by Firebug: obj.exampleJSON is undefined This is likely being caused when I set the root as 'exampleJSON.exampleArray'. Can someone help point out what I'm doing wrong?
(using ExtJs 4.1.0)
Thanks guys.
EDIT: to set this up, place ext-all.js and ext-base.js in a lib folder.
-
abeauchamp almost 12 yearsThanks for the response. Do I have to define a model? I was trying to avoid defining a model because the actual json structure I'm using is far more complex filled with nested lists and 60+ fields.
-
Evan Trimboli almost 12 yearsYou can specify the fields inline on the store, but under the hood it just creates a model. Even if you do specify the fields on the store, it's not really any shorter to do so.
-
Eydun about 11 yearsYou should add the fields in the model, inside the config.