树状结构

//定义checkbox tree panel
   var tree_fav_panel = new Ext.tree.TreePanel({
   id:'tree_fav_panel',
   useArrows:true,
   border:false,
   autoScroll:true,
   animate:false,
   draggable:false,
   containerScroll:true,
   resizable:true,
   rootVisible:false,
    loader: new Ext.tree.TreeLoader({
     dataUrl:requestContextPath+'/favorite/favorite_getFavoriteAsyncCheckTreeJsonDatas.do',
        listeners:{
           beforeload:function(treeLoader,node){//载入数据之前传当前点击节点的选中状态，在后台传给其子节点的选中状态checked值设为与父节点一样的值
                this.baseParams.checkValue = node.attributes.checked;
           }
        }
    }),
    listeners:{
     checkchange:function(node,flag){//checkbox改变选中状态其子节点同时变化
            //alert(flag);
          node.attributes.checked = flag;
         if(node.hasChildNodes()){
          node.eachChild(function(child){
           child.ui.toggleCheck(flag);
           child.attributes.checked = flag;
           child.fireEvent('checkchange',child,flag);
          });
         }
       },
       dblclick:function(node,e){ //双击树节点 (双击文档题名则打开文档)
         if(node.isLeaf()){ //叶子节点即文档
          var docId = node.id;
          var docName = node.text;
          var url = requestContextPath + "/document/searchDocumentInfo.do?NoDecorate=1&docId=" + docId;
         var docpanelid = "document_detail_panel_id" + docId;

         //打开一个标签页面展示文档详情
         mainPanel.openUrl(url, docpanelid, docName);
         }
       }
    },
    root:{
     nodeType:'async',
     text:'收藏夹',
     draggable:false,
     id:''
    }
  });

后台部分相关代码：

 //设置子结点的checked属性与父节点级联
         String checkValue = request.getParameter("checkValue");
         boolean check = false;
         if("true".equals(checkValue)){
          check = true;
         }

        for (Iterator iter = list.iterator(); iter.hasNext(); ) {
                  FavoriteDocInfo ob = (FavoriteDocInfo) iter.next();
                     JSONObject jtemp = new JSONObject();
                      jtemp.put("text",ob.getDocName());
                      jtemp.put("id",ob.getDocId());
                      jtemp.put("type", "doc");
                      jtemp.put("leaf", true);
                     //设置checked属性，若创建不含有checkbox树，则直接注释该行
                      jtemp.put("checked", check);
        
                     jsonArray.add(jtemp);
                 }

        try {

            //返回到grid JSON数据
            HttpServletResponse response = this.getResponse();
            response.setHeader("Cache-Control", "no-cache");
            response.setContentType("application/x-json; charset=UTF-8");
            PrintWriter out = response.getWriter();

            StringBuffer bf = new StringBuffer();
       // System.out.println("======================"+jsonArray.toString());  
            bf.append(jsonArray.toString());
            //输出到页面
            out.write(bf.toString());

            //关闭输出流
            out.close();

        } catch (Exception ex) {
            ex.printStackTrace();
        }
        //返回到空白页
        return null;

A、声明事件监视器

声明事件即可通过listeners也可以通过下面的方式：
/* tree_fav_panel.on('checkchange', function(node, checked) {
                        node.expand();
                        node.attributes.checked = checked;
                        node.eachChild(function(child) {
                                    child.ui.toggleCheck(checked);
                                    child.attributes.checked = checked;
                                    child.fireEvent('checkchange', child,
                                            checked);
                                });
  }, tree_fav_panel);*/

B、重写事件，解决双击树节点会自动触发checkchange事件问题

 //重写事件，解决双击树节点会自动触发checkchange事件问题
  Ext.override(Ext.tree.TreeNodeUI, {
 onDblClick : function(e) {//重写双击事件
  e.preventDefault(); //禁用浏览器默认行为
  if (this.disabled) {
   return;
  }
  /*if (this.checkbox) { //注释掉其当双击时自动触发checkchange事件
   this.toggleCheck(); //将节点的选中状态设置为所给的值， 或者，如果没有传递值进来， 固定当前的选择状态。 如果节点没有渲染复选框，此方法没有作用。
  } */
  if (!this.animating && this.node.isExpandable()) { //双击非叶子节点进行展开或收缩节点
   this.node.toggle(); //固定住节点的收缩，展开状态
  }
   this.fireEvent("dblclick", this.node, e);
  }
 });

 

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/foamflower/archive/2010/03/12/5375523.aspx