PDA

View Full Version : Using DWRProxy



d95sld95
26 Apr 2007, 6:45 AM
Hi,

I am trying make the DWRProxy (http://extjs.com/forum/showthread.php?t=4227&highlight=DWRProxy) code work with my sample application. Basically I am trying to add a ComboBox to hold countries.

Java Code:



private static Map<String, String> countryList;

public static Map<String, String> getCountryList() {
return countryList;
}

Data returned by DWR:



{AF:"AFGHANISTAN",AX:"ALAND ISLANDS",AL:"ALBANIA",DZ:"ALGERIA",AS:"AMERICAN SAMOA",AD:"ANDORRA",AO:"ANGOLA",AI:"ANGUILLA",AQ:"ANTARCTICA",AG:"ANTIGUA AND BARBUDA"}

Response in FireBug:



//#DWR-INSERT
//#DWR-REPLY
dwr.engine._remoteHandleCallback('1','0',{AF:"AFGHANISTAN",AX:"ALAND ISLANDS",AL:"ALBANIA",DZ:"ALGERIA" ,AS:"AMERICAN SAMOA",AD:"ANDORRA",AO:"ANGOLA",AI:"ANGUILLA",AQ:"ANTARCTICA",AG:"ANTIGUA AND BARBUDA"});

JavaScript:



<script type="text/javascript">
var store;
Ext.onReady(function() {

store = new Ext.data.Store({
proxy: new Ext.data.DWRProxy(globalManager.getCountryList),
reader: new Ext.data.JsonReader({id: 0}, [
{name: 'key', mapping: 0},
{name: 'value', mapping: 1},
])
});
store.load();

var countryCombo = new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
transform:'countries',
width:400,
emptyText:'Select a country...',
forceSelection:true,
store: store
});
});
</script>

I am not really getting any errors, and I am not getting any data into the store either. I see DWR is making the query. But if I look at the store in Firebug it looks like this:

Object data=[0] baseParams=Object paramNames=Object

Am I using the wrong reader or indexing the data incorrectly? Any help would be appreciated.


