PDA

View Full Version : Ext.Direct grid problem



isit.gd
14 Oct 2009, 6:15 AM
HI

I'm passing down the following json to a store:



{
"type": "rpc",
"tid": 2,
"action": "DirectReportDesigner",
"method": "GetReports",
"result": {
"total": 1,
"data": [{
"id": 1,
"FullTypeName": null,
"title": "test",
"useGroupedColConfig": false,
"groupTextTemplate": "{'ProviderName': ' Contract Number -- {gvalue}','ProviderName': ' Provider Name -- {gvalue}'}",
"groupHeaders": null,
"groupFields": "['CostElement2', 'CostElement3', 'CostElement4']",
"groupedHeaders": false,
"jsonUrl": "report/BudgetManagerBudgetData.rails",
"menuType": "rptmid",
"actualType": "rptmid",
"ignoreCols": "1",
"getRowClass": "settings.utils.highlightRowWhenCellEmptyClass",
"deleted": false,
"fitToScreen": false,
"isCopyOf": 0
}]
}
}


here is what the js code looks like:



Ideal.ReportDesigner.ReportGrid = function(config) {
Ideal.ReportDesigner.ReportGrid.superclass.constructor.call(this, config);
settings.utils = Ext.ComponentMgr.create({
xtype: 'reportutils'
});
};

Ext.extend(Ideal.ReportDesigner.ReportGrid, Ideal.UI.BaseGrid, {
pageSize: 25,
afterRender: function() {
this.getStore().load({
params: {
start: 0,
limit: 25
}
});

Ideal.ReportDesigner.ReportGrid.superclass.afterRender.apply(this, arguments);
},
header: false,
view: new Ext.grid.GridView({
autoFill: true
}),
cm: new Ideal.UI.ColumnModel([{
header: 'Report Name',
id: 'nameCol',
sortable: true,
dataIndex: 'title'
}, {
header: 'Json URL',
sortable: true,
dataIndex: 'jsonUrl'
}, {
header: 'Group Text Template',
sortable: true,
dataIndex: 'groupTextTemplate'
}, {
header: 'Group Headers',
sortable: true,
dataIndex: 'groupHeaders'
}, {
header: 'Group Fields',
id: 'groupFieldsCol',
sortable: true,
dataIndex: 'groupFields'
}, {
header: 'Grouped Headers',
sortable: true,
dataIndex: 'groupedHeaders'
}, {
header: 'Fit to Screen',
sortable: true,
dataIndex: 'fitToScreen'
}, {
header: 'Ignore Cols',
sortable: true,
dataIndex: 'ignoreCols'
}, {
header: 'Get Row Class',
sortable: true,
dataIndex: 'getRowClass'
}
]),

initComponent: function() {

var ds = new Ext.data.DirectStore({
directFn: DirectReportDesigner.GetReports,
paramsAsHash: false,
paramOrder: 'start|limit|sort|dir',
root: 'data',
idProperty: 'id',
totalProperty: 'total',
sortInfo: {
field: 'title',
direction: 'ASC'
},
fields: [{
name: 'id'
}, {
name: 'title'
}, {
name: 'useGroupedColConfig'
}, {
name: 'groupTextTemplate'
}, {
name: 'groupHeaders'
}, {
name: 'groupFields'
}, {
name: 'groupedHeaders'
}, {
name: 'jsonUrl'
}, {
name: 'menuType'
}, {
name: 'actualType'
}, {
name: 'fitToScreen'
}, {
name: 'ignoreCols'
}, {
name: 'getRowClass'
}, {
name: 'isCopyOf'
}
],
remoteSort: true
});

var pager = new Ext.PagingToolbar({
store: ds,
displayInfo: true,
pageSize: this.pageSize
});

var config = {
store: ds,
bbar: pager
};
Ext.apply(this, Ext.apply(this.initialConfig, config));
Ideal.ReportDesigner.ReportGrid.superclass.initComponent.apply(this, arguments);
}

});




the grid renders ok, the server code to get the json fires ok, but the store never loads the data. i know it's being passed back as i can see it in firebug and that's how i pasted it above.

can anyone see anything obvious here?

cheers

w://

isit.gd
14 Oct 2009, 7:46 AM
I'm still struggling with this :(

i have noticed that everything works ok using the traditional store and also - if i pull in the code from the example project in Ext.Direct.Mvc-0.6.3 it works too!!

here is the returned json:



