PDA

View Full Version : Remote JSON grid doesn't load



catequil
17 Apr 2014, 12:31 PM
Hi!, I'm new in ExtJS, and I'm trying to load a very basic grid from a remote JSON source, but it seems that the store never gets loaded of data, i tried the same procedure but loading a local JSON file (with the same content retrieved from the remote JSON source), and it works fine!, please guys, some help for this newbie. :D.

This is my code:



Ext.require([ 'Ext.data.*', 'Ext.grid.*' ]);
Ext.onReady(function(){
Ext.define('Book',
{ extend: 'Ext.data.Model',
fields: ['id_enfermedad_comun', 'nombre_enfermedad_comun', 'descripcion_enfermedad_comun'], //idProperty: 'id_enfermedad_comun' });

// create the Data Store
var store = Ext.create('Ext.data.Store', {
model: 'Book',
autoLoad: true,
proxy: {
type: 'jsonp',
url: 'http://192.168.183.134/sisscsj/index.php?r=enfermedadComun',
//type: 'ajax',
//url: 'fede.json',
reader: {
type: 'json',
root: 'registros'
//idProperty: 'id_enfermedad_comun',
//totalRecords: 'total'
} } });

// create the grid
Ext.create('Ext.grid.Panel', {
store: store,
columns: [
{text: "id", flex: 1, dataIndex: 'id_enfermedad_comun'},
{text: "nombre", width: 180, dataIndex: 'nombre_enfermedad_comun'},
{text: "desc", width: 115, dataIndex: 'descripcion_enfermedad_comun'} ],

renderTo:'example-grid',
width: 540,
height: 200 }); });

My JSON file that loads correctly is this:


{
"registros": [
{
"id_enfermedad_comun": "1",
"nombre_enfermedad_comun": "Resfrio",
"descripcion_enfermedad_comun": "Resfrio comun."
},
{
"id_enfermedad_comun": "2",
"nombre_enfermedad_comun": "resfrio2",
"descripcion_enfermedad_comun": "pruebayii"
},
{
"id_enfermedad_comun": "4",
"nombre_enfermedad_comun": "resfrio3",
"descripcion_enfermedad_comun": "pruebayii"
},
{
"id_enfermedad_comun": "6",
"nombre_enfermedad_comun": "resfrio fede",
"descripcion_enfermedad_comun": "prueba con espacios mal"
},
{
"id_enfermedad_comun": "7",
"nombre_enfermedad_comun": "resfrio666",
"descripcion_enfermedad_comun": "descripcion de ejemplo en yii"
}
]
}

I forgot something important, I get an error in the Chrome Developer tools, I'm attaching the image. Something else, my JSON is generated by a PHP app made in Yii framework.

Thank you.

scottmartin
17 Apr 2014, 12:46 PM
You are using JSONP, but you have a local 192.168 .. IP?

If you do in fact need to use JSONP, (cross-domain) then the result needs to be wrapped in a callback function:
http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.data.proxy.JsonP

If not, then just use JSON

catequil
17 Apr 2014, 1:01 PM
scottmartin, thank you for the fast reply, the fact that I'm using "jsonp" is because the ExtJS app is running on a local environment (localhost) and the JSON file is on a virtual machine with that IP (192.168.183.134), actually I tried some other options for the proxy (json and ajax) but with worst results, I will re read the doc link you sent me and make more tests, more guidance will be appreciated. Thanks again.PS. did you see the image file that I uploaded?, may be that gives you more ideas of my mistake.

catequil
21 Apr 2014, 6:18 AM
Thank you scottmartin, you pointed me in the right direction, I just put my JSON answer from the server in a callback function and it worked perfectly, I have to remember to read more carefully the documentation (:">), thank you!.


You are using JSONP, but you have a local 192.168 .. IP?

If you do in fact need to use JSONP, (cross-domain) then the result needs to be wrapped in a callback function:
http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.data.proxy.JsonP

If not, then just use JSON