关于textjs的tree带复选框的树

通过查阅一些资料和自己之前了解到的一些相关知识，有时项目中需要用到。话不多说，先看一下效果图：

我写的这人员选择的树，主要是改写了TreePanel,如下代码：

ExtendTreePanel.js (该文件中可以写一些触发事件)

Ext.namespace('Ext.ysq');//Ext.namespace方法定义一个管理类的包，类似Java中定义的包名，目的是建立自己的一个对象名，方便管理，防止重复
Ext.ysq.ExtendTreePanel = Ext.extend(Ext.tree.TreePanel,{
    initComponent:function(){
        this.addEvents(//自定义事件
            'nodechecked'
        );

        this.addListener({
            checkchange:{//当一个带有复选框的节点的复选框选中状态发生变化时触发
                fn:function(node,checked){
                    if(!node.loaded){//子节点是否加载
                        node.expand();
                    }
                    this.selectChildNodes(node,checked);//选定子节点

                    if(node.parentNode){//是否为父节点
                        this.selectParentNodes(node,checked);//是否选定父节点
                    }
                },
                scope:this
            }
        });
        Ext.ysq.ExtendTreePanel.superclass.initComponent.call(this);//直接调用父类的构造函数,或者一些属性
    },
    selectChildNodes:function(Node,checked){
        Node.eachChild(function(node){
            node.attributes.checked = checked;
            node.getUI().toggleCheck(checked);
            if(!node.leaf){
                if(!node.loaded){
                    node.expand();
                }
                this.selectChildNodes(node,checked);
            }
        },this);
    },
    selectParentNodes:function(Node,checked){//判断父节点选中，子节点全部被选中
        Node.eachChild(function(node){
          node.getUI().toggleCheck(checked);
        },this);
    }
});    

所需要展示的信息树：
ExtendTreeTest.js:

var extPanel = new Ext.ysq.ExtendTreePanel({
          title:'选择人员信息',
          titleCollapse:false,
          useArrows:true,
          root:new Ext.tree.AsyncTreeNode({
            id:'rootNode',
            checked:false,
            allowDrag:false,
            //expanded: true,  //从该节点开始，展开节点（不级联到下一节点）
            leaf:false,
            icon:'./image/im16x16.gif',
            expandable:true,
            lines:true,//节点之间连接的横竖线
            //animate : true,//设置为true以启用展开/收缩时的动画效果
            singleClickExpand:true,//用单击文本展开,默认为双击
            loader: new Ext.tree.TreeLoader(),
            text:'通讯录信息',
            children:[
                        {text:'城建办',
                         leaf:false,
                         icon:'./image/im16x16.gif',
                         checked:false,
                         children:[
                               {
                                text:'李昆学',
                                leaf:true,
                                icon:'./image/user_suit.gif',
                                checked:false
                              },
                              {
                                text:'张馨文',
                                leaf:true,
                                icon:'./image/user_suit.gif',
                                checked:false
                              }
                             ]
                        },
                        {text:'总工会',
                         leaf:false,
                         icon:'./image/im16x16.gif',
                         checked:false,
                         children:[
                              {
                                text:'黄海成',
                                leaf:true,
                                icon:'./image/user_suit.gif',
                                 checked:false
                             },
                             {
                                text:'徐进新',
                                leaf:true,
                                icon:'./image/user_suit.gif',
                                 checked:false
                             }
                            ]
                        }
                     ]
          })
      });

      var win =  new Ext.Window({
            title:'人员选择窗口',
            width:420,
            height:380,
            frame:true,
            border:false,
            layout:'fit',
            buttonAlign:'center',
            draggable:false,
            closable:false,
            modal:true,
            items:[extPanel],
            buttons : [{
                text : '传阅',
                handler : function() {

                }
            }, {
                text : '关闭',
                handler : function() {

                }}]
      });

/*var dealpanel = new Ext.Panel({
    border : false,
    title : '传阅人员',
    layout : 'fit',
    height : 380,
    width : 420,
    autoScroll : true,
    items : [extPanel]
});*/

Ext.onReady(function(){
    //Ext.QuickTips.init();
    //dealpanel.render("tab");
    win.show();
});

最后，附带一些有关tree中的配置属性：（这些都可以在api中查看，转载）

Extjs tree的相关方法及配置项

