View Full Version : Problem with grid data population (DWR + extjs)

19 Apr 2008, 6:16 AM
I am using DWRProxy to populate data from java file into my grid. My java code is:

public ListRange checkResult(String source, String destination, String date, boolean flag, int start, int count, String orderBy){

ListRange listRange = new ListRange();

Object[] data = {new AirSearchVO(source,destination,date,new Flight("A440","Air America")),new AirSearchVO(source,destination,date,new Flight("A420","Air India")),
new AirSearchVO(source,destination,date,new Flight("A450","Air Canada")),new AirSearchVO(source,destination,date,new Flight("A140","Air ABC"))};

return listRange;


My java ccript is:

var GridUI = function() {
var ds;
var grid; //component

var columnModel; // definition of the columns
function initDataSource() {
var recordType = Ext.data.Record.create([
{name: "source", width: 120,type: "String"},
{name: "destination", width: 120, type: "string"},
{name: "date", width: 120, type: "string"},
{name: "airlinename", mapping: "flight.airlineName", width: 120, type: "string"},
{name: "flightno", mapping: "flight.flightNo", width: 120, type: "string"}

var reader = new Ext.data.JsonReader({
totalProperty: "totalSize",
root: "data"
}, recordType);

ds = new Ext.data.Store({
proxy: new Ext.data.DWRProxy({
dwrFunction: DWRLogin.checkResult,
listeners: {
'beforeload': function(dataProxy, params){
params.source = $("source").value;
params.destination = $("destination").value;
params.date = $("date").value;
params.flag = true;
params.start = 0;
params.limit = 22;
params.orderBy = "";
params[dataProxy.loadArgsKey] = [params.source, params.destination, params.date, params.flag, params.start, params.limit, params.orderBy];
reader: reader

function getColumnModel() {
if(!columnModel) {
columnModel = new Ext.grid.ColumnModel(
header: 'Source',
width: 250,
sortable: true,
dataIndex: 'source'
header: 'Destination',
width: 250,
sortable: true,
dataIndex: 'destination'
header: 'Airline Name',
width: 250,
sortable: true,
dataIndex: 'airlinename'
header: 'Airline NO',
width: 250,
sortable: true,
dataIndex: 'flightno'
header: 'Date',
width: 250,
sortable: true,
dataIndex: 'date'
return columnModel;

function buildGrid() {
grid = new Ext.grid.GridPanel({
autoScroll: true,
autoHeight: true,
autoWidth: true,
ds: ds,
viewConfig: {forceFit: true},
cm: getColumnModel(),
stripeRows: true,
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
collapsible: true,
title:'Air Search Result'


return {
init : function() {

getStore: function() {
return ds;

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

my responce from DWR is:

var s0=[];var s1={};var s5={};var s2={};var s6={};var s3={};var s7={};var s4={};var s8={};s0[0]=s1;s0[1]=s2;s0[2]=s3;s0[3]=s4;
s1.date="";s1.destination="";s1.flight=s5;s1.source="";s5.airlineName="Air America";s5.flightNo="A440";s2.date="";s2.destination="";s2.flight=s6;s2.source="";s6.airlineName="Air India";s6.flightNo="A420";s3.date="";s3.destination="";s3.flight=s7;s3.source="";s7.airlineName="Air Canada";s7.flightNo="A450";s4.date="";s4.destination="";s4.flight=s8;s4.source="";s8.airlineName="Air Punjab";s8.flightNo="A140";

DWRProxy is:

Ext.data.DWRProxy = function(config){
Ext.apply(this, config);

Ext.extend(Ext.data.DWRProxy, Ext.data.DataProxy, {

dwrFunction: null,
loadArgsKey: 'dwrFunctionArgs',

load: function(params, reader, loadCallback, scope, arg){
var dataProxy = this;
if (dataProxy.fireEvent("beforeload", dataProxy, params) !== false) {
var loadArgs = params[this.loadArgsKey] || params;
var dwrFunctionArgs = [];
if (loadArgs instanceof Array) {

for (var i = 0; i < loadArgs.length; i++) {
} else { // loadArgs should be an Object
for (var loadArgName in loadArgs) {
callback: function(response){

var records = reader.readRecords(response);

dataProxy.fireEvent("load", dataProxy, response, loadCallback);
loadCallback.call(scope, records, arg, true);
exceptionHandler: function(message, exception){
// the event is supposed to pass the response, but since DWR doesn't provide that to us, we pass the message.
dataProxy.fireEvent("loadexception", dataProxy, message, loadCallback, exception);
loadCallback.call(scope, null, arg, false);
this.dwrFunction.apply(Object, dwrFunctionArgs); // the scope for calling the dwrFunction doesn't matter, so we simply set it to Object.
} else { // the beforeload event was vetoed
callback.call(scope || this, null, arg, false);

While reading response back in dwrProxy on line :
var records = reader.readRecords(response);

i am getting an error.

_debug("Error: TypeError, R.convert is not a function", true)engine.js (line 1223)
defaultErrorHandler("R.convert is not a function", TypeError: R.convert is not a function message=R.convert is not a function)engine.js (line 177)
_handleError(Object map=Object charsProcessed=0 paramCount=0, TypeError: R.convert is not a function message=R.convert is not a function)engine.js (line 1008)
_remoteHandleCallback(undefined, undefined, undefined)engine.js (line 878)
_eval("//#DWR-INSERT\r\n//#DWR-REPLY\r\nvar s0=[];var s1={};var s5={};var s2={};var s6={};var s3={};var s7={};v...")engine.js (line 939)
_stateChange(Object map=Object charsProcessed=0 paramCount=0)engine.js (line 855)
onreadystatechange()engine.js (line 652)

Error: TypeError, R.convert is not a function

Can someone please tell me what's wrong here.

2 May 2008, 8:37 AM
I think you need "string" instead of "String" in the line below:

{name: "source", width: 120,type: "String"},