Ext CheckTreeNode Example

实例：


实例是模仿dhtmlxTree的
在render中主要添加了这一行'<img src="', a.isCheck ? "/images/tc/iconCheckAll.gif" : "/images/tc/iconUnCheckAll.gif",'" class="x-tree-ec-icon">',
再获取这个节点 this.ckNode = cs[2];
在initEvents中添加该节点的事件：
E.on(this.ckNode, "click", this.ckClick, this, true);
很简单！

Ext.tree.TreeNodeUI.prototype.initEvents = function(){
        this.node.on("move", this.onMove, this);
        var E = Ext.EventManager;
        var a = this.anchor;
        var el = Ext.fly(a);
        if(Ext.isOpera){ // opera render bug ignores the CSS
            el.setStyle("text-decoration", "none");
        }
        el.on("click", this.onClick, this);
        el.on("dblclick", this.onDblClick, this);
        el.on("contextmenu", this.onContextMenu, this);
        var icon = Ext.fly(this.iconNode);
        icon.on("click", this.onClick, this);
        icon.on("dblclick", this.onDblClick, this);
        icon.on("contextmenu", this.onContextMenu, this);
        E.on(this.ecNode, "click", this.ecClick, this, true);
        E.on(this.ckNode, "click", this.ckClick, this, true);
        if(this.node.disabled){
            this.addClass("x-tree-node-disabled");
        }
        if(this.node.hidden){
            this.addClass("x-tree-node-disabled");
        }
        var ot = this.node.getOwnerTree();
        var dd = ot.enableDD || ot.enableDrag || ot.enableDrop;
        if(dd && (!this.node.isRoot || ot.rootVisible)){
            Ext.dd.Registry.register(this.elNode, {
                node: this.node,
                handles: [this.iconNode, this.textNode],
                isHandle: false
            });
        }
    };

    Ext.tree.TreeNodeUI.prototype.ckClick = function(e){
        if(!this.animating && this.node.hasChildNodes()){
            this.node.expand();
        }
        this.updateCheckIcon();
    };

    Ext.tree.TreeNodeUI.prototype.updateCheckIcon = function(){
        if(this.node.attributes.isCheck)
        {
            this.ckNode.src="/images/tc/iconUnCheckAll.gif";
            this.node.attributes.isCheck=false;
            this.updateFCUNCheckIcon(this.node.parentNode);//只能放在上一句的后面
            this.updateCCUNCheckIcon(this.node.childNodes);
        }
        else
        {
            this.ckNode.src="/images/tc/iconCheckAll.gif";
            this.node.attributes.isCheck=true;
            this.updateFCheckIcon(this.node.parentNode);//只能放在上一句的后面
            this.updateCCheckIcon(this.node.childNodes);//只能放在上一句的后面
        }
    };

    //更新父接点为选种
    Ext.tree.TreeNodeUI.prototype.updateFCheckIcon = function(pn){
        if(pn!=null)
        {
            pn.attributes.isCheck=true;
            pn.ui.ckNode.src="/images/tc/iconCheckAll.gif";
            this.updateFCheckIcon(pn.parentNode);
        }
    }
    //更新子节点为选种
    Ext.tree.TreeNodeUI.prototype.updateCCheckIcon = function(cn){
        if(cn!=null)
        {
           for(var i=0;i<cn.length;i++)
            {
                cn[i].attributes.isCheck=true;
                cn[i].ui.ckNode.src="/images/tc/iconCheckAll.gif";
                if(cn[i].hasChildNodes()){
                    cn[i].expand();
                    var temp=cn[i].childNodes;
                    this.updateCCheckIcon(cn[i].childNodes);
                }
            }
        }
    }

    //更新父接点为不�?�?
    Ext.tree.TreeNodeUI.prototype.updateFCUNCheckIcon = function(n){
        //如果有其它的兄弟接点未勾选掉。不更改父节�?
        var flag=true;
        if(n!=null)//如果是父节点，此处为空�?�?��要在这进行判�?
        {
            var nodes = n.childNodes;
            for(var i=0;i<nodes.length;i++)
            {
                if(nodes[i].attributes.isCheck)
                {
                    flag=false
                    break;
                }

            }
            if(n!=null && flag)
            {
                n.attributes.isCheck=false;
                n.ui.ckNode.src="/images/tc/iconUnCheckAll.gif";
                this.updateFCUNCheckIcon(n.parentNode);
            }
        }
    }

    //更新子接点为不�?�?
    Ext.tree.TreeNodeUI.prototype.updateCCUNCheckIcon = function(cn){
        if(cn!=null)
        {
           for(var i=0;i<cn.length;i++)
            {
                cn[i].attributes.isCheck=false;
                cn[i].ui.ckNode.src="/images/tc/iconUnCheckAll.gif";
                if(cn[i].hasChildNodes()){
                    cn[i].expand();
                    var temp=cn[i].childNodes;
                    this.updateCCUNCheckIcon(cn[i].childNodes);
                }
            }
        }
    }


