Extjs:checkbox

最近正在学习Extjs，用到了2.X版本里提供了 带有checkbox的树这个功能，我自己应有的例子，效果图如下：

 js代码：

建立窗口main.js：

Ext.onReady(function() {
 Ext.QuickTips.init();

var tree = new Ext.tree.TreePanel({
       id : 'tree',
       width : 230,
       height : 250,
       autoScroll : true,
       animate : true,
       containerScroll : true,
       lines:true,//节点之间连接的横竖线
       rootVisible:false,//是否显示根节点
       root: new Ext.tree.AsyncTreeNode(),
       loader : new Ext.app.CubeLoader({
                   dataUrl:'tree.xml'
               })
      });

 var w = new Ext.Window({

          id : 'FilterWin',
          title : '维度成员选择',
          width : 250,
          height : 350,
          resize : false,
          closable : false,
          collapsible : true,
          constrainHeader:true,
           frame:true,
           tbar:[{
             xtype : 'button',
                            tooltip:{text:'全选'},
                            iconCls:'connect',
                            handler:function(){
                             var rootNode = Ext.getCmp('tree').getRootNode();                           
                             checkAllOrNone(rootNode,'all');

                            }
                        },
           '-',{
            icon:'images/none.jpg',
            cls:'x-btn-icon',
            tooltip:'全不选',
            handler:function(){
             var rootNode = Ext.getCmp('tree').getRootNode();
             checkAllOrNone(rootNode,'none');
            }
           },
           '-', {
            icon:'images/refresh.jpg',
            cls:'x-btn-icon',
            tooltip:'刷新',
            handler:function(){
             var tree = Ext.getCmp('tree');
             tree.body.mask('数据加载中……', 'x-mask-loading');
             tree.root.reload();
             tree.root.collapse(true, false);
             tree.root.expand(false,false,function(){ 
                                 tree.body.unmask();//全部展开之后让蒙版消失 
              });
            }
           }],

          items:[tree]
          
          });
          w.show();

)}

实现了全选，全不选，刷新功能。(扩展了TreeNodeUI)

TreeCheckNodeUI.js代码：

Ext.ux.TreeCheckNodeUI = function() {
    // 多选: 'multiple'(默认)
    // 单选: 'single'
    // 级联多选: 'cascade'(同时选父和子);'parentCascade'(选父);'childCascade'(选子)
    this.checkModel = 'multiple';
    // only leaf can checked
    this.onlyLeafCheckable = false;
    Ext.ux.TreeCheckNodeUI.superclass.constructor.apply(this, arguments);
};
Ext.extend(Ext.ux.TreeCheckNodeUI, Ext.tree.TreeNodeUI, {
            renderElements : function(n, a, targetNode, bulkRender) {
                var tree = n.getOwnerTree();
                this.checkModel = tree.checkModel || this.checkModel;
                this.onlyLeafCheckable = tree.onlyLeafCheckable || false;
                // add some indent caching, this helps performance when
                // rendering a large tree
                this.indentMarkup = n.parentNode ? n.parentNode.ui
                        .getChildIndent() : '';
                // var cb = typeof a.checked == 'boolean';
                var cb = (!this.onlyLeafCheckable || a.leaf);
                var href = a.href ? a.href : Ext.isGecko ? "" : "#";
                var buf = [
                        '

',
                        '',
                        this.indentMarkup,
                        "",
                        '',
                        '',
                        '                         a.hrefTarget ? ' target="' + a.hrefTarget + '"' : "",
                        '>',
                        n.text,
                        "

",
                        '

',
                        "

"].join('');
                var nel;
                if (bulkRender !== true && n.nextSibling
                        && (nel = n.nextSibling.ui.getEl())) {
                    this.wrap = Ext.DomHelper.insertHtml("beforeBegin", nel,
                            buf);
                } else {
                    this.wrap = Ext.DomHelper.insertHtml("beforeEnd",
                            targetNode, buf);
                }
                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];
                var index = 2;
                if (cb) {
                    this.checkbox = cs[2];
                    Ext.fly(this.checkbox).on('click',
                            this.onCheck.createDelegate(this, [null]));
                    index++;
                }
                this.anchor = cs[index];
                this.textNode = cs[index].firstChild;
            },
            // private
            onCheck : function() {
                this.check(this.toggleCheck(this.node.attributes.checked));
            },
            check : function(checked) {
                var n = this.node;
                n.attributes.checked = checked;
                this.setNodeIcon(n);
                this.childCheck(n, n.attributes.checked);
                this.parentCheck(n);
            },
            parentCheck : function(node) {
                var currentNode = node;
                while ((currentNode = currentNode.parentNode) != null) {
                    if (!currentNode.getUI().checkbox)
                        continue;
                    var part = false;
                    var sel = 0;
                    Ext.each(currentNode.childNodes, function(child) {
                                if (child.attributes.checked == 'all')
                                    sel++;
                                else if (child.attributes.checked == 'part') {
                                    part = true;
                                    return false;
                                }
                            });
                    if (part)
                        currentNode.attributes.checked = 'part';
                    else {
                        var selType = null;
                        if (sel == currentNode.childNodes.length) {
                            currentNode.attributes.checked = 'all';
                        } else if (sel == 0) {
                            currentNode.attributes.checked = 'none';
                        } else {
                            currentNode.attributes.checked = 'part';
                        }
                    }
                    this.setNodeIcon(currentNode);
                };
            },
            setNodeIcon : function(n) {
                if (n.getUI() && n.getUI().checkbox)
                    n.getUI().checkbox.src = 'js/images/'
                            + n.attributes.checked + '.gif';
            },
            // private
            childCheck : function(node, checked) {
                // node.expand(true,true);
                if (node.childNodes)
                    Ext.each(node.childNodes, function(child) {
                                child.attributes.checked = checked;
                                this.setNodeIcon(child);
                                this.childCheck(child, checked);
                            }, this);
            },
            toggleCheck : function(value) {
                return (value == 'all' || value == 'part') ? 'none' : 'all';
            }
        });

 动态加载树文件：tree.xml

 
 
  
  
 
 

所包含的图片：

全选：all.jpg ，全不选：none.jpg ，刷新：refresh.jpg ，

打勾：all.gif ，不打勾：none.gif ，半选：part.gif

 

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/weil001/archive/2009/03/20/4008016.aspx