PDA

View Full Version : Grid DataStore from JSON Problem



oracio
27 May 2007, 9:09 AM
Hello,
I'm very new to Ext and im trying to figure it out, but from the little that i saw it is really powerful :D

I saw the beautiful ScreenCast by Scott Walter, and I tried to make what he did there:
a grid that takes it's data from a json file that was generated by the server.
It works great in FireFox but for some reason I get nothing in IE7.
should it work in IE7 or did I do something wrong?
here is my code:



var GridUI = function() {

var ds; //hold our data
var grid; //component
var columnModel; // definition of the columns


function setupDataSource() {
ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:'ajaxasp3.asp'}), //a script that generates json
reader: new Ext.data.JsonReader(
{root: 'data', id: 'itemid'},
[
{name: 'itemid'},
{name: 'itemname'},
{name: 'itempath'},
{name: 'itemprice'},
{name: 'itemwidth'},
{name: 'itemheight'}
]
)
}
);

ds.load();
}


function getColumnModel() {
if(!columnModel) {
columnModel = new Ext.grid.ColumnModel(
[
{
header: 'Item ID',
width: 250,
sortable: true,
dataIndex: 'itemid'
},

{
header: 'Item Name',
width:100,
sortable: true,
dataIndex: 'itemname'
},
{
header: 'Item Path',
width:100,
sortable:true,
dataIndex: 'itempath',
},
{
header: 'Item Price',
width:100,
sortable: true,
dataIndex: 'itemprice',
},
{
header: 'Item Width',
width:100,
sortable:true,
dataIndex:'itemwidth',
},
{
header: 'Item Height',
width:100,
sortable:true,
dataIndex:'itemheight',
}
]
);
}
return columnModel;
}

function buildGrid() {
grid = new Ext.grid.Grid(
'mygrid',
{
ds: ds,
cm: getColumnModel(),
autoSizeColumns: true
}
);

grid.getView().getRowClass = function(record, index) {
if(record.data.completed) {
return "greenrow";
}
}

grid.on("rowdblclick", function(grid) {
alert(grid.getSelectionModel().getSelected().data.description);
});

grid.render();
}

return {
init : function() {
setupDataSource();
buildGrid();
},

getDataSource: function() {
return ds;
}
}
}();

Ext.onReady(GridUI.init, GridUI, true);


the json looks like this:



{data: [{itemid: 5,itemname: 'Strong Winds from Nowhere',itempath: 'books\u002Fb-strong.gif',itemprice: 80,itemwidth: 151,itemheight: 216}]}


Thank you in advanced!
- Uri

jsakalos
27 May 2007, 9:11 AM
Extra commas.

Animal
27 May 2007, 9:14 AM
Your JsonReader needs "mapping" values more then names.

The "mapping" property for a field is the Json expression into a row object to obtain the data.

The "name" property is the name the field takes on when in a Record object, and it's what the ColumnModel's "dataIndex" property refers to. If no "name" is specified, it uses the "mapping" expression.

Animal
27 May 2007, 9:16 AM
But yes, there are some extra commas.

Run your page in Opera. Opera's error console kindly points extra commas out.

oracio
27 May 2007, 9:18 AM
extra commas in the javascript or in the json?

Animal
27 May 2007, 9:20 AM
In your executable javascript.

"json" is just javascript source code. I don't believe in json.

oracio
27 May 2007, 9:29 AM
Thank you very much! (again)

downloaded Opera and it did the job, well I'm a noob but hey if you don't try you dont learn, right?

FireFox is not gentle like the other browers...the commas didn't seem to bother it...

daviscabral
5 Jun 2007, 11:53 AM
I have the same problem. At firefox is ok, but Opera and IE7 nothing is showed.
I didn't get problems at Opera's error console, only some CSS errors and warnings.

My JSON String is:
[code]{"Results":[{"AjudaCustoMensal":800.00,"Email":"[email protected]","Pais":"Brasil","UnidadeFederacao":"Paran

tryanDLS
5 Jun 2007, 12:04 PM
Debug thru the store's load process and see why you're failing. Does it build all your records?

daviscabral
5 Jun 2007, 12:16 PM
Well, at Firefox my records are showed.

Bellow a screenshot:
http://201.3.90.11/firefox_grid.png

And I didn't notice errors. But this happens only this grid.
I have another grids and are showed ok.

I believe that problem is the json string and mapping.

daviscabral
6 Jun 2007, 3:34 AM
Here a screenshot from IE:
http://201.3.90.11/ie7_grid.png

All seems to be right, but the grid don't render data inside her.

daviscabral
6 Jun 2007, 3:57 AM
JSON string was broken.

I don't know yet but on {"Situacao": ""}, she broke at :".

I solved the problem when define a default value to Situacao on the database.

But I will do more tests and understand the reason for this.

PS: At the Ie7 screenshot the combos are dislocated to right, you see this? Someone knows how to solve this?

Thanks

tryanDLS
6 Jun 2007, 8:46 AM
PS: At the Ie7 screenshot the combos are dislocated to right, you see this? Someone knows how to solve this?
Thanks

Does it happen in Firefox too? If so, look at the rendered HTML to see if those elements are getting different padding.

daviscabral
6 Jun 2007, 8:53 AM
Only IE (version 6 and 7).
At Opera and Firefox form is rendered ok.

Did you already see this before?

I found about this at another topic, but the solution doesn't apply to my case.

Thanks.