带CheckBox的 Extjs ComboboxTree

2年多不来博客园了，呵呵，很想念

N多人想用这个，以前项目用到了，代码如下

 实现效果如下：

 

  1Ext.onReady(function()
  2    {
  3        //自定义扩展一个带Tree的comboBox
  4        Ext.ux.LovTreeCombo = Ext.extend(Ext.form.ComboBox, {
  5        initList: function() {
  6            this.list = new Ext.tree.TreePanel({
  7                floating: true,
  8                autoHeight: false,
  9                autoExpand: true,
 10                height: 240,
 11                rootVisible: false,
 12                containerScroll: true,
 13                dataUrl: this.url,
 14                root: {
 15                    nodeType: 'async',
 16                    text: 'root',
 17                    draggable: false,
 18                    id: 'root'
 19                }
 20         ,
 21
 22                listeners: {
 23                    checkchange: this.onNodeCheckChange,
 24                    scope: this
 25
 26                },
 27                useArrows: true, 
 28                alignTo: function(el, pos) {
 29                    this.setPagePosition(this.el.getAlignToXY(el, pos));
 30                }
 31            });
 32
 33        },
 34
 35        expand: function() {
 36            if (!this.list.rendered) {
 37                this.list.render(document.body);
 38                this.list.setWidth("660px"); 
 39                this.innerList = this.list.body;
 40                this.list.hide();
 41            }
 42            this.el.focus();
 43            Ext.ux.LovTreeCombo.superclass.expand.apply(this, arguments);
 44        },
 45
 46        doQuery: function(q, forceAll) {
 47            this.expand();
 48        },
 49
 50        collapseIf: function(e) {
 51            if (!e.within(this.wrap) && !e.within(this.list.el)) {
 52                this.collapse();
 53            }
 54        },
 55
 56        valueList: [],
 57        textList: [],
 58
 59        getvalueList: function() {
 60            return this.valueList;
 61        },
 62
 63        onNodeCheckChange: function(node, e) {
 64            if (!node.leaf) {
 65                node.expand(true, false, function() {
 66                    node.eachChild(function(child) {
 67                        child.ui.toggleCheck(node.attributes.checked);
 68                        child.attributes.checked = node.attributes.checked;
 69                        child.fireEvent('checkchange', child, node.attributes.checked);
 70                    });
 71
 72                });
 73
 74            }
 75            else {
 76                //alert(1)
 77                var nodeValue = node.id;
 78                var test = this.valueList.indexOf(nodeValue);
 79
 80                if (test == -1 && node.attributes.checked) {
 81                    this.valueList.push(nodeValue)
 82                    this.textList.push(node.text);
 83                }
 84
 85                if (test != -1 && !node.attributes.checked) {
 86                    this.valueList.remove(nodeValue);
 87                    this.textList.remove(node.text);
 88                }
 89
 90                //if(window.console){console.log(this.valueList.toString())}共选择了'+this.valueList.length.toString()+'菜单：'+
 91                var str = this.textList.toString();
 92                this.setRawValue(str);
 93
 94
 95                if (this.hiddenField) {
 96                    this.hiddenField.value = node.id;
 97                }
 98            }
 99            //this.collapse();
        },
        url: '',
        reset: function() {

            this.valueList.length = 0;
            this.textList.length=0;
            this.applyEmptyText();

        },


        resetNode: function(node) {
            this.collapseNode(node);
            this.uncheckNode(node);
        },

        collapseNode: function(node) {
            if (node.isExpanded()) {
                node.collapse();
            }
        },

        uncheckNode: function(node) {

            if (node.getUI().isChecked()) {
                if (window.console) { console.log("未能选中此节点ID " + node.attributes.id) }

                node.getUI().toggleCheck(false);
            }
        }


    });
    
    //这边注册一下子
    Ext.reg('treecombo', Ext.ux.LovTreeCombo);

   //这边是使用方法
    var lovTreeCombo2 = new Ext.ux.LovTreeCombo({
    id:'cmb',
    renderTo: 'cmb',
    url: 'LoadTreeMenu.aspx ',
    emptyText: '选择类型',
    width: 660,
    listWidth: 180
    });
    
    })