Ext.tree.TreePanel

      主要配置项：

            root：树的根节点。

            rootVisible：是否显示根节点，默认为true。

            useArrows：是否在树中使用Vista样式箭头，默认为false。

            lines：是否显示树线，默认为true。

            loader：树节点的加载器，默认为Ext.tree.TreeLoader。

            selModel：树的选择模式，默认为Ext.tree.DefaultSelectionModel。

            pathSeparator：树节点路径的分隔符，默认为“/”。

            singleExpand：是否一次只展开树中的一个节点，默认为true。

            requestMethod：请求方法，可选值有POST、GET。

            containerScroll：是否将树形面板注册到滚动管理器ScrollManager中。

      主要方法：

   collapseAll()：收缩所有树节点

  expandAll()：展开所有树节点

  getRootNode()：获取根节点

  getNodeById(String id)：获取指定id的节点

 expand( [Boolean deep], [Boolean anim], [Function callback], [Object scope] )展开panel的body以便让其变得可见

  expandPath( String path, [String attr], [Function callback] )展开当前TreePanel中的指定路

 getChecked( [String attribute], [TreeNode startNode] )获得选中的节点列表，或者被选中节点的某个指定的属性数组

 selectPath( String path, [String attr], [Function callback] ) 从树中选中所给路径的节点

 getSelectionModel()：返回此TreePanel使用的选择模型

 Ext.data.Node

     主要配置项：

            id：节点id

            leaf：当前节点是否为叶子节点 

      主要属性：

            id：节点id

            attributes：节点属性的集合

            parentNode：当前节点的父节点

            childNodes：当前节点所有子节点组成的数组

            firstChild：当前节点的第一个直接子节点，如果没有则为null值

            lastChild：当前节点的最后一个直接子节点，如果没有则为null值

            nextSibling：当前节点的下一个兄弟节点，如果没有则为null值

            previousSibling：当前节点的前一个兄弟节点，如果没有则为null值

  

      主要方法：

            a( Node/Array node )：追加新的子节点

       bubble( Function fn, [Object scope], [Array args] )：从当前节点开始向上迭代调用指定函数，如果指定函数返

回false则将终止迭代。

                  args：传入函数中的参数，默认为当前节点

            cascade( Function fn, [Object scope], [Array args] )：从当前节点开始向下迭代调用指定函数，如果指定函数返回false则将终止迭代。

            contains( Node node )：当前节点是否包含指定子节点。

      eachChild( Function fn, [Object scope], [Array args] )：迭代当前节点的所有子节点调用指定函数，如果指定函

数返回false则将终止迭代。

            findChild( String attribute, Mixed value )：查找具有指定属性的第一个子节点。

      findChildBy( Function fn, [Object scope] )：根据自定义函数查找第一个符合要求的子节点，如果自定义函数返回