{
"type": "rpc",
"tid": 2,
"action": "Employees",
"method": "Get",
"result": {
"total": 101,
"data": [{
"Id": 169,
"Name": "Abbot Baxter",
"Email": "egestas.Aliquam.nec@nonarcu.org",
"Salary": 76751.0000,
"HireDate": "2004-08-24T16:11:53",
"Active": false
},
{
"Id": 175,
"Name": "Alan Bates",
"Email": "lectus.pede@anteMaecenas.com",
"Salary": 46169.0000,
"HireDate": "2003-03-18T09:41:40",
"Active": true
},
{
"Id": 149,
"Name": "Allen Reid",
"Email": "lobortis@lectusNullamsuscipit.ca",
"Salary": 39950.0000,
"HireDate": "2007-09-07T13:01:24",
"Active": true
},
{
"Id": 103,
"Name": "Allistair Beck",
"Email": "nec@tempor.com",
"Salary": 62172.0000,
"HireDate": "2005-12-09T14:14:24",
"Active": true
},
{
"Id": 152,
"Name": "Andrew Park",
"Email": "suscipit.est.ac@lectusquismassa.ca",
"Salary": 50587.0000,
"HireDate": "2005-12-25T05:08:00",
"Active": false
},
{
"Id": 178,
"Name": "Arden Holcomb",
"Email": "vel@diamDuis.org",
"Salary": 75954.0000,
"HireDate": "2002-03-24T19:16:28",
"Active": true
},
{
"Id": 164,
"Name": "Aristotle Blevins",
"Email": "eget.metus.eu@consequatenim.ca",
"Salary": 76078.0000,
"HireDate": "2007-06-11T22:41:54",
"Active": false
},
{
"Id": 146,
"Name": "Baxter Hatfield",
"Email": "enim@nonummy.com",
"Salary": 41812.0000,
"HireDate": "2005-04-07T21:23:53",
"Active": false
},
{
"Id": 158,
"Name": "Berk Langley",
"Email": "magnis.dis@cursusnon.com",
"Salary": 76552.0000,
"HireDate": "2007-01-22T03:59:13",
"Active": true
},
{
"Id": 165,
"Name": "Brenden Glass",
"Email": "sit.amet.consectetuer@gravida.edu",
"Salary": 62464.0000,
"HireDate": "2005-03-05T19:28:18",
"Active": false
}]
}
}


and here is the js code for the grid:



Ideal.ReportDesigner.ReportGrid = Ext.extend(Ext.grid.GridPanel, {
title: 'Employees',
pageSize: 10,
frame: true,
viewConfig: {
autoFill: true
},
stripeRows: true,

initComponent: function() {
var ds = new Ext.data.DirectStore({
directFn: Employees.Get,
paramsAsHash: false,
paramOrder: 'start|limit|sort|dir',
root: 'data',
idProperty: 'Id',
totalProperty: 'total',
sortInfo: {
field: 'Name',
direction: 'ASC'
},
fields: [
{ name: 'Id', type: 'int' },
{ name: 'Name', type: 'string' },
{ name: 'Email', type: 'string' },
{ name: 'HireDate', type: 'date', dateFormat: 'c' },
{ name: 'Salary', type: 'float' },
{ name: 'Active', type: 'boolean' }
],
remoteSort: true
});

var pager = new Ext.PagingToolbar({
store: ds,
displayInfo: true,
pageSize: this.pageSize
});

var config = {
store: ds,
bbar: pager,
columns: [
{ header: 'Name', dataIndex: 'Name', sortable: true },
{ header: 'Email', dataIndex: 'Email', width: 150, sortable: true },
{ header: 'Hire Date', dataIndex: 'HireDate', width: 50, xtype: 'datecolumn', format: 'm/d/Y', sortable: true },
{ header: 'Salary', dataIndex: 'Salary', width: 50, renderer: 'usMoney', align: 'right', sortable: true },
{ header: 'Active', dataIndex: 'Active', width: 50, xtype: 'booleancolumn', trueText: 'Yes', falseText: 'No', align: 'center' }
]
};

Ext.apply(this, Ext.apply(this.initialConfig, config));

Ideal.ReportDesigner.ReportGrid.superclass.initComponent.apply(this, arguments);
},

afterRender: function() {
this.getStore().load({
params: {
start: 0,
limit: this.pageSize
}
});

Ideal.ReportDesigner.ReportGrid.superclass.afterRender.apply(this, arguments);
}
});




why oh why!!!!!

i'm at that really frustrated, using swear words, completely not getting why this isn't working stage!!!!

:)

w://

isit.gd
14 Oct 2009, 7:59 AM
the issue was actually in the c# code:



var res = new
{
total = max,
data = reports
};

return Direct(res);


should have been:



var result = new
{
total = max,
data = reports
};

return Direct(result);


grrrrrr