DirectStore and GridPanel -> I have to pay for the new version

[jujubilation]

Hello,

I spent a night try to fill a grid !
In 5 minutes, I 'm able to have this to the client side (thanks to the ext-direct-pack) :


{"type":"rpc","result":{"classified": {"status":null,"name":"a","updated_at":"2009-04-29T11:21:48Z","display_address":null,"abstract":"a","estate_id":"1","end_announcement":null,"contact":null,"id":1,"owner_id":"1","start_announcement":null,"created_at":"2009-04-29T11:21:48Z"}},"status":true,"errors":[],"message":"Classifieds#index","tid":2}


But impossible to fill the grid :



var store = new Ext.data.DirectStore({
directFn: Classifieds.direct, // this function work !
paramsAsHash: false,
root: '',
idProperty: 'id',
fields: ['id', 'name']
});

var userColumns = [
{header: 'name', width: 160, sortable: true, dataIndex: 'name'},
{id: 'id', header: 'id', width: 160, sortable: true, dataIndex: 'id'}
];

var userGrid = new Ext.grid.GridPanel({
renderTo: 'user-grid',
title: 'Users',
autoScroll: true,
height: 300,
store: store,
columns : userColumns
});

store.load();


I try all the examples, lots of threads and Google but impossible to find what's wrong.
Someone can help me with this ? Thanks a lot for your help.

[evant]

1) Your root is empty.
2) The idProperty doesn't match anything your data has returned.
3) The id field you've specified don't match anything your data has returned.

[jujubilation]

Thanks a lot for your help. However I already test the grid with :

root: 'classified'

And in my data, there is and id field (not in first position).

[Condor]

The root isn't 'classified'. It's 'result.classified', which is a lot better to see if you format (http://www.jsbeautifier.org/) the JSON data:

{
"type": "rpc",
"result": {
"classified": {
"status": null,
"name": "a",
"updated_at": "2009-04-29T11:21:48Z",
"display_address": null,
"abstract": "a",
"estate_id": "1",
"end_announcement": null,
"contact": null,
"id": 1,
"owner_id": "1",
"start_announcement": null,
"created_at": "2009-04-29T11:21:48Z"
}
},
"status": true,
"errors": [],
"message": "Classifieds#index",
"tid": 2
}

[jujubilation]

Thanks Condor. sorry for this huge mistake. I changed the root but the result is the same : the grid is empty.
My code :


var store = new Ext.data.DirectStore({
directFn: Classifieds.direct,
paramsAsHash: false,
root: 'result.classified',
fields: ['name']
});

var userColumns = [
{header: 'name', width: 160, sortable: true, dataIndex: 'name'},
];

var userGrid = new Ext.grid.GridPanel({
renderTo: 'user-grid',
title: 'Users',
autoScroll: true,
height: 300,
store: store,
columns : userColumns
});

store.load();

[Condor]

Which Ext version are you using? For older Ext versions the root needs to be an array, e.g.

{
"type": "rpc",
"result": {
"classified": [{
"status": null,
"name": "a",
"updated_at": "2009-04-29T11:21:48Z",
"display_address": null,
"abstract": "a",
"estate_id": "1",
"end_announcement": null,
"contact": null,
"id": 1,
"owner_id": "1",
"start_announcement": null,
"created_at": "2009-04-29T11:21:48Z"
}]
},
"status": true,
"errors": [],
"message": "Classifieds#index",
"tid": 2
}

[jujubilation]

I'm using the latest version (3.0).

[Condor]

3.0 isn't a version. The latest version is 3.0.1 and I assume you are using 3.0.0?

[jujubilation]

Yes, 3.0.0

[Condor]

In that case you'll need to convert your JSON data into an array (or upgrade to 3.0.1).

[jujubilation]

Oh ok 3.0.0 is a old version !
Thanks for your help.

[fnazarios]

I'm having the same problem, I'm using version 3.1.0

Js Code:


var storeSla= new Ext.data.DirectStore({
storeId: 'storeSlaGrid',
directFn: Router.ApiIHandler.ListaSLA,
reader: new Ext.data.JsonReader({
totalProperty: 'total',
successProperty: 'success',
idProperty: 'id',
root: 'result',
fields: ['id','grupoCliente', 'vlMenor', 'slaVlMenor', 'vlMaior', 'slaVlMaior', 'slaEntre']
}),
idProperty: 'id',
paramsAsHash: false,
totalProperty: 'total',
successProperty: 'success',
root: 'result'
});
storeSla.load();
new Ext.grid.GridPanel({
stripeRows: true,
height: 250,
title: 'Clientes com SLA',
stateful: true,
stateId: 'grid',
border:true,
bodyBorder:true,
autoExpandColumn: 'grpCliente',
store: storeSla,
trackMouseOver:false,
columns: [
{id: 'id', dataIndex:'id', header: '', width: 20, sortable: true},
{id: 'grpCliente', dataIndex:'grupoCliente', header: 'Grupo Cliente', width: 160, sortable: true},
{header: 'Valor menor', dataIndex:'vlMenor', width: 75, sortable: true},
{header: 'SLA', dataIndex:'slaVlMenor', width: 75, sortable: true},
{header: 'Valor maior', dataIndex:'vlMaior', width: 75, sortable: true},
{header: 'SLA', dataIndex:'slaVlMaior', width: 85, sortable: true},
{header: 'SLA Entre valores', dataIndex:'slaEntre', width: 85, sortable: true}
]
})


Message in Firebug:


uncaught exception: Ext.data.DataProxy: DataProxy attempted to execute an API-action but found an undefined url / function. Please review your Proxy url/api-configuration.