true则说明匹配成功。

            getDepth()：取得当前节点的深度，根节点的深度为0

            getOwnerTree()：取得当前节点所在树。

            getPath( [String attr] )：取得当前节点对应的路径，这个路径在程序中可用于展开或者选择节点。

                   attr：用于查找路径的属性，默认为节点id

            hasChildNodes()：是否有子节点

            indexOf( Node node )：取得指定子节点的索引值，未找到返回-1。

            insertBefore( Node node, Node refNode )：在当前节点的指定子节点之前插入一个新的子节点。

                  node：要插入的新节点

            isAncestor( Node node )：判断指定节点是否为当前节点的父节点（可以是任何一级中的父节点）。

            isFirst()：是否为父节点的第一个子节点。

            isLast()：是否为父节点的最后一个子节点。

            isLeaf()：是否为叶子节点。

            item( Number index )：取得指定索引的子节点。

            remove()：从父节点中删除当前节点。

            removeChild( Node node )：删除当前节点的指定子节点。

            replaceChild( Node newChild, Node oldChild )：用新的子节点替换当前节点的指定子节点。

            sort( Function fn, [Object scope] )：用指定的排序函数为当前节点的子节点进行排序。 

 Ext.tree.TreeNode

      主要配置项：

            text：节点上的文本信息

            qtip：节点上的提示信息

            icon：节点图标对应的路径

            iconCls：应用到节点图标上的样式

            checked：当前节点的选择状态

                  true：在节点前显示一个选中状态的复选框

                  false：在节点前显示一个未选中状态的复选框

                  不指定该值：不显示任何复选框

            href：节点的连接属性，默认为#

            hrefTarget：显示节点连接的目标框架

            editable：是否允许编辑，默认为true

            expanded：是否展开节点，默认为false

            disabled：是否禁用节点，默认为false

            singleClickExpand：是否通过单击方式展开节点

            allowChildren：是否允许当前节点具有子节点，默认为true

            expandable：当不含子节点时，是否总显示一个加减图标，默认为false

            uiProvider：节点的UI类，默认为Ext.tree.TreeNodeUI

 

      主要属性：

            text：节点上的文本信息

            disabled：当前节点是否被禁用

  

      主要方法：

            collapse( [Boolean deep], [Boolean anim], [Function callback], [Object scope] )：收缩当前节点

            deep：是否级联收缩全部子节点

            collapseChildNodes( [Boolean deep] )：收缩所有子节点

            disable()：禁用当前节点

            enable()：启用当前节点

            ensureVisible( [Function callback], [Object scope] )：确保所有父节点都是展开的

            expand( [Boolean deep], [Boolean anim], [Function callback], [Object scope] )：展开当前节点

            expandChildNodes( [Boolean deep] )：展开所有子节点

            isExpanded()：当前节点是否展开

            isSelected()：当前节点是否被选中

            select()：选择当前节点

            setText( String text )：设置当前的文本

            toggle()：切换当前节点的展开和收缩状态

            unselect()：取消对当前节点的选择

            getUI()：取得节点的UI对象 

 Ext.tree.AsyncTreeNode

      主要配置项：

            loader：当前节点的树加载器，默认使用树中配置的树加载器

  

      主要方法：

            isLoaded()：当前节点是否已经加载数据

            reload( Function callback, [Object scope] )：重新加载节点数据，并调用回调函数 

 Ext.tree.TreeNodeUI

      主要方法：

            getAnchor()：从节点的UI中获取焦点的元素

            getIconEl()：获取图标的元素

            getTextEl()：获取文本节点

            addClass( String/Array className )：

            removeClass( String/Array className )：

            hide()：

            show()：

            isChecked()：取得节点的选择状态，如果当前节点没有复选框则函数返回false

            toggleCheck( Boolean (optional) )：设置节点复选框的选择状态

 

 Ext.tree.DefaultSelectionModel

      是TreePanel的默认选择模式，该模式一次只能选择树中的一个节点。

 

      主要方法：

            clearSelections()：清除对树中所有节点的选择

            getSelectedNode()：取得当前被选中的节点

            isSelected( TreeNode node )：节点是否被选中

            select( TreeNode node )：选中指定节点

            unselect( TreeNode node )：取消指定节点的选中状态

            selectNext()：选择当前被选节点的下一个节点

            selectPrevious()：选择当前被选节点的上一个节点

 Ext.tree.MultiSelectionModel

      是TreePanel的多选择模式，该模式一次可以选择树中的多个节点。

 

      主要方法：

            clearSelections()：清除所有节点的选中状态

            getSelectedNodes()：取得被选节点组成的数组

            isSelected( TreeNode node )：节点是否被选中

            select( TreeNode node, [EventObject e], Boolean keepExisting )：选中指定节点

            unselect( TreeNode node )：取消指定节点的选中状态

 

Ext.tree.TreeLoader

      提供了对子节点的延时加载功能，请求指定的URL地址，返回子节点数据，返回的数据格式如下：

 [{id: 1,  text: "node1",  leaf: true, check: false      },    

  { id: 2, text: "node2",children: [{ id: 3,  text: "node3",  leaf: true}] } ]

  [ { id: 1, text: "node1", leaf: true, check: false }, { id: 2, text: "node2", children: [ { id: 3, text: "node3", leaf: true } ] }]

      树节点展开时，当前节点的id会作为请求参数被发送到服务器，在服务器可以通过node参数名进行获取。

 

      主要配置项：

            dataUrl：获取子节点的URL地址。

       baseAttrs：子节点的基本属性对象，该对象中的属性将被添加到树加载器创建的所有子节点上。优先服务器返回的同

名属性值。

            baseParams：基本的请求参数，这些参数会被附加到每一个节点的请求中。

            clearOnLoad：在加载前是否移除已存在的子节点，默认为true。

            preloadChildren：在第一次加载子节点后是否递归加载所有子节点。

            requestMethod：请求方法，可选值有POST、GET。

            uiProviders：加载器创建子节点的UI实现类。

            url：与dataUrl作用相同。

 

      主要方法：

            load( Ext.tree.TreeNode node, Function callback, (Object) scope )：从指定的URL加载树节点。

            node：需要加载子节点的树节点。

 

Ext.tree.TreeEditor

      主要配置项：

            alignment：对齐方式。

            editDelay：两次点击节点触发编辑操作的延时时间，默认为350毫秒。

            hideEl：在显示编辑器组件时是否隐藏绑定元素。

            maxWidth：编辑器的最大宽度，默认为250。

 

Ext.tree.TreeSorter

      主要配置项：

            property：用于排序的节点属性名，默认为text。

            dir：排序方向，可选值有asc、desc，默认为asc。

            caseSensitive：是否区分大小写，默认为false。

            folderSort：叶节点是否排在非叶节点之下，默认为false。

            leafAttr：叶子节点在folder排序时的值，默认为leaf。

            sortType：一个自定义函数用于在排序前转换节点值。