PDA

View Full Version : this json proper syntax for Grid?



stevefink
1 Sep 2007, 11:52 AM
Hi all,

I have a json encoded array which looks like this:

({"data":[{"color":"blue","miles":"110000","price":"6500","stock":"0","year":"2007","carfax":"","daysold":"0","photo_count":"5","model":"MDX","make":"Acura"},{"color":"Blue","miles":"11600","price":"4500","stock":"456789","year":"1979","carfax":"","daysold":"0","photo_count":"4","model":"Booyakasha","make":"Acura"},{"color":"Blue","miles":"11600","price":"4500","stock":"4567891","year":"1979","carfax":"","daysold":"0","photo_count":"1","model":"RDX","make":"Acura"}]})

Unfortunately I'm not receiving any errors in Firebug. My column titles are being rendered just fine, however the dataset from above is not being displayed. Perhaps if I share my dataSource with you folks, someone might be able to guide me in the right direction, be it with a silly mistake I made, or where I should further read to gather more insight on my problem.




function setupDataSource() {
ds = new Ext.data.Store({
proxy: new Ext.data.ScriptTagProxy({url: 'http://f1auto/inventory/live'}),
reader: new Ext.data.JsonReader(
{root: 'data', id: 'stock'},
[
{name: 'photos'},
{name: 'year'},
{name: 'make'},
{name: 'model'},
{name: 'miles'},
{name: 'color'},
{name: 'price'},
{name: 'stock'},
{name: 'daysold'},
{name: 'carfax'},
// {name: 'duedate', type: 'date', dateFormat: 'n/j/Y h:i o'},
// {name: 'completed', type: 'boolean'},
]
)
}
);

ds.load();
}


Thank you all. :-)

- sf

stevefink
1 Sep 2007, 11:58 AM
Also, the following is my URL for the json:

http://devel.phpgeek.org/inventory/live

eventually would like to populate it here:

http://devel.phpgeek.org/console/inventory

as you can see columns are fine, just no data. :-)

MaximGB
1 Sep 2007, 11:59 AM
You don't need script tag proxy here, use HttpProxy instead.

stevefink
1 Sep 2007, 12:17 PM
Privet Maxim, and thank you for the reply. :-)

I tried with HttpProxy, however it appends a query string it appears which is messing up the URL. At least according to firebug... it tries to GET http://f1auto/inventory/live?_dc=1188677748782 (my backend doesn't know what ?_dc=1188677748782 is, neither do I. :-) )

My entire grid.js is here:




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: 'http://f1auto/inventory/live'}),
reader: new Ext.data.JsonReader(
{root: 'data', id: 'stock'},
[
{name: 'photo_count'},
{name: 'year'},
{name: 'make'},
{name: 'model'},
{name: 'miles'},
{name: 'color'},
{name: 'price'},
{name: 'stock'},
{name: 'daysold'},
{name: 'carfax'}
]
)
}
);

ds.load();
}

function getColumnModel() {

if(!columnModel) {
columnModel = new Ext.grid.ColumnModel(
[
{
header: '# Photos',
width: 100,
sortable: true,
dataIndex: 'photo_count'
},
{
header: 'Year',
width: 100,
sortable: true,
dataIndex: 'Year',
editor: new Ext.grid.GridEditor(
new Ext.form.TextField(
{
allowBlank: false
}
)
)
},
{
header: 'Make',
width: 100,
sortable: true,
dataIndex: 'make'
},
{
header: 'Model',
width: 100,
sortable: true,
dataIndex: 'model'
},
{
header: 'Miles',
width: 100,
sortable: true,
dataIndex: 'miles'
},
{
header: 'Color',
width: 100,
sortable: true,
dataIndex: 'color'
},
{
header: 'Price',
width: 100,
sortable: true,
dataIndex: 'price'
},
{
header: 'Stock #',
width: 100,
sortable: true,
dataIndex: 'stock'
},
{
header: 'Days Old',
width: 100,
sortable: true,
dataIndex: 'daysold'
},
{
header: 'With Carfax',
width: 100,
sortable: true,
dataIndex: 'carfax'
},
{
header: 'Delete Selected',
width: 100,
sortable: true
},
]
);
}

return columnModel;
}

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

grid.render();
}

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

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

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



Spaceba shto ti pasmatrel (thank you for looking. :-) )

- sf

MaximGB
1 Sep 2007, 12:33 PM
dc is acronym for don't cache, the _dc is ext mechanics to prevent proxy from response caching. Use disableCaching:false http proxy config option to prevent Ext to add _dc request parameter.

stevefink
1 Sep 2007, 12:47 PM
Maxim, you're a life saver.

Thanks. That did the trick! Unfortunately my PHP framework only accepts clean URLs, so the additional query string was breaking the retrieval of data.

Woop!

- sf