combotree的总结(这个好)

1：最近有这个需求，就是ext下的combo下拉是树，网上的例子很多，封装的也很好，基本都可以满足下拉框下出现想要的树，但是我的使用情况是比如在用户编辑的时候，要把用户已经选择过的数值自动再赋值到下拉框内，比如之前选择了id为5的节点，那么编辑用户的时候combo中自动显示这个值

2：网上发现这样的例子不多，有一个是iteye上面写的，地址为http://zxlaiye.iteye.com/blog/1310556。经过测试这个里面有几个问题所在，并且有几个作者也没有说明白杂用，经过修改可以用了。

3：发个实例代码：

new Ext.ux.ComboBoxTree({
     fieldLabel : '父菜单',
     hiddenName : 'testTreeName',
     value : 11,
     height : 180,
     width : 200,
     dataUrl : PATH
       + '/do.php?mod=util&action=query_parent_department_tree',
     nodePathUrl : PATH
       + '/do.php?mod=util&action=query_department_path&id=11',
     rootVisible : false,
     rootSelectable : false,
     showFullPath : false,
     allowBlank : false,
     emptyText : '请选择'
    })

其中hiddenName 是post过去的字段

dataUrl就是生成一般的树的路径了，这个都和平时一样，不一样的地方时多了个nodePathUrl，看这个我的例子中我给初始化的value为11，这个节点在我数据库中对应的父亲节点只推到最上的路径分别为/root/8/7/11  也就是说这个节点从刚才的路径利用treepanel的selectPath方法直接找到这个节点，然后把这个节点text对应到combo中，把value设置给name。之前这个问题是里面有个路径问题不可以找到，还有个地方时一个cu的函数的封装，cu函数就是请求nodePathUrl的。里面还有个问题是如果当前tree中没有root节点的话是对应不到的，总之我给修整好是可以用了，大家看源代码：

/**
 * 自定义下拉树，支持初始化值时自动定位树节点。 还没有考虑性能问题。继承自Ext.form.ComboBox也很浪费。
 * 代码中的cu.get()是自定义的异步请求方法。
 */
/*
 * 例子 new Ext.ux.ComboBoxTree({ fieldLabel:'父菜单', hiddenName: 'parentId', value:
 * this.modifyId ? '' : this.parentMenu.id, height: 180, dataUrl:
 * 'sys/menu/getMenus.do', 就是获取一般tree的url nodePathUrl:
 * 'sys/util/getEntityIdPath.do?c=sys.entity.Menu',获取需要默认选中的那个节点的路径parentId/parentId/.../被选中节点的id
 * root: {id:'root', text:'根菜单', expanded: true}, rootVisible: true,
 * rootSelectable: true, rootValue: null, showFullPath: true, allowBlank: false,
 * });
 */
/**
 * @author Linzongxue
 * @create_date 2011-12-13
 */
