带CheckBox的Extjs ComboboxTree

实现效果如下：

Ext.onReady(function()
      {
          //自定义扩展一个带Tree的comboBox
          Ext.ux.LovTreeCombo = Ext.extend(Ext.form.ComboBox, {
          initList: function() {
              this.list = new Ext.tree.TreePanel({
                  floating: true,
                  autoHeight: false,
                  autoExpand: true,
                 height: ,
                 rootVisible: false,
                 containerScroll: true,
                 dataUrl: this.url,
                 root: {
                     nodeType: 'async',
                     text: 'root',
                     draggable: false,
                     id: 'root'
                 }
          ,

                 listeners: {
                     checkchange: this.onNodeCheckChange,
                     scope: this

                 },
                 useArrows: true,
                 alignTo: function(el, pos) {
                     this.setPagePosition(this.el.getAlignToXY(el, pos));
                 }
             });

         },

         expand: function() {
             if (!this.list.rendered) {
                 this.list.render(document.body);
                 this.list.setWidth("px");
                 this.innerList = this.list.body;
                 this.list.hide();
             }
             this.el.focus();
             Ext.ux.LovTreeCombo.superclass.expand.apply(this, arguments);
         },

         doQuery: function(q, forceAll) {
             this.expand();
         },

         collapseIf: function(e) {
             if (!e.within(this.wrap) && !e.within(this.list.el)) {
                 this.collapse();
             }
         },

         valueList: [],
         textList: [],

         getvalueList: function() {
             return this.valueList;
         },

         onNodeCheckChange: function(node, e) {
             if (!node.leaf) {
                 node.expand(true, false, function() {
                     node.eachChild(function(child) {
                         child.ui.toggleCheck(node.attributes.checked);
                         child.attributes.checked = node.attributes.checked;
                         child.fireEvent('checkchange', child, node.attributes.checked);
                     });

                 });

             }
             else {
                 //alert()
                 var nodeValue = node.id;
                 var test = this.valueList.indexOf(nodeValue);

                 if (test == - && node.attributes.checked) {
                     this.valueList.push(nodeValue)
                     this.textList.push(node.text);
                 }

                 if (test != - && !node.attributes.checked) {
                     this.valueList.remove(nodeValue);
                     this.textList.remove(node.text);
                 }

                 //if(window.console){console.log(this.valueList.toString())}共选择了'+this.valueList.length.toString()+'菜单：'+
                 var str = this.textList.toString();
                 this.setRawValue(str);

                 if (this.hiddenField) {
                     this.hiddenField.value = node.id;
                 }
             }
             //this.collapse();
        },
        url: '',
        reset: function() {

            this.valueList.length = ;
            this.textList.length=;
            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 lovTreeCombo = new Ext.ux.LovTreeCombo({
    id:'cmb',
    renderTo: 'cmb',
    url: 'LoadTreeMenu.aspx ',
    emptyText: '选择类型',
    width: ,
    listWidth:
    });

    })

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索function
， this
， node
， checked
， valuelist
， getui
， ComboBoxTree
Attributes
extjs comboboxtree、extjs tree checkbox、extjs4 tree checkbox、combobox checkbox、combobox添加checkbox，以便于您获取更多的相关知识。