论坛首页 → Web前端技术论坛 →

困惑已久的Ext中树的异步加载问题终于解决了

浏览 1808 次
锁定老帖子 主题：困惑已久的Ext中树的异步加载问题终于解决了
精华帖 (0) :: 良好帖 (1) :: 新手帖 (8) :: 隐藏帖 (0)
作者 正文
  • qinjingkai
  • 等级: 二星会员
  • 性别:
  • 文章: 128
  • 积分: 250
  • 来自: 广州
   发表时间：2009-03-09   最后修改：2009-03-12

    如题目所说，被这个问题困惑了很长时间；问题说来其实也很简单，就是在加载一棵树的时候不是马上加载所有节点的信息只是加载他的孩子节点的；由于之前用Ext中的树时候都是一次性加载的，所以遇到这个问题的时候，研究了一段时间，终于解决了；解决的过程不乏一些有趣的问题,刚开始的想法是要改写Ext自带的Js,也就是点了前面那个+或者-号之后执行什么样的事件函数,为此还专门研究 了Ext的源代码也难怪之前自己手写树型的时候都是这样弄的,这可能就是所谓的思维定势吧!问题的解决主要是因为看了一篇文章之后（http://www.dojochina.com/index.php?q=node/937） 突然来了灵感，在此对该文的作者表示感谢；看了这篇文章之后还是有些担心,比如担心一个节点会被加载多次;把代码写好之后才发现这样的担心其实是多余的,这些细节Ext全都帮我们封装好了,最是太High了;现总结如下：

 

1 前台页面代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>checkbox.html</title>
   
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="../scripts/ext/resources/css/ext-all.css">
    <script type="text/javascript" src="../scripts/ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../scripts/ext/ext-all.js"></script>
    <script type="text/javascript" src="../scripts/js/MultiComboBox.js"></script>

   
    <script type="text/javascript">
 
   
    Ext.onReady(function(){
            var root=new Ext.tree.AsyncTreeNode({
               id:'0',
               text:'root'
            });
           
            var data=new Ext.tree.TreeLoader({url:'tree.jsp'});
        
            var tree=new Ext.tree.TreePanel({
               renderTo:'test',
               root:root,
               loader:data,
               width:300
            });
            data.on('beforeload',function(treeLoader,node){
             
               this.baseParams.text=node.attributes.text;
            
            },data);
         });
      
        </script>

  </head>
 
  <body>
     <div id="test"></div>
  </body>
</html>

 

 

2  tree.jsp代码如下：

<%@ page language="java" import="java.util.*,test.Test1"
    pageEncoding="UTF-8"%>
<%@ page language="java" import="java.io.PrintWriter;"%>
<%
    System.out.println("到达了Tree.jsp");
    String text = request.getParameter("text");
    System.out.println("text---" + text);

    response.setContentType("text/x-json");

    PrintWriter outer = response.getWriter();
    if (text.equalsIgnoreCase("root")) {
        outer.print(Test1.rootChildren);

    }

    if (text.equalsIgnoreCase("1")) {
        outer.print(Test1.firstChildren);

    }

    if (text.equalsIgnoreCase("2")) {
        outer.print(Test1.secordChildren);

    }
    outer.flush();
    outer.close();
%>

 

有兴趣的朋友可以下载 地址拦中输入：http://localhost:8080/treeTest/test/tree.html 即可以看到效果

 
返回顶楼
         
  • leonelwong
  • 等级: 初级会员
  • 性别:
  • 文章: 376
  • 积分: 20
  • 来自: 广州(老家湖北襄樊)
   发表时间：2009-03-13  
不错，但是隐式对象out也是输出流，为什么要重新创建一个输出流呢，这样比较浪费资源啊，其实案例上的例子可以跑通，关键是JSP处理不能输出合法的格式导致的
返回顶楼
          回帖地址
0 请登录后投票
  • kyvin
  • 等级: 一星会员
  • 性别:
  • 文章: 66
  • 积分: 100
  • 来自: 福州
   发表时间：2009-03-13  
学习下 look下下 不过代码尽量还是用 code
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics