Extjs的DWRProxy

最新推荐文章于 2012-12-29 21:37:59 发布

原创最新推荐文章于 2012-12-29 21:37:59 发布 · 2.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#extjs #function #dataset #callback #null #string

本文介绍如何在ExtJS中集成Direct Web Remoting (DWR)，实现前后端交互。通过创建自定义的数据代理和对象读取器，可以方便地处理从服务器返回的数据。示例展示了配置Store以使用DWR进行数据加载的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

dwrproxy.js

Ext.data.DWRProxy = function(dwrCall, args) {
    Ext.data.DWRProxy.superclass.constructor.call(this);
    this.dwrCall = dwrCall;
    this.args = args;
};
Ext.extend(Ext.data.DWRProxy, Ext.data.DataProxy, {
    load : function(params, reader, callback, scope, arg) {
        if (this.fireEvent("beforeload", this, params) !== false) {
            var delegate = this.loadResponse.createDelegate(this, [reader,
                    callback, scope, arg], 1);
            var callParams = new Array();
            if (this.args && (this.args.length > 0))
                callParams = this.args.slice();
            if (params!=null){
                callParams.push(params);
            }
            callParams.push(delegate);
            this.dwrCall.apply(this, callParams);
        } else {
            callback.call(scope || this, null, arg, false);
        }
    },
    loadResponse : function(response, reader, callback, scope, arg) {
        var result;
        try {
            result = reader.read(response);
        } catch (e) {
            this.fireEvent("loadexception", this, null, response, e);
            callback.call(scope, null, arg, false);
            return;
        }
        callback.call(scope, result, arg, true);
    },
    update : function(dataSet) {
    },
    updateResponse : function(dataSet) {
    }
});
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 rootProp=this.meta ? this.meta.root : null;
        var totalProp=this.meta ? this.meta.totalProperty : null;
        
        var recordType = this.recordType, fields = recordType.prototype.fields;
        var records = [];
        var root = rootProp?response[rootProp]: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 : totalProp?response[totalProp]:records.length
        };
    }
});

js页面调用实例：

    var recordType = Ext.data.Record.create([{
        name : "id",
        type : "int"
    }, {
        name : "name",
        type : "string"
    }, {
        name : "birthday",
        mapping : "birthday",
        type : "date"
    }]);
    var ds = new Ext.data.Store({
        remoteSort:true,
        proxy : new Ext.data.DWRProxy(StudentService.getList),
        reader : new Ext.data.ObjectReader({
            id : 'id',
            root : 'data',
            totalProperty : 'total'
        },recordType)
    });