Ext tree 结合dwr 调用后台数据

Ext tree 结合dwr 调用后台数据

关键字: ext dwr

还是废话少说
需要dwr loader
引入js 类

Html代码

1. <script type="text/javascript"  
2.     src="${base}ext/adapter/ext/ext-base.js"></script>  
3. <script type="text/javascript" src="${base}ext/ext-all.js"></script>  
4. <script type="text/javascript"  
5.     src="${base}ext/adapter/dwr/DWRTreeLoader.js"></script>  

  <script type="text/javascript"
			src="${base}ext/adapter/ext/ext-base.js"></script>
		<script type="text/javascript" src="${base}ext/ext-all.js"></script>
		<script type="text/javascript"
			src="${base}ext/adapter/dwr/DWRTreeLoader.js"></script>

<script type="text/javascript"
src="${base}ext/adapter/dwr/DWRTreeLoader.js"></script>

Javascript代码

1.   Ext.namespace("Ext.ux");   
2. /**  
3.  * @class Ext.ux.DWRTreeLoader  
4.  * @extends Ext.tree.TreeLoader  
5.  * @author Carina Stumpf  
6.  *  
7.  * DWRTreeloader loads tree nodes by calling a DWR service.  
8.  * Version 2.1  
9.  *  
10.  */  
11.   
12. /**  
13.  * @constructor  
14.  * @param cfg {Object} config A config object  
15.  *    @cfg dwrCall the DWR function to call when loading the nodes  
16.  */  
17.   
18. Ext.ux.DWRTreeLoader = function(config) {   
19.   Ext.ux.DWRTreeLoader.superclass.constructor.call(this, config);   
20. };   
21.   
22. Ext.extend(Ext.ux.DWRTreeLoader, Ext.tree.TreeLoader, {   
23. /**  
24.  * Load an {@link Ext.tree.TreeNode} from the DWR service.  
25.  * This function is called automatically when a node is expanded, but may be used to reload  
26.  * a node (or append new children if the {@link #clearOnLoad} option is false.)  
27.  * @param {Object} node node for which child elements should be retrieved  
28.  * @param {Function} callback function that should be called before executing the DWR call  
29.  */  
30.   load : function(node, callback) {   
31.     var cs, i;   
32.     if (this.clearOnLoad) {   
33.       while (node.firstChild) {   
34.         node.removeChild(node.firstChild);   
35.       }   
36.     }   
37.     if (node.attributes.children && node.attributes.hasChildren) { // preloaded json children   
38.       cs = node.attributes.children;   
39.       for (i = 0,len = cs.length; i<len; i++) {   
40.         node.appendChild(this.createNode(cs[i]));   
41.       }   
42.       if (typeof callback == "function") {   
43.         callback();   
44.       }   
45.     } else if (this.dwrCall) {   
46.       this.requestData(node, callback);   
47.     }   
48.   },   
49.   
50. /**  
51.  * Performs the actual load request  
52.  * @param {Object} node node for which child elements should be retrieved  
53.  * @param {Function} callback function that should be called before executing the DWR call  
54.  */  
55.   requestData : function(node, callback) {   
56.     var callParams;   
57.     var success, error, rootId, dataContainsRoot;   
58.   
59.     if (this.fireEvent("beforeload", this, node, callback) !== false) {   
60.   
61.       callParams = this.getParams(node);   
62.   
63.       success = this.handleResponse.createDelegate(this, [node, callback], 1);   
64.       error = this.handleFailure.createDelegate(this, [node, callback], 1);   
65.   
66.       callParams.push({callback:success, errorHandler:error});   
67.   
68.       this.transId = true;   
69.       this.dwrCall.apply(this, callParams);   
70.     } else {   
71.       // if the load is cancelled, make sure we notify   
72.       // the node that we are done   
73.       if (typeof callback == "function") {   
74.         callback();   
75.       }   
76.     }   
77.   },   
78.   
79. /**  
80.  * Override this to add custom request parameters. Default adds the node id as first and only parameter  
81.  */  
82.   getParams : function(node) {   
83.     return [node.id];   
84.   },   
85.   
86. /**  
87.  * Handles a successful response.  
88.  * @param {Object} childrenData data that was sent back by the server that contains the child nodes  
89.  * @param {Object} parent parent node to which the child nodes will be appended  
90.  * @param {Function} callback callback that will be performed after appending the nodes  
91.  */  
92.   handleResponse : function(childrenData, parent, callback) {   
93.     this.transId = false;   
94.     this.processResponse(childrenData, parent, callback);   
95.   },   
96.   
97. /**  
98.  * Handles loading error  
99.  * @param {Object} response data that was sent back by the server that contains the child nodes  
100.  * @param {Object} parent parent node to which child nodes will be appended  
101.  * @param {Function} callback callback that will be performed after appending the nodes  
102.  */  
103.   handleFailure : function(response, parent, callback) {   
104.     this.transId = false;   
105.     this.fireEvent("loadexception", this, parent, response);   
106.     if (typeof callback == "function") {   
107.       callback(this, parent);   
108.     }   
109.     console.log(e)("DwrTreeLoader: error during tree loading. Received response: " + response);   
110.   },   
111.   
112. /**  
113.  * Process the response that was received from server  
114.  * @param {Object} childrenData data that was sent back by the server that contains the attributes for the child nodes to be created  
115.  * @param {Object} parent parent node to which child nodes will be appended  
116.  * @param {Function} callback callback that will be performed after appending the nodes  
117.  */  
118.   processResponse : function(childrenData, parent, callback) {   
119.     var i, n, nodeData;   
120.     try {   
121.       for (var i = 0; i<childrenData.length; i++) {   
122.         var n = this.createNode(childrenData[i]);   
123.         if (n) {   
124.           n.hasChildren = childrenData[i].hasChildren;   
125.           parent.appendChild(n);   
126.         }   
127.       }   
128.   
129.       if (typeof callback == "function") {   
130.         callback(this, parent);   
131.       }   
132.     } catch(e) {   
133.       this.handleFailure(childrenData);   
134.     }   
135.   }   
136. });  

  Ext.namespace("Ext.ux");