Ext.tree.TreeNodeUI.prototype.render=function(bulkRender){
        var n = this.node;
        var targetNode = n.parentNode ?
              n.parentNode.ui.getContainer() : n.ownerTree.container.dom;
        if(!this.rendered){
            this.rendered = true;
            var a = n.attributes;

            // add some indent caching, this helps performance when rendering a large tree
            this.indentMarkup = "";
            if(n.parentNode){
                this.indentMarkup = n.parentNode.ui.getChildIndent();
            }

            var buf = ['<li class="x-tree-node"><div class="x-tree-node-el ', n.attributes.cls,'">',
                '<span class="x-tree-node-indent">',this.indentMarkup,"</span>",
                '<img src="', this.emptyIcon, '" class="x-tree-ec-icon">',
                '<img src="', a.isCheck ? "/images/tc/iconCheckAll.gif" : "/images/tc/iconUnCheckAll.gif",'" class="x-tree-ec-icon">',
                '<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',(a.icon ? " x-tree-node-inline-icon" : ""),'" unselectable="on">',
                '<a hidefocus="on" href="',a.href ? a.href : "#",'" tabIndex="1" ',
                 a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "", '><span unselectable="on">',n.text,"</span></a></div>",
                '<ul class="x-tree-node-ct" style="display:none;"></ul>',
                "</li>"];

            if(bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){
                this.wrap = Ext.DomHelper.insertHtml("beforeBegin",
                                    n.nextSibling.ui.getEl(), buf.join(""));
            }else{
                this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(""));
            }
            this.elNode = this.wrap.childNodes[0];
            this.ctNode = this.wrap.childNodes[1];
            var cs = this.elNode.childNodes;
            this.indentNode = cs[0];
            this.ecNode = cs[1];
            this.ckNode = cs[2];
            this.iconNode = cs[3];
            this.anchor = cs[4];
            this.textNode = cs[4].firstChild;
            if(a.qtip){
               if(this.textNode.setAttributeNS){
                   this.textNode.setAttributeNS("ext", "qtip", a.qtip);
                   if(a.qtipTitle){
                       this.textNode.setAttributeNS("ext", "qtitle", a.qtipTitle);
                   }
               }else{
                   this.textNode.setAttribute("ext:qtip", a.qtip);
                   if(a.qtipTitle){
                       this.textNode.setAttribute("ext:qtitle", a.qtipTitle);
                   }
               }
            }
            this.initEvents();
            //this.renderIndent(); cached above now instead call updateExpandIcon
            this.updateExpandIcon();
        }else{
            if(bulkRender === true) {
                targetNode.appendChild(this.wrap);
            }
        }
    };
//===============================================================================================================

Ext.onReady(function(){
    // shorthand
    <!-- 删除等待进度条�?-->
    Ext.get("loading").remove();
    var Tree = Ext.tree;
    var dh = Ext.DomHelper;

    var tree = new Tree.TreePanel('tree-div', {
        animate:true,
        loader: new Tree.TreeLoader({dataUrl:'/tree/getTreeJson'}),
        containerScroll: true
        //uiProvider: MyNodeUI
    });
    tree.on('contextmenu',contextmenu,tree);
    //tree.on('expand',insertCheckbox,tree);

    // set the root node
    var root = new Tree.AsyncTreeNode({
        text: 'Topic',
        draggable:false,
        isCheck:true,
        id:'1'
    });
    tree.setRootNode(root);
    //render the tree
    tree.render();
    var editor = new Ext.tree.TreeEditor(tree, {allowBlank: false});
    editor.setSize(5,5);
    //root.expand(true,false);
    //容许树可以编�?
    //var ge = new Ext.tree.TreeEditor(tree, {allowBlank:false,blankText:'A name is required',selectOnFocus:true});
    //创建右键菜单
    function contextmenu(node,e){
            e.stopEvent();
            //var temp=ds.getAt(node.id);
           // alert(temp.data.email);
            var menu = new Ext.menu.Menu({
            id: 'mainMenu',
            items: [
                new Ext.menu.Item({
                    text: '添加'
                }),
                new Ext.menu.Item({
                    text: '删除'
                }),
                new Ext.menu.Item({
                    text: '更新'
                }),
                new Ext.menu.Item({
                    text: '刷新'
                })
            ]
        });
        var coords = e.getXY();
        menu.showAt([coords[0], coords[1]]);
    };
});


//treeLoader.on('beforeload', function(loader,node,callback){
//  if(node.attributes.tlevel != 3){
//      loader.dataUrl ='../getChildTreeNodeJsonObject';
//          }else{
//              return false;
//          }
//      });