PDA

View Full Version : problem with json



willyaguirre
31 Jul 2012, 5:52 AM
I'm using sencha extjs 4.1




Ext.define('VE.model.Usuario', {
extend: 'Ext.data.Model',
fields: ['name', 'id']
});






Ext.define('VE.store.Stusuario', {
extend: 'Ext.data.Store',

model: 'VE.model.Usuario',


autoLoad: true,

proxy: {
type: 'jsonp',
url: 'http://vivid-sunset-6133.herokuapp.com/bars.json',
reader: {
type: 'json'
}
}

});






Ext.define('VE.view.data.Usuario', {
extend: 'Ext.grid.Panel',
alias: 'widget.listusuarios',

title: 'Lista de Usuarios',

renderTo: Ext.getBody(),

store: 'Stusuario',

initComponent: function() {

this.columns = [
{
header: 'Name',
dataIndex: 'name',
flex: 1
},
{
header: 'Id',
dataIndex: 'id',
flex: 1
}
];

this.callParent(arguments);

}

});



The problem is: json doesn't upload data on grid panel

scottmartin
31 Jul 2012, 6:44 AM
json doesn't upload data on grid panel

Do you mean it does not populate grid?
You will need to add 'root' to your store. This will also need to be in return json

example:


Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'change'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa@simpsons.com", "change":100 },
{ 'name': 'Bart', "email":"bart@simpsons.com", "change":-20 },
{ 'name': 'Homer', "email":"home@simpsons.com", "change":23 },
{ 'name': 'Marge', "email":"marge@simpsons.com", "change":-11 }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});

Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Change', dataIndex: 'change' }
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
‚Äč

Scott.

willyaguirre
31 Jul 2012, 9:07 AM
but json has this form.



[
{
"name": "All your base are belong to us",
"id": 1
},
{
"name": "fdsfd",
"id": 2
},
{
"name": "gdfgfdf",
"id": 3
},
{
"name": "yaaa heee haaa",
"id": 4
}
]

Mteixeira
31 Jul 2012, 9:10 AM
var data = Ext.create('Ext.data.JsonStore', { fields: ['name', 'id'],
proxy: {
type: 'memory',
reader: {
type: 'json'
}
}
});

This should do it

then on your grid

store: data

willyaguirre
31 Jul 2012, 9:14 AM
but I can't populate grid.




proxy: {
type: 'jsonp',
url: 'http://vivid-sunset-6133.herokuapp.com/bars.json',
reader: {
type: 'json'
}
}

mankz
31 Jul 2012, 10:35 AM
Is this the same domain as your HTML page?

http://vivid-sunset-6133.herokuapp.com/bars.json

Otherwise your ajax calls won't work, same-domain-restrictions apply.