/**
 * @class Ext.ux.DWRTreeLoader
 * @extends Ext.tree.TreeLoader
 * @author Carina Stumpf
 *
 * DWRTreeloader loads tree nodes by calling a DWR service.
 * Version 2.1
 *
 */

/**
 * @constructor
 * @param cfg {Object} config A config object
 *    @cfg dwrCall the DWR function to call when loading the nodes
 */

Ext.ux.DWRTreeLoader = function(config) {
  Ext.ux.DWRTreeLoader.superclass.constructor.call(this, config);
};

Ext.extend(Ext.ux.DWRTreeLoader, Ext.tree.TreeLoader, {
/**
 * Load an {@link Ext.tree.TreeNode} from the DWR service.
 * This function is called automatically when a node is expanded, but may be used to reload
 * a node (or append new children if the {@link #clearOnLoad} option is false.)
 * @param {Object} node node for which child elements should be retrieved
 * @param {Function} callback function that should be called before executing the DWR call
 */
  load : function(node, callback) {
    var cs, i;
    if (this.clearOnLoad) {
      while (node.firstChild) {
        node.removeChild(node.firstChild);
      }
    }
    if (node.attributes.children && node.attributes.hasChildren) { // preloaded json children
      cs = node.attributes.children;
      for (i = 0,len = cs.length; i<len; i++) {
        node.appendChild(this.createNode(cs[i]));
      }
      if (typeof callback == "function") {
        callback();
      }
    } else if (this.dwrCall) {
      this.requestData(node, callback);
    }
  },

/**
 * Performs the actual load request
 * @param {Object} node node for which child elements should be retrieved
 * @param {Function} callback function that should be called before executing the DWR call
 */
  requestData : function(node, callback) {
    var callParams;
    var success, error, rootId, dataContainsRoot;

    if (this.fireEvent("beforeload", this, node, callback) !== false) {

      callParams = this.getParams(node);

      success = this.handleResponse.createDelegate(this, [node, callback], 1);
      error = this.handleFailure.createDelegate(this, [node, callback], 1);

      callParams.push({callback:success, errorHandler:error});

      this.transId = true;
      this.dwrCall.apply(this, callParams);
    } else {
      // if the load is cancelled, make sure we notify
      // the node that we are done
      if (typeof callback == "function") {
        callback();
      }
    }
  },

/**
 * Override this to add custom request parameters. Default adds the node id as first and only parameter
 */
  getParams : function(node) {
    return [node.id];
  },

/**
 * Handles a successful response.
 * @param {Object} childrenData data that was sent back by the server that contains the child nodes
 * @param {Object} parent parent node to which the child nodes will be appended
 * @param {Function} callback callback that will be performed after appending the nodes
 */
  handleResponse : function(childrenData, parent, callback) {
    this.transId = false;
    this.processResponse(childrenData, parent, callback);
  },

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

/**
 * Process the response that was received from server
 * @param {Object} childrenData data that was sent back by the server that contains the attributes for the child nodes to be created
 * @param {Object} parent parent node to which child nodes will be appended
 * @param {Function} callback callback that will be performed after appending the nodes
 */
  processResponse : function(childrenData, parent, callback) {
    var i, n, nodeData;
    try {
      for (var i = 0; i<childrenData.length; i++) {
        var n = this.createNode(childrenData[i]);
        if (n) {
          n.hasChildren = childrenData[i].hasChildren;
          parent.appendChild(n);
        }
      }

      if (typeof callback == "function") {
        callback(this, parent);
      }
    } catch(e) {
      this.handleFailure(childrenData);
    }
  }
});

