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.
Related
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!
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'm using ExtJS v4 for making some rich interfaces, the problem is that i encounter difficulties from time to time (something quite normal for a beginner in Extjs: p), the problem i encounter now, concern the pagination, in fact on my page i have all the records that are displayed, even after specifying the item by nbr of pages if possible to help me thanks
Ext.onReady(onReady);
function onReady() {
var itemsPerPage = 10;
var store = new Ext.data.JsonStore({
autoLoad: false,
pageSize: itemsPerPage,
proxy: new Ext.data.HttpProxy({
type: 'ajax',
url: '../Service.asmx/GetMyDvpt',
reader: {
type: 'json',
root: 'd',
//totalProperty: 'total',
idProperty: 'Id'
},
headers: {
'Content-type': 'application/json'
}
}),
fields: ['NOM_EXP', 'NOM_ESP', 'NOM_VAR', 'SURF_PG', 'DD_CYCLE_PROD']
});
store.load({
params: {
start: 0,
limit: itemsPerPage
}
});
Ext.create('Ext.grid.Panel', {
store: store,
columns: [
{ dataIndex: 'NOM_EXP', header: 'NOM_EXP' },
{ dataIndex: 'NOM_ESP', header: 'NOM_ESP' },
{ dataIndex: 'NOM_VAR', header: 'NOM_VAR' },
{ dataIndex: 'SURF_PG', header: 'SURF_PG' },
{ dataIndex: 'DD_CYCLE_PROD', header: 'DD_CYCLE_PROD', flex: 1 }
],
renderTo: 'panel',
title: 'Dvpt Grid',
width: 570,
height: 350,
dockedItems: [{
xtype: 'pagingtoolbar',
store: store,
dock: 'bottom',
displayInfo: true
}]
});
}
You must create new instances of Ext JS objects with Ext.create, because objects instantiated with the new keyword won't take care of the Ext JS class system.
When you look at the load() method source code, you'll see how the configuration options get applied, and so would you:
store.load({
start: 0,
limit: itemsPerPage
});
Since the store has already been configured with pageSize, there's no need for the limit options, since it gets the pageSize as default.
store.load({
start: 0
});
I'd also recommend to have a look at the loadPage() method, that handles setting all the paging relevant parameters correctly:
store.loadPage(1);
Another enhancement is to set autoLoad to true, then you could omit the store load completely.
There is also no need to create a Ext.data.HttpProxy manually, since the configuration object specifies the ajax type and will take care of instantiating the correct proxy type for you.
Since you specified a JSON reader, there should be no need to set the HTTP accept header. Content-Type is anyway a response header and the corresponding request header would be Accept.
So your code should look like this:
Ext.onReady(onReady);
function onReady() {
var store = Ext.create('Ext.data.JsonStore', {
autoLoad: true,
pageSize: 10,
proxy: {
type: 'ajax',
url: '../Service.asmx/GetMyDvpt',
reader: {
type: 'json',
root: 'd',
totalProperty: 'total',
idProperty: 'Id'
}
},
fields: ['NOM_EXP', 'NOM_ESP', 'NOM_VAR', 'SURF_PG', 'DD_CYCLE_PROD']
});
Ext.create('Ext.grid.Panel', {
store: store,
columns: [
{ dataIndex: 'NOM_EXP', header: 'NOM_EXP' },
{ dataIndex: 'NOM_ESP', header: 'NOM_ESP' },
{ dataIndex: 'NOM_VAR', header: 'NOM_VAR' },
{ dataIndex: 'SURF_PG', header: 'SURF_PG' },
{ dataIndex: 'DD_CYCLE_PROD', header: 'DD_CYCLE_PROD', flex: 1 }
],
renderTo: 'panel',
title: 'Dvpt Grid',
width: 570,
height: 350,
dockedItems: [{
xtype: 'pagingtoolbar',
store: store,
dock: 'bottom',
displayInfo: true
}]
});
}
When dealing with problems like this, I usually test the backend service with a REST client. There are many addons for different browsers available, for example RESTClient for Firefox or Advanced REST clinet for Chrome. Make sure that your service behaves correct without any UI, just by sending plain HTTP request with manually defined parameters. Only move to the GUI part when when everything works as expected.
For the GUI part I encourage you to study the source code of Ext JS within the API Documentation, it's well structured and documented and you'll learn a lot.
Since version 4 Ext JS comes with a MVC application framework, which simplifies the creation of large RIA apps a lot. Read more at the Application Architecure Guide.
Paging Toolbar supports remote paging by default. If local paging is required paging then reload store on 'datachange' and 'refresh' event fired.
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)
Im having trouble with what should be a simple thing to do but cant get it to work. I have tried several examples from different sites and looked and the Sencha Touch API but no luck. What I am trying is to just fill a List from an external JSON source. To make it as simple as possible I've just put it in an external file for now.
Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady : function() {
Ext.regModel('Contact', {
fields: ['firstName', 'lastName']
});
var store = new Ext.data.Store({
model: 'Contact',
sorters: 'firstName',
getGroupString : function(record) {
return record.get('firstName')[0];
},
proxy: {
type: 'ajax',
url : 'test.json',
reader: {
type: 'json'
}
}
});
var list = new Ext.List({
fullscreen: true,
itemTpl : '{firstName} {lastName}',
store: store
});
list.show();}});
The JSON file
[
{
"firstName" : "pelle",
"lastName": "ollesson"
},
{
"firstName" : "nisse",
"lastName": "pellssdfok"
}
]
Is there something that you can see right away that is wrong?
Thanks in advance
Ok, solved. When I removed sorters and getGroupString it suddenly worked.