Extjs combox 树组合框自定义

/** 
 * 韩飞 
 *  
 * @class TreeSelector 
 * @extends Ext.form.ComboBox 
 */ 
TreeSelector = Ext.extend(Ext.form.ComboBox, { 
    /** 
     * 回调函数,用于传递选择的id，text属性 
     *  
     * @type 
     */ 
    callback : Ext.emptyFn, 
    store : new Ext.data.SimpleStore({ 
                fields : [], 
                data : [[]] 
            }), 
    editable : false, 
    mode : 'local', 
    emptyText : "请选择部门", 
    allowBlank : false, 
    blankText : "必须输入!", 
    triggerAction : 'all', 
    maxHeight : 200, 
    anchor : '95%', 
    displayField : 'text', 
    valueField : 'id', 
    tpl : "<tpl for='.'><div style='height:200px'><div id='tree'></div></div></tpl>", 
    selectedClass : '', 
    onSelect : Ext.emptyFn, 
    /** 
     * 根的名字 
     *  
     * @type String 
     */ 
    rootText : '组织机构', 
    /** 
     * 树的请求地址 
     *  
     * @type String 
     */ 
    treeUrl : 'system/organization/loadOrganizationTrees.action', 
    tree : null, 
    initComponent : function() { 
 
        this.tree = new Ext.tree.TreePanel({ 
            height : 200, 
            scope : this, 
            autoScroll : true, 
            split : true, 
            root : new Ext.tree.AsyncTreeNode({ 
                        expanded : true, 
                        id:'o', 
                        text : this.rootText 
                    }), 
 
            loader : new Ext.tree.TreeLoader({ 
                        url : this.treeUrl 
 
                    }), 
            rootVisible : true 
                // , 
                /* 
                 * listeners : { scope : this, 'click' : function(node) {// 单击事件 
                 * if (node.id != null && node.id != '') { 
                 *  
                 * this.callback.call(this, node.id, node.text); 
                 *  
                 * this.collapse(); 
                 *  } } } 
                 */ 
            }); 
        var c = this; 
        /** 
         * 点击选中节点并回调传值 
         */ 
        this.tree.on('click', function(node) { 
                    if (node.id != null && node.id != '') { 
                        if (node.id != 'o') { 
                            c.callback.call(this, node.id, node.text); 
 
                            c.collapse(); 
                        }else{ 
                        Ext.Msg.alert("提示","此节点无效，请重新选择!") 
                        } 
 
                    } 
                }) 
 
        this.on('expand', function() { 
                    this.tree.render('tree'); 
                    this.tree.expandAll(); 
                }); 
 
        TreeSelector.superclass.initComponent.call(this); 
    } 

})

 

 

 

使用方法 new TreeSelector({callback:function(){  }})