简析 DWRProxy

//(代码系转载：)
Ext.namespace("Ext.ux.data");

/**
 * @class Ext.ux.data.DWRProxy
 * @extends Ext.data.DataProxy
 * @author loeppky
 * An implementation of Ext.data.DataProxy that uses DWR to make a remote call.
 * @constructor
 * @param {Object} config A configuration object.
 */
Ext.ux.data.DWRProxy = function(config) {
    Ext.apply(this, config);
    // necessary since the superclass doesn't call apply
    Ext.ux.data.DWRProxy.superclass.constructor.call(this);
};

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

    /**
	 * @cfg {Function} dwrFunction The DWR function for this proxy to call during load.
	 * Must be set before calling load.
	 */
    dwrFunction: null,

    /**
	 * @cfg {String} loadArgsKey Defines where in the params object passed to the load method
	 * that this class should look for arguments to pass to the "dwrFunction".
	 * The order of arguments passed to a DWR function matters.
	 * Must be set before calling load.
	 * See the explanation of the "params" parameter for the load function for further explanation.
	 */
    loadArgsKey: 'dwrFunctionArgs',

    /**
	 * Load data from the configured "dwrFunction",
	 * read the data object into a block of Ext.data.Records using the passed {@link Ext.data.DataReader} implementation,
	 * and process that block using the passed callback.
	 * @param {Object} params An object containing properties which are to be used for the request to the remote server.
	 * Params is an Object, but the "DWR function" needs to be called with arguments in order.
	 * To ensure that one's arguments are passed to their DWR function correctly, a user must either:
	 * 1. call or know that the load method was called explictly where the "params" argument's properties were added in the order expected by DWR OR
	 * 2. listen to the "beforeload" event and add a property to params defined by "loadArgsKey" that is an array of the arguments to pass on to DWR.
	 * If there is no property as defined by "loadArgsKey" within "params", then the whole "params" object will be used as the "loadArgs".
	 * If there is a property as defined by "loadArgsKey" within "params", then this property will be used as the "loagArgs".
	 * The "loadArgs" are iterated over to build up the list of arguments to pass to the "dwrFunction".
	 * @param {Ext.data.DataReader} reader The Reader object which converts the data object into a block of Ext.data.Records.
	 * @param {Function} callback The function into which to pass the block of Ext.data.Records.
	 * The function must be passed <ul>
	 * <li>The Record block object</li>
	 * <li>The "arg" argument from the load function</li>
	 * <li>A boolean success indicator</li>
	 * </ul>
	 * @param {Object} scope The scope in which to call the callback
	 * @param {Object} arg An optional argument which is passed to the callback as its second parameter.
	 */
    load: function(params, reader, loadCallback, scope, arg) {
        var dataProxy = this;
        if (dataProxy.fireEvent("beforeload", dataProxy, params) !== false) {
            var loadArgs = params[this.loadArgsKey] || params;
            // the Array or Object to build up the "dwrFunctionArgs"
            var dwrFunctionArgs = [];
            // the arguments that will be passed to the dwrFunction
            //dwr 用户参数
            //可以为  json 字符串 ，服务器再分析，或直接 字符串数组 ，利用dwr 处理参数对应
            if (loadArgs instanceof Array) {
                // Note: can't do a foreach loop over arrays because Ext added the "remove" method to Array's prototype.
                // This "remove" method gets added as an argument unless we explictly use numeric indexes.



                for (var i = 0; i < loadArgs.length; i++) {
                    dwrFunctionArgs.push(loadArgs[i]);
                }
            } else {
                // loadArgs should be an Object
                for (var loadArgName in loadArgs) {
                    dwrFunctionArgs.push(loadArgs[loadArgName]);
                }
            }

            //dwr 系统参数格式
            dwrFunctionArgs.push({
                callback: function(response) {
                    // call readRecords verses read because read will attempt to decode the JSON,
                    // but as this point DWR has already decoded the JSON.
                    //读取记录 ，请服务器返回json格式 ，这里reader为ext自带的 json reader
                    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);
        }
    }
});

 

store 流程

 

store.load {
    if(proxy) {
            proxy.load  {
                  callback:{
                     调用 reader 读取 返回数据 得到 records
                     调用store 的一个 回调函数，参数 records
                   }
            }
    }
}

store的回调函数 （records） {
          更新 界面,刷新数据
}

 

 

总结

• Store:最主要的对外交互接口，内部保存了一个数据集。
• Record:数据集里面的每一条记录。
• DataField: 定义了记录每个字段的schema。
• Proxy: 获取数据的代理。
• DataReader: 把代理读取的数据读入数据集。

Store的实现

• 内部用一个Ext .util.MixedCollection（既能够作为map进行索引，又能够作为list进行索引，并且更新数据时会触发事件，并且有一些其它功能的数据结构）作为数据集存放record。store实例的data域指向这个数据集。
• 通过proxy加载不同来源的数据，如http remote，memory data等等。
• 由于proxy加载过来的数据是异构的，所以通过不同DataReader的实现类来读入数据成为record。
• 当调用load方法时候，就会委托proxy去加载数据。
• 在data数据集中数据的数据，添加，修改，删除的时候触发事件。

Store数据加载流程简介

1. 实例化一个Proxy的实现proxy。
2. 实例化一个DataReader的实现reader。
3. 实例化一个Store对象store。设置store的proxy与reader。
4. 监听store的load事件或者datachange事件。
5. 调用store.load()
6. store.load会调用proxy的load方法来加载数据（各种DataSource）。并且把reader作为参数传入。
7. proxy的load方法加载完数据之后，调用传入的reader的read方法，并且把数据作为参数传入。
8. reader的read方法把异构数据读入成record数据集。
9. proxy把reader.read方法生成的record数据集作为参数，回调store。
10. store把数据集添加到或者替换原来的数据集。
11. 触发load事件，触发datachange事件。