Ext.ux.ComboBoxTree = Ext.extend(Ext.form.ComboBox, {
    // 树的配置项
    dataUrl : null, // 获取树所有节点的url
    // 通过id获取某个节点的id全路径的url，返回值的格式应该是：parentId1/parentId2/parentId3/../节点id
    // 如果不设置这个值，下拉树不会自动定位节点并在初始化时显示文本
    nodePathUrl : null,
    loader : null,
    root : {},
    rootVisible : false,
    // 树的选择模式
    rootSelectable : false, // 根节点是否可选，默认为false
    folderSelectable : true, // 目录是否可选，默认为true
    leafSelectable : true, // 叶子是否可选，默认为true
    showFullPath : false, // 是否显示全路径
    rootValue : undefined, // 根节点的值（通常根节点的取值与普通节点的取值不一样，如果一样则不需要设置此值）
    // 原combo类的配置项
    store : new Ext.data.SimpleStore({
                fields : [],
                data : [[]]
            }),
    mode : 'local',
    triggerAction : 'all',
    editable : false,
    forceSelection : true,
    tree : null, // 树控件，在expand方法中初始化
    // private: 用于防止combo收缩，在树的事件中控制此属性值
    preventCollapse : false,

    initComponent : function() {
        this.treeId = Ext.id();
        this.height = this.height || 200;
        this.tpl = String.format(
                '<tpl for="."><div id="{0}" style="height:{1}px"></div></tpl>',
                this.treeId, this.height);
        Ext.ux.ComboBoxTree.superclass.initComponent.call(this);
    },
    setValue : function(value) {
        if (Ext.isObject(value)) { // 点击树节点时的选择
            this.doSetValue(value);
        } else { // 只是设置一个值，从后台获取这个值的路径，并在树中选中这个节点
            if (!this.tree)
                this.initTree();

            if (value === this.tree.root.id
                    || (Ext.isDefined(this.rootValue) && value === this.rootValue)) { // 根节点
                this.tree.root.select();
                this.doSetValue(this.root);
                return;
            }
            var url = this.nodePathUrl;
            if (!url) {
                this.doSetValue({
                            id : value
                        });
                return;
            }
            Ext.Ajax.request({
                        url : url,
                        async : false,
                        scope : this,
                        success : function(resp, opts) {
                            var comboTree = this;
                            path = resp.responseText;
                            path = (path.indexOf('/') == 0 ? '' : '/')
                                    +comboTree.tree.root.id+'/'+ path;
                            this.tree.selectPath(path, 'id', function(success,
                                            node) {
                                        comboTree.doSetValue(success
                                                ? node
                                                : null);
                                    });
                        },
                        faliure : function() {
                            alert(3)
                        }
                    });
            /*
             * cu.get(url, {id: value}).done(function(path){//从后台发起请求获取id路径 path =
             * '/' + this.root.id + (path.indexOf('/') == 0 ? '' : '/') + path;
             * var comboTree = this; this.tree.selectPath(path, 'id',
             * function(success, node){ comboTree.doSetValue(success ? node :
             * null); }); }, this);
             */
        }
    },
    // private:设置值，参数value应该是一个对象
    doSetValue : function(value) {
        var id = value ? value.id : '';
        var text = value ? value.text : '';
        if (value && (value.loader || value.attributes)) { // 是树节点
            var isRootNode = (value.id == this.tree.root.id);
            if (isRootNode && Ext.isDefined(this.rootValue)) {
                id = this.rootValue;
            }
            if (this.showFullPath) {
                text = isRootNode ? '/' : value.getPath('text').replace(
                        '/' + this.tree.root.text, '');
            }
        }
        this.value = id;
        if (this.hiddenField) {
            this.hiddenField.value = id; // 设置表单域
        }
        this.lastSelectionText = text;
        this.el.dom.value = text; // 显示的值
        this.fireEvent('select', this, value);
    },
    getValue : function() {
        return Ext.isDefined(this.value) ? this.value : '';
    },
    // 取得选中的树节点
    getValueNode : function() {
        return this.tree
                ? this.tree.getSelectionModel().getSelectedNode()
                : null;
    },
    getText : function() {
        return this.lastSelectionText || '';
    },
    reload : function() {
        if (!this.tree)
            return;
        var node = this.tree.getSelectionModel().getSelectedNode();
        var path = node ? node.getPath() : null;
        this.tree.getLoader().load(this.tree.root, function() {
                    if (path) {
                        this.tree.selectPath(path);
                    }
                }, this);
        this.preventCollapse = true;
    },
    // private: 根据preventCollapse属性判断是否要收缩
    collapse : function() {
        if (this.preventCollapse) {
            this.preventCollapse = false;
            return;
        }
        Ext.ux.ComboBoxTree.superclass.collapse.call(this);
    },
    // private:
    expand : function() {
        Ext.ux.ComboBoxTree.superclass.expand.call(this);
        if (!this.tree) {
            this.initTree();
        }
    },
    // private:
    destroy : function() {
        if (this.tree && this.tree.rendered)
            this.tree.destroy();
        Ext.form.ComboBox.superclass.destroy.call(this);
    },
    // private
    initTree : function() {
        if (!this.list) { // 必须先初始化列表，在一开始就设置了combotree的值时尤其重要，发现这个问题花了半天时间
            this.initList();
        }
        // 设置this.preventCollapse=true，防止combo收缩
        var enableCollapse = function() {
            this.preventCollapse = false;
        };
        // 设置this.preventCollapse=false，允许combo收缩
        var disableCollapse = function() {
            this.preventCollapse = true;
        };
        this.tree = new Ext.tree.TreePanel({
                    renderTo : this.treeId,
                    useArrows : false,
                    autoScroll : true,
                    height : this.height, // 修复IE的bug
                    animate : true,
                    enableDD : false,
                    containerScroll : true,
                    border : false,
                    dataUrl : this.dataUrl,
                    loader : this.loader,
                    root : this.root,
                    rootVisible : this.rootVisible,
                    // bbar:[
                    // '->', {text: '刷新', handler: this.reload, iconCls:
                    // 'icon-refresh', scope: this} //由于宽度问题取消此功能
                    // ],
                    listeners : {
                        click : function(node) {
                            disableCollapse();
                            if (node == this.tree.root) { // 选中根节点
                                if (!this.rootSelectable)
                                    return;
                            } else if (!node.isLeaf()) { // 选中目录节点
                                if (!this.folderSelectable)
                                    return;
                            } else { // 选中叶子节点
                                if (!this.leafSelectable)
                                    return;
                            }
                            // 先选择节点，再设置value，让getNodeValue方法在select事件中取到正确的值
                            node.select();
                            this.setValue(node);
                            enableCollapse();
                        },
                        // 展开和收缩节点时防止combo收缩
                        beforeexpandnode : disableCollapse,
                        beforecollapsenode : disableCollapse,
                        beforeload : disableCollapse,
                        // 节点加载和展开后允许combo收缩
                        load : enableCollapse,
                        expandnode : enableCollapse,
                        scope : this
                    }
                });
    }
});
Ext.reg('combotree', Ext.ux.ComboBoxTree);