I am trying to use Ext JS 4 and was playing with one of the grid examples and wanted to use JSON rather than XML. No mater how I code the JSON data, I get no records to load.
Here is my code:
Ext.define('Plant', {
extend: 'Ext.data.Model',
fields: [{
name: 'common',
type: 'string'
}, {
name: 'botanical',
type: 'string'
}, {
name: 'light'
}, ]
});
// Create the Data Store.
var store = Ext.create('Ext.data.Store', {
// Destroy the store if the grid is destroyed.
autoDestroy: true,
model: 'Plant',
proxy: {
type: 'ajax',
url: 'plants.json',
reader: {
type: 'json',
root: 'records'
}
},
sorters: [{
property: 'common',
direction: 'ASC'
}]
});
Here is my data:
{
"records": [
{
"common": "Bloodroot",
"botanical": "Sanguinaria canadensis",
"light": "Mostly Shady"
}, {
"common": "test",
"botanical": "I do not know",
"light": "Mostly Shady"
}
]
}
The XML reader works great, but we want to use JSON.
Thanks in advance
Have a look at this thread! You need to check your url path to plants.json, path starts from 'index.html' or some other similar starting point , and not the .js file where store is located. I tested your code and it works fine, also use autoLoad:true in your Ext.data.Store, i dont see your grid code so.. Cheers!
Related
I have a JSON response that is nested like the following (simplified, but same format):
{
"response":{
"v":"1.0",
"users":[
{
"firstName":"Nicole",
"LastName":"A",
},
{
"firstName":"John",
"LastName":"B",
},
{
"firstName":"Bob",
"LastName":"C",
}
],
}
}
Here is the model:
Ext.define('MyApp.model.User', {
extend: 'Ext.data.Model',
requires: [
'Ext.data.Field'
],
config: {
fields: [
{
name: 'firstName'
},
{
name: 'lastName'
}
]
}
});
I am starting from the sencha architect tutorial for CityBars, so most of the code should be quite basic, and I am just trying to get the users from the json response loaded. Here is the controller:
Ext.define('MyApp.controller.User', {
extend: 'Ext.app.Controller',
launch: function() {
var me = this;
Ext.Viewport.setMasked({ message: 'Loading Attendees...' });
me.getUsers(function (store) {
me.getDataList().setStore(store);
});
},
getUsers: function(callback) {
var store = Ext.data.StoreManager.lookup('UserStore'),
url = 'http://urltogetjsonresponse'
store.getProxy().setUrl(url);
store.load(function() {
callback(store);
});
},
});
Here is the store:
Ext.define('MyApp.store.UserStore', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.User',
'Ext.data.proxy.JsonP',
'Ext.data.reader.Json'
],
config: {
model: 'MyApp.model.User',
storeId: 'UserStore',
proxy: {
type: 'jsonp',
reader: {
type: 'json',
rootProperty: 'response.user'
}
}
}
});
I tried 'response.user' but it did not work for me. I have already looked all over and know that using rootProperty: 'user' would work, if the users attribute were at the same level as "response" instead of nested under it. I have also tried adding record: 'users' but that did not seem to work either.
If anybody knows if this is doable and has an easy solution to this, that would be great. I don't actually understand how the proxy works, so if anybody can explain a bit about that, it would be helpful too. Thanks.
Taken from Sencha's documentation about the JSON reader :
{
"count": 1,
"ok": true,
"msg": "Users found",
"users": [{
"userId": 123,
"name": "Ed Spencer",
"email": "ed#sencha.com"
}],
"metaData": {
"idProperty": 'userId',
"rootProperty": "users",
"totalProperty": 'count',
"successProperty": 'ok',
"messageProperty": 'msg'
}
}
The rootProperty here is 'users', so you'll need to specify users (which is the name of the array containing your instances of model) and not user .
My problem is the json I am getting doesn't have a root. I can get the store to load the URL and I get the JSON back but the store data is empty and nothing shows in the callback.
Json:
[
{
"symbol": "GM"
},
{
"symbol": "GA"
}
]
Model and Store:
Ext.define('Symbol', {
extend: 'Ext.data.Model',
fields: ['symbol']
});
Ext.define('Doc.store.symbol', {
extend: 'Ext.data.Store',
model: 'Symbol',
proxy: {
type: 'jsonp',
url: 'datasource/symbol',
reader: {
type: 'json',
model: 'symbol'
},
}
});
I tried removing the root as well but nothing came back in the store or the callback. My googlefu is turning up nothing good on json without root.
the root should be defined as blank root:''
Here is a code demonstrating the proper setup:
Ext.define('boomer', {
extend:'Ext.data.Model',
fields: ['symbol'],
proxy: {
type: "ajax",
url: "data.json",
extraParams: {
},
reader: {
type: "json",
root: "",
successProperty: "success"
}
}
});
var store = Ext.create('Ext.data.Store',{
model: 'boomer',
});
store.load({
callback:function(){
Ext.Msg.alert('Store Items', store.data.items.length);
console.log(store.data.items);
}
});
Here is a fiddle demonstrating working code.
extend Ext.data.reader.Json to adjust your response.Later use it inside proxy reader.
there is a answer here
I tried to implement a grid panel using data from a JSON file which is located on the same domain as the Javascript file containing the ExtJs code. I'm using ExtJs 3.4.
The grid shows up but without any data in it. Firebug shows an error message that tells me that there is an error in the first line of the JSON file ("not well formed"). I have validated the JSON file and everything is ok.
Here is my code:
Ext.onReady(function () {
var myStore = new Ext.data.JsonStore({
url: 'data.json',
root: 'rows',
autoLoad: true,
fields: [{
name: 'person',
type: 'string'
}, {
name: 'product',
type: 'string'
}]
});
var grid = new Ext.grid.GridPanel({
id: 'gridPanel',
title: 'Grid example',
width: 250,
height: 250,
renderTo: 'grid-example',
store: myStore,
columns: [{
header: 'Person',
dataIndex: 'person'
}, {
header: 'Product',
dataIndex: 'product'
}]
});
});
My JSON data is:
{
"rows": [{
"person": "Jamie Avins",
"product": "Ladder"
}, {
"person": "Ed Spencer",
"product": "Spanner"
}]
}
Do you have any ideas what's wrong? Can somebody give me some hints?
Thanks in advance!
Seha
Use:
reader: {
type: 'json',
root: 'rows'
}
in your JsonStore and validate your json response.
Hope it will work for you.
I tested your code and the exact JSON string cut and pasted from your example. It worked just fine using Grails to return the string (not reading from a file). Firebug did not complain. Looks like the file itself could be the issue, maybe a hidden character is creeping in.
I'm trying to achieve a simple JSON operation:
I want to write on my page a text coming from a file in JSON format.
The file is like this: (data.json)
{
"id": "0",
"name":"myname"
}
The script is getting the JSON:(main.js)
Ext.setup({
onReady: function() {
Ext.regModel('Person', {
fields: [
{name: 'id', type: 'string'},
{name: 'name', type: 'string'}
]
});
//I want the name to be written on the page
var itemTemplate = new Ext.XTemplate(
'<tpl for=".">',
'{name}',
'</tpl>');
// I get and decode the Json from data.json
var jsonStore = new Ext.data.Store({
model: "Person",
proxy: {
type: 'ajax',
url: 'data.json',
reader: {
type: 'json'
}
},
autoLoad: true
});
// The panel should get the stored Result and display it
var jsonPanel = new Ext.Panel ({
title: "json",
fullscreen: true,
items: [
{
xtype: 'list',
store: jsonStore,
itemTpl:itemTemplate,
}
]
});
}
});
The index.html file calls all the files above and sencha-touch.js and .css.
I just don't manage to see anything written on the page.
If someone can give me a clue about what i am doing wrong it would help a lot.
Try to put your JSON objects in array notation, like this:
[{
"id": "0",
"name":"myname"
}, {
"id": "1",
"name":"myname2"
}]
As far as I can remember (at least that was the case in ST1, I did not try with ST2), the Ajax reader cannot be used to access local files. You need to have your json data delivered through a web server
I am working on ExtJS 4.0 and I want to display nested JSON data in a grid. For this I use the example given in Ext.data.reader.Reader docs, "Loading Nested Data". It is good and simple but now I want to display this data in a grid. How do I set dataIndex?
This is my sample model and store:
Ext.define("data", {
extend: 'Ext.data.Model',
fields: ['year', 'state'],
hasMany: {
model: 'record',
name: 'record'
},
proxy: {
type: 'rest',
url: 'Column.json.php',
reader: {
type: 'json',
root: 'data'
}
}
});
Ext.define("record", {
extend: 'Ext.data.Model',
fields: ['id', 'autorization', 'expendture'],
belongsTo: 'User'
});
var store1 = new Ext.data.Store({
model: "data"
});
And my JSON:
{
"data": [{
"year": "2010",
"state": "MP",
"record": [{
"id": "auth",
"autorization": "9.201"
}, {
"id": "exp",
"expendture": "1.250"
}]
}]
}
I want to read autorization and expendture with id
You have to do it at the Model/Record level using the mapping confg in fields, so you'd do something like this:
Ext.define("record", {
extend: 'Ext.data.Model',
fields: [
'id',
{name: 'autorization', mapping: 'record[0].autorization'},
{name: 'expendture', mapping: 'record[1].expendture'}
],
belongsTo: 'User'
});
It's good to note that it is probably quicker to ask questions over on the Sencha Forums.
I want to point out that Store.loadData does not respect the field mapping
The issue is that the Sencha team changed loadData's behavior, AND it's not something that's documented in a way that is clear. So if you are using it, add the following to your code base (above your app code, but below ext-all.js):
Ext.override(Ext.data.Store, {
loadDataViaReader : function(data, append) {
var me = this,
result = me.proxy.reader.read(data),
records = result.records;
me.loadRecords(records, { addRecords: append });
me.fireEvent('load', me, result.records, true);
}
});
then use:
mystore.loadDataViaReader(data)