调用例子

Html代码

1. Ext.onReady(function() {   
2.  tree = new Ext.tree.TreePanel({   
3.   el:'left-div',   
4.   autoHeight:false,   
5.   rootVisible:true,   
6.   animate:false,   
7.   autoScroll:true,   
8.   selModel: new Ext.tree.MultiSelectionModel(),   
9.   title: '${login_user.localName}的文件',   
10.   loader: new Ext.ux.DWRTreeLoader({   
11.      dwrCall:filemanager.getMyFolderById   
12.   }),   
13.   
14.   root: new Ext.tree.AsyncTreeNode({           
15.      text: '我的上传目录',   
16.      hasChildren:true,   
17.      id:   'myroot'   //you could use a constant here or whatever fits best for your application   
18.   })   
19.     
20. ;  

    Ext.onReady(function() {
     tree = new Ext.tree.TreePanel({
      el:'left-div',
      autoHeight:false,
      rootVisible:true,
      animate:false,
      autoScroll:true,
      selModel: new Ext.tree.MultiSelectionModel(),
      title: '${login_user.localName}的文件',
      loader: new Ext.ux.DWRTreeLoader({
         dwrCall:filemanager.getMyFolderById
      }),

      root: new Ext.tree.AsyncTreeNode({        
         text: '我的上传目录',
         hasChildren:true,
         id:   'myroot'   //you could use a constant here or whatever fits best for your application
      })
     
  });

页面调用关键代码

loader: new Ext.ux.DWRTreeLoader({
         dwrCall:filemanager.getMyFolderById
      }),

服务端代码

Java代码

1. public class FileManager extends EntityManager {   
2.    ........   
3.    public List<Folder> getMyFolderById(String parentid) {   
4.         WebContext ctx = WebContextFactory.get();   
5.         User owner = (User) ctx.getSession().getAttribute(   
6.                 AppContextVar.LOGIN_USER);   
7.         if(owner==null)return null;   
8.         List<Folder> folders = null;         
9.         DetachedCriteria criteria = DetachedCriteria.forClass(Folder.class);   
10.         criteria.add(Restrictions.eq("owner", owner.getName()));   
11.         criteria.add(Restrictions.eq("parent", parentid));   
12.         folders = hibernate.findByCriteria(criteria);   
13.         return folders;   
14.     }     
15.   .........   
16. }  

public class FileManager extends EntityManager {
   ........
   public List<Folder> getMyFolderById(String parentid) {
		WebContext ctx = WebContextFactory.get();
		User owner = (User) ctx.getSession().getAttribute(
				AppContextVar.LOGIN_USER);
		if(owner==null)return null;
		List<Folder> folders = null;		
		DetachedCriteria criteria = DetachedCriteria.forClass(Folder.class);
		criteria.add(Restrictions.eq("owner", owner.getName()));
		criteria.add(Restrictions.eq("parent", parentid));
		folders = hibernate.findByCriteria(criteria);
		return folders;
	}  
  .........
}

Folder 简单代码

Java代码

1.   public class Folder implements Serializable {   
2.   
3. private String id;   
4. private String text;   
5. private boolean leaf;   
6. private Timestamp createTime;      
7. private String parent;   
8. private String  owner;   
9. 。。。。。。。  

   public class Folder implements Serializable {

	private String id;
	private String text;
	private boolean leaf;
	private Timestamp createTime;	
	private String parent;
	private String  owner;
	。。。。。。。

dwr 相关配置我就不配置了，懂dwr的都明白