Extjs中的DwrProxy

官方论坛找到的确实可行的Proxy

Grid和Form Proxy

 1/**//**
 2 * http://extjs.com/forum/showthread.php?t=19529
 3 */
 4Ext.namespace("Ext.ux.data");
 5
 6/**//**
 7 * @class Ext.ux.data.DWRProxy
 8 * @extends Ext.data.DataProxy
 9 * @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
            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]);
                }
            }
            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.
                    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);
        }
    }
});

 

DWRTree Proxy

 

  1Ext.namespace('MyApp.tree'); 
  2 
  3/**//** 
  4 * @constructor 
  5 * @param {Object} config A config object 
  6 * @cfg dwrCall the DWR function to call when loading the nodes 
  7 */ 
  8
  9MyApp.tree.DWRTreeLoader = function(config) { 
 10  MyApp.tree.DWRTreeLoader.superclass.constructor.call(this, config); 
 11}; 
 12
 13Ext.extend(MyApp.tree.DWRTreeLoader, Ext.tree.TreeLoader, { 
 14/**//** 
 15 * Load an {@link Ext.tree.TreeNode} from the DWR service specified in the constructor. 
 16 * This is called automatically when a node is expanded, but may be used to reload 
 17 * a node (or append new children if the {@link #clearOnLoad} option is false.) 
 18 * @param {Object} node node for which child elements should be retrieved 
 19 * @param {Function} callback function that should be called before executing the DWR call 
 20 */ 
 21  load : function(node, callback) { 
 22    var cs, i; 
 23    if (this.clearOnLoad) { 
 24      while (node.firstChild) { 
 25        node.removeChild(node.firstChild); 
 26      } 
 27    } 
 28    if (node.attributes.children && node.attributes.hasChildren) { // preloaded json children 
 29      cs = node.attributes.children; 
 30      for (i = 0,len = cs.length; i<len; i++) { 
 31        node.appendChild(this.createNode(cs[i])); 
 32      } 
 33      if (typeof callback == "function") { 
 34        callback(); 
 35      } 
 36    }else if (this.dwrCall) { 
 37      this.requestData(node, callback); 
 38    }
 39  }, 
 40/**//** 
 41 * Performs the actual load request 
 42 * @param {Object} node node for which child elements should be retrieved 
 43 * @param {Function} callback function that should be called before executing the DWR call 
 44 */ 
 45  requestData : function(node, callback) { 
 46    var callParams = []; 
 47    var success, error, params, key; 
 48
 49    if (this.fireEvent("beforeload", this, node, callback) !== false) { 
 50
 51      success = this.handleResponse.createDelegate(this, [node, callback], 1); 
 52      error = this.handleFailure.createDelegate(this, [node, callback], 1); 
 53      params = this.getParams(node); 
 54
 55            // node id is no longer applied as method parameter - see #getParams 
 56      for (key in params) { 
 57        callParams.push(params[key]); 
 58      } 
 59
 60      callParams.push({callback:success, errorHandler:error}); 
 61      this.transId = true; 
 62      this.dwrCall.apply(this, callParams); 
 63    } else { 
 64      // if the load is cancelled, make sure we notify 
 65      // the node that we are done 
 66      if (typeof callback == "function") { 
 67        callback(); 
 68      } 
 69    } 
 70  }, 
 71   
 72   
 73/**//** 
 74 * Creates a new tree node. Node will be an AsyncTreeNode if node has children that might be loaded later 
 75 * @param {Object} attr attributes of this new node 
 76 */ 
 77  createNode : function(attr) { 
 78    if (this.baseAttrs) { 
 79      Ext.applyIf(attr, this.baseAttrs); 
 80    } 
 81    if (this.applyLoader !== false) { 
 82      attr.loader = this; 
 83    } 
 84    if (typeof attr.uiProvider == 'string') { 
 85      attr.uiProvider = this.uiProviders[attr.uiProvider] || eval(attr.uiProvider); 
 86    } 
 87
 88    return(attr.hasChildren ? 
 89           new MyApp.tree.AsyncTreeNode(attr) : 
 90           new Ext.tree.TreeNode(attr)); 
 91  }, 
 92
 93/**//** 
 94 * Override this to add custom request parameters. Default adds the node id as first and only parameter 
 95 */ 
 96  getParams : function(node) { 
 97    return {id:node.id}; 
 98  }, 
 99
/**//** 
 * Handles a sucessful response. 
 * @param {Object} response data that was sent back by the server that contains the child nodes 
 * @param {Object} node parent node to which child nodes will be appended 
 * @param {Function} callback callback that will be performed after appending the nodes 
 */ 
  handleResponse : function(response, node, callback) { 
    this.transId = false; 
    this.processResponse(response, node, callback); 
    this.fireEvent("load", this, node, response); 
  }, 

/**//** 
 * Handles load error 
 * @param {Object} response data that was sent back by the server that contains the child nodes 
 * @param {Object} node parent node to which child nodes will be appended 
 * @param {Function} callback callback that will be performed after appending the nodes 
 */ 
  handleFailure : function(response, node, callback) { 
    this.transId = false; 
    this.fireEvent("loadexception", this, node, response); 
    if (typeof callback == "function") { 
      callback(this, node); 
    } 
    throw "error during tree loading"; 
  }, 

/**//** 
 * Process the response that server sent back via DWR. 
 * @param {Object} response data that was sent back by the server that contains the child nodes 
 * @param {Object} node parent node to which child nodes will be appended 
 * @param {Function} callback callback that will be performed after appending the nodes 
 */ 
  processResponse : function(response, node, callback) { 
    var i, n, nodeCfg, nodeData, assetData, permissionData; 
    try { 
      for (i = 0; i<response.length; i++) { 
        nodeData = response[i]; 
        //IF YOUR SERVICE DOES NOT RETURN THE NODE DATA IN THE CORRECT FORMAT, CREATE A TREE NODE CONFIG OBJBECT HERE 
        /**//*  
        nodeCfg = { 
          expanded:     nodeData.someValue, 
          hasChildren:  nodeData.someValue, 
          id:           nodeData.id, 
          text:         nodeData.name, 
          type:         nodeData.type 
        } 
        n = this.createNode(nodeCfg); 
        */ 
         
        //otherwise, you can just pass the node data on to createNode 
        n = this.createNode(nodeData); 
         
        if (n) { 
          node.appendChild(n); 
        } 
      } 
      if (typeof callback == "function") { 
        callback(this, node); 
      } 
    } catch(e) { 
      this.handleFailure(response); 
    } 
  } 


});  


MyApp.tree.AsyncTreeNode = function(config) {
    MyApp.tree.AsyncTreeNode.superclass.constructor.call(this, config);
    //todo: I don't like this, why not just use Ext.apply or || or something?
    if (typeof config.hasChildren != "undefined"){
      this.hasChildren = config.hasChildren;
    }
};

Ext.extend(MyApp.tree.AsyncTreeNode, Ext.tree.AsyncTreeNode, {});