`
kjj
  • 浏览: 171623 次
  • 性别: Icon_minigender_1
  • 来自: 陕西
社区版块
存档分类
最新评论

Ext tree 结合dwr 调用后台数据

阅读更多
还是废话少说
需要dwr loader
引入js 类
  <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>



  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);
    }
  }
});


调用例子

    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
      }),


服务端代码
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 简单代码
   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的都明白

4
2
分享到:
评论

相关推荐

    DWR方式动态加载EXT.Tree

    接着,当树Panel初始化完成后,我们可以通过DWR调用服务器端的方法,将返回的JSON数据传递给TreePanel的`loadData`方法,或者在TreePanel的`loader`配置中指定的回调函数内处理数据,然后使用`expandNode`或`refresh...

    ext + dwr proxy

    4. **事件处理**:当EXT组件需要从服务器获取数据或者提交数据时,`dwrproxy.js`可能会定义对应的事件监听器和处理函数,触发DWR调用。 5. **错误处理**:为了增强用户体验,`dwrproxy.js`可能还包括了错误处理代码...

    ext 与 dwr 的结合

    4. **数据绑定**:EXTJS的数据绑定机制,如何将数据模型(Model)与视图(View)连接,以及DWR如何在后台处理数据并传递给前端。 5. **事件处理**:EXTJS的事件监听和触发机制,以及如何利用DWR事件在客户端和...

    spring+ext+dwr.rar_ext dwr_ext java_java 用户管理_spring e_spring ex

    总的来说,Spring+Ext+DWR的结合为开发者提供了一个高效、灵活的Web开发平台,使得我们可以快速构建出具有现代化用户界面和强大后台功能的应用。通过对这三个技术的熟练掌握和应用,开发者不仅可以提高开发效率,还...

    DWRExt Tree

    在“DWRExt Tree”中,DWR被用来实现在后台处理数据和逻辑,而Ext Tree负责在前端展示这些数据。当用户操作树形视图时(例如点击节点、添加或删除节点),Ext Tree会通过DWR发送一个JavaScript调用到服务器端。DWR...

    ssh+ext+json+dwr技术实现的动态树

    在本例中,DWR可能被用来在后台处理数据,然后通过JSON将结果返回给EXT JS的动态树组件,这样用户就能看到实时更新的树状结构,而无需整个页面刷新。 综上所述,这个项目展示了如何利用SSH框架搭建后端服务,EXT JS...

    dwr+ext的eclipse新工程

    【标题】"dwr+ext的eclipse新工程"是一个基于Eclipse开发的项目,它结合了Direct Web Remoting (DWR) 和Ext JS技术,主要用于构建富客户端Web应用程序。DWR是一种允许JavaScript与服务器端Java代码进行交互的库,而...

    Extjs Tree + JSON + Struts2 示例源代码

    ExtJS Tree + JSON + Struts2 示例源代码是结合了三种技术来实现一个动态的、交互式的树形数据展示的应用。这个示例中,ExtJS用于前端UI的构建,JSON作为数据交换格式,而Struts2则作为后端MVC框架处理请求和返回...

    extjs兼容dwr的代理和DWRTreeLoader

    例如,当用户展开树的一个节点时,DWRTreeLoader会自动调用DWR服务获取子节点数据,然后通过DWRProxy将结果返回给客户端,更新树的显示。 总结,ExtJS的DWRProxy和DWRTreeLoader提供了一种强大且高效的方式来利用...

    ext中store的各个应用

    在EXT JS这个强大的JavaScript框架中,Store是一个至关重要的组件,它负责管理数据,与服务器进行交互,并为Grid、Tree等视图提供数据源。本文将深入探讨EXT中Store的应用及其重要性。 首先,Store是EXT JS中数据层...

    ExtJS对Ajax的支持

    ##### 2.1 在Grid中使用DWR获取后台数据 在ExtJS的Grid控件中,可以利用DWR技术直接从服务器获取数据并填充网格。这涉及到创建一个DWR代理,该代理暴露Java方法供JavaScript调用,然后使用这些方法加载Grid的数据源...

    dwrproxy dwrtreeloader

    在DWR的帮助下,这个过程变得非常简单且高效,因为DWR能直接调用服务器端的方法来获取数据。 **5. 使用示例** 在实际开发中,假设你有一个服务器端的方法`getTreeData()`,返回一个包含树形结构的JSON对象。你可以...

    整合--Struts2为extjs提供server数据

    Extjs的`JsonReader`会解析这个响应,将数据绑定到Grid、Tree或其他组件中。 例如,在给出的部分内容中,我们可以看到一个使用`Ext.data.GroupingStore`的例子,它通过`HttpProxy`与服务器进行通信,配置了`url`...

    菜单树,包含右击菜单 项目直接把js 导入 如果写成动态读取数据库要将代码稍微改改.树状表包含右击菜单

    3. **DWR (Direct Web Remoting)**:这是一个Java框架,使得JavaScript可以直接调用Java方法,从而在客户端和服务器之间进行实时数据交换。在菜单树中,DWR可能被用来在用户选择特定菜单项时,执行服务器端的操作,...

Global site tag (gtag.js) - Google Analytics