DWRProxy code in use (Author: fredrikhultin, see http://extjs.com/forum/showthread.php?t=4227&highlight=DWRProxy)



/**
* DWR proxy for the store
*/

Ext.data.DWRProxy = function (f) {
Ext.data.DWRProxy.superclass.constructor.call(this);
this.func = f;
};

Ext.extend(Ext.data.DWRProxy, Ext.data.DataProxy, {
load : function(params, reader, callback, scope, arg) {
document.dwr = {params:params, reader:reader, callback:callback, scope:scope, arg:arg};
this.func.call(this, arg, {
callback: this.loadResponse,
exceptionHandler: this.failure,
});
},

loadResponse : function(response) {
var dwr = document.dwr;
delete document.dwr;
var result;
try {
result = dwr.reader.read(response);
}catch(e){
this.fireEvent("loadexception", this, o, response, e);
dwr.callback.call(dwr.scope, null, dwr.arg, false);
return;
}
dwr.callback.call(dwr.scope, result, dwr.arg, true);
},

failure : function(o, success, response) {
console.log("Failed"); // Not finished yet but should probably just call a failure callback
},

update : function(params, records){

}
});

Ext.data.ObjectReader = function(meta, recordType){
Ext.data.ObjectReader.superclass.constructor.call(this, meta, recordType);
};
Ext.extend(Ext.data.ObjectReader, Ext.data.DataReader, {
read : function(response){
var sid = this.meta ? this.meta.id : null;
var recordType = this.recordType, fields = recordType.prototype.fields;
var records = [];
var root = response;
for(var i = 0; i < root.length; i++){
var obj = root[i];
var values = {};
var id = obj[sid];

for(var j = 0, jlen = fields.length; j < jlen; j++){
var f = fields.items[j];
var k = f.mapping !== undefined && f.mapping !== null ? f.mapping : f.name;

var v = obj[k] !== undefined ? obj[k] : f.defaultValue;
v = f.convert(v);
values[f.name] = v;

}
var record = new recordType(values, id);
records[records.length] = record;
}
return {
records : records,
totalRecords : records.length
};
}
});

Animal
26 Apr 2007, 7:21 AM
Have you attempted to debug?

Hani
26 Apr 2007, 8:48 AM
Looks like you're using JsonReader instead of the ObjectReader. The data returned by DWR isn't JSON data, you need to use the dwrproxy's reader.

srvrv12
16 May 2007, 8:00 PM
I use the dwrproxy's reader, but the ComboBox not working , it is always loading....:-/

my code


var LayoutExample = function(){
// everything in this space is private and only accessible in the HelloWorld block

// define some private variables
var dialog, showBtn, ccStore;

var toggleTheme = function(){
Ext.get(document.body, true).toggleClass('ytheme-gray');
};
// return a public interface
return {
init : function(){
showBtn = Ext.get('show-dialog-btn');
// attach to click event
showBtn.on('click', this.showDialog, this);

// create the Data Store
var ccType = Ext.data.Record.create([
{name: "ccId", type: "int"},
{name: "ccName", type: "string"}
]);
ccStore = new Ext.data.Store({
proxy: new Ext.data.DWRProxy(CourseStuReport.getCcList, true),
reader: new Ext.data.ObjectReader(
{id:'ccId'}, ccType),
remoteSort: true
})
ccStore.load();
},

showDialog : function(){
if(!dialog){ // lazy initialize the dialog and only create it once
dialog = new Ext.LayoutDialog("hello-dlg", {
resizable: true,
modal:true,
width:650,
height:400,
shadow:true,
minWidth:300,
minHeight:300,
proxyDrag: true,
center: {
autoScroll:true,
tabPosition: 'top',
closeOnTab: true,
alwaysShowTabs: false
}
});
dialog.addKeyListener(27, dialog.hide, dialog);
//dialog.addButton('new', this.newDialog, dialog);
//dialog.addButton('Close', dialog.hide, dialog);

Ext.QuickTips.init();

// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';

var fs = new Ext.form.Form({
labelAlign: 'right',
labelWidth: 75
});

fs.fieldset(
{legend:'Contact Information'},
new Ext.form.TextField({
fieldLabel: 'First Name',
id:'fir',
name: 'first',
autoCreate: {tag: "input", type: "text", value: "123123", size: "20", autocomplete: "off"},
width:190
}),

new Ext.form.TextField({
fieldLabel: 'Last Name',
id:'las',
name: 'last',
width:190
}),

new Ext.form.TextField({
fieldLabel: 'Company',
id:'com',
name: 'company',
width:190
}),

new Ext.form.TextField({
fieldLabel: 'Email',
id:'emai',
name: 'email',
vtype:'email',
width:190
}),

new Ext.form.ComboBox({
fieldLabel: 'State',
id:'stat',
hiddenName:'ccName',
store: ccStore,
displayField:'ccName',
typeAhead: true,
triggerAction: 'all',
emptyText:'Select a state...',
selectOnFocus:true,
width:190
}),

new Ext.form.DateField({
fieldLabel: 'Date of Birth',
id:'dobs',
name: 'dob',
width:190,
format : 'Y-m-d',
//autoCreate: {tag: "input", type: "text", value: 'sdv', size: "20", autocomplete: "off"},
allowBlank:false
})
);

//fs.findField('dob').format = 'Y-m-d';
//fs.findField('dob').setValue('2006-5-4');


fs.addButton('Save',function (){
var first = fs.items.get('fir').getValue();
//var first = fs.findField('first').getValue();
var last = fs.findField('last').getValue();
var company = fs.findField('company').getValue();
var email = fs.findField('email').getValue();
var state = fs.findField('state').getValue();
var dob = fs.findField('dob').getValue();

//alert(first + ', ' + last + ', ' + company + ', ' + email + ', ' + state + ', ' + dob);
dialog.destroy();
fs.reset();
}, this);

fs.addButton('Cancel', function(){
//alert(fs.fieldset);
fs.findField('first').setValue('456456');
fs.findField('state').setValue('Alaska');
fs.findField('dob').format = 'Y/m/d';
fs.findField('dob').setValue('2007/8/4');
dialog.destroy();

}, this);

fs.render('form-ct3');

var layout = dialog.getLayout();
layout.beginUpdate();
layout.add('center', new Ext.ContentPanel('form-ct3'));
layout.endUpdate();

}

dialog.show(showBtn.dom);
}
};
}();

// using onDocumentReady instead of window.onload initializes the application
// when the DOM is ready, without waiting for images and other resources to load
Ext.EventManager.onDocumentReady(LayoutExample.init, LayoutExample, true);

Animal
16 May 2007, 11:28 PM
Set a breakpoint at this line:



result = dwr.reader.read(response);


and see what "response" contains, and then step into the read() method.

heaven
17 May 2007, 7:53 AM
change


this.func.call(this, arg, {
callback: this.loadResponse,
exceptionHandler: this.failure,
});
},

to


this.func.call(this.arg, {
callback: this.loadResponse,
exceptionHandler: this.failure,
});
},

it will works ...

srvrv12
17 May 2007, 9:42 AM
Hello heaven

Can you post your code,
I change this.arg
i still can't run it, and IE6 have error : [Object not support this]
~~~thanks~~

heaven
17 May 2007, 5:19 PM
and the another diffrent is I use the ObjectReader not JsonReader,


store = new Ext.data.Store({
proxy: new Ext.data.DWRProxy(globalManager.getCountryList),
reader: new Ext.data.JsonReader({id: 0}, [
{name: 'key', mapping: 0},
{name: 'value', mapping: 1},
])
});
so the code should be

store = new Ext.data.Store({
proxy: new Ext.data.DWRProxy(globalManager.getCountryList),
reader: new Ext.data.ObjectReader({id: 'id'}, [
{name: 'key', mapping: 'key'},
{name: 'value', mapping: 'value'},
])
});