Chinaunix首页 | 论坛 | 博客
  • 博客访问: 5604397
  • 博文数量: 669
  • 博客积分: 10821
  • 博客等级: 上将
  • 技术积分: 11750
  • 用 户 组: 普通用户
  • 注册时间: 2005-12-02 10:41
个人简介

大数据、ML、AI、云计算openstack、Linux、SpringCloud。

文章分类

全部博文(669)

分类: Web开发

2011-05-10 11:48:16

最近正在学习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

    阅读(3874) | 评论(0) | 转发(0) |
    给主人留下些什么吧!~~