注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

百鬼夜行

身是菩提树,心如明镜台,时时勤拂拭,勿使惹尘埃。

 
 
 

日志

 
 

TreeComboBox树形下拉框(解决了N级树节点的回显问题)  

2011-02-24 17:05:27|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
/**
 * @class CExt.form.TreeComboBox
 * @extends Ext.form.TriggerField 树形下拉列表
 * @constructor Creates a new TreeComboBox
 * @param {Object} config Configuration options
 * @xtype cetreecombo
 */
CExt.form.TreeComboBox = Ext.extend(Ext.form.TriggerField, {

    /**
     * @cfg {Integer} layerHeight 弹出层高度,默认400。
     */
    layerHeight: 260,

    /**
     * @cfg {Integer} layerWidth 弹出层宽度,默认为组件实际宽度。
     */

    /**
     * @cfg {Boolean} layerShadow 弹出层是否有阴影。
     */
    layerShadow: true,

    /**
     * @cfg {Boolean} multiSelection 是否可以多选。
     */
    multiSelection: false,

    /**
     * @cfg {Boolean} onlySelectLeaf 是否只能选择叶节点。
     */
    onlySelectLeaf: false,

    /**
     * @cfg {String} rawValueSeparator 返回值分隔符,默认','。
     */
    rawValueSeparator: ',',

    /**
     * @cfg {Boolean} enableHiddenField 启用隐藏域,默认启用。
     */
    enableHiddenField: true,

    /**
     * @cfg {String} hiddenName If specified, a hidden form field with this name is dynamically generated to store the
     * field's data value (defaults to the underlying DOM element's name). Required for the combo's value to
     * automatically post during a form submission. See also {@link #valueField}.
     * <p>
     * <b>Note</b>: the hidden field's id will also default to this name if {@link #hiddenId} is not specified. The
     * ComboBox {@link Ext.Component#id id} and the <tt>{@link #hiddenId}</tt> <b>should be different</b>, since no
     * two DOM nodes should share the same id. So, if the ComboBox <tt>{@link Ext.form.Field#name name}</tt> and
     * <tt>hiddenName</tt> are the same, you should specify a unique <tt>{@link #hiddenId}</tt>.
     * </p>
     */

    // private
    initComponent: function() {
        this.editable = false;
        if (this.enableHiddenField) {
            this.hiddenName = this.name;
        }
        CExt.form.TreeComboBox.superclass.initComponent.call(this);
    },

    // private
    onRender: function(ct, position) {
        CExt.form.TreeComboBox.superclass.onRender.call(this, ct, position);
        if (this.hiddenName) {
            this.hiddenField = this.el.insertSibling({
                tag: 'input',
                type: 'hidden',
                name: this.hiddenName,
                id: (this.hiddenId || this.hiddenName)
            }, 'before', true);

        }
        this.on("blur", function() {
            if (!this.inLayer) {
                this.collapse();
            }
        }, this);
        this.initTree();
    },

    // private
    initTree: function() {
        var zindex = this.getParentZIndex();
        var cls = 'x-combo-list';
        this.layer = new Ext.Layer({
            parentEl: Ext.getBody(),
            shadow: this.layerShadow,
            cls: [cls, this.layerClass].join(' '),
            constrain: false,
            zindex: (zindex || 12000) + 5
        });
        this.layer.on('mouseover', function() {
            this.inLayer = true;
        }, this);
        this.layer.on('mouseout', function() {
            this.inLayer = false;
            this.focus();
        }, this);
        this.layer.setWidth(this.layerWidth ? this.layerWidth : (this.width ? this.width : this.getEl().getWidth() + this.getTriggerWidth()));
        this.layer.setHeight(this.layerHeight);
        this.innerLayer = this.layer.createChild({
            cls: cls + '-inner'
        });
        var sm = null;
        var me = this;
        if (this.multiSelection) {
            sm = new Ext.tree.MultiSelectionModel({
                listeners: {
                    'selectionchange': function(t, ns) {
                        me.onViewClick(ns);
                    }
                }
            });
        } else {
            sm = new Ext.tree.DefaultSelectionModel({
                listeners: {
                    'selectionchange': function(t, n) {
                        me.onViewClick(n);
                    }
                }
            });
        }
        this.tree = new Ext.tree.TreePanel({
            applyTo: this.innerLayer,
            useArrows: true,
            autoScroll: true,
            animate: true,
            enableDD: false,
            containerScroll: true,
            rootVisible: false,
            border: false,
            header: false,
            dataUrl: this.dataUrl,
            loader: this.loader,
            selModel: sm,
            root: this.root || {
                nodeType: 'async'
            },
            listeners: {
                'beforeclick': function(n, e) {
                    if ((!n.isLeaf() && me.onlySelectLeaf) || me.multiSelection) {
                        return false;
                    }
                    return true;
                },
                'checkchange': function(n, c) {
                    if (c) {
                        me.selectById(n.id);
                    } else {
                        me.unselectById(n.id);
                    }
                },
                'load': function (){
                    this.tree.expandAll();
                    this.setValue(this.hiddenField.value);
                },
                scope: this
            },
            defaults: this.defaults,
            width: this.layer.getWidth(),
            height: this.layerHeight
        });
    },

    // private
    onViewClick: function(ns) {
        var val = null;
        if (this.multiSelection) {
            val = [];
            if (ns && ns.length > 0) {
                for (var i = 0; i < ns.length; i++) {
                    val.push(ns[i].id);
                    ns[i].getUI().toggleCheck(true);
                }
            }
        } else {
            this.collapse();
            if (ns) {
                val = ns.id;
            } else {
                val = '';
            }
        }
        if (this.enableHiddenField) {
            if (this.multiSelection) {
                this.hiddenField.value = val.join(',');
            } else {
                this.hiddenField.value = val;
            }
        }
        this.resetDisplayText();
    },

    // private
    getParentZIndex: function() {
        var zindex;
        if (this.ownerCt) {
            this.findParentBy(function(ct) {
                zindex = parseInt(ct.getPositionEl().getStyle('z-index'), 10);
                return !!zindex;
            });
        }
        return zindex;
    },

    /**
     * 获得是否已经展开
     * @return {Boolean}
     */
    isExpanded: function() {
        return this.layer && this.layer.isVisible();
    },

    /**
     * 收缩弹出层
     */
    collapse: function() {
        this.layer.hide();
    },

    /**
     * 展开弹出层
     */
    expand: function() {
        this.layer.alignTo(this.getEl());
        this.layer.show();
    },

    // private
    onTriggerClick: function() {
        if (this.readOnly || this.disabled) {
            return;
        }
        if (this.isExpanded()) {
            this.collapse();
            this.el.focus();
        } else {
            this.expand();
            this.el.focus();
        }
    },

    // private
    selectById: function(id) {
        var node = this.tree.getNodeById(id);
        if (node) {
            this.tree.selModel.select(node, null, this.multiSelection);
        }
    },

    // private
    unselectById: function(id) {
        var node = this.tree.getNodeById(id);
        if (node) {
            this.tree.selModel.unselect(node);
        }
    },

    // private
    resetDisplayText: function() {
        var text = '';
        if (this.multiSelection) {
            var selected = this.tree.selModel.getSelectedNodes();
            for (var i = 0; i < selected.length; i++) {
                text += selected[i].text + ',';
            }
            if (text.length > 0) {
                text = text.substring(0, text.length - 1);
            }
        } else {
            var selected = this.tree.selModel.getSelectedNode();
            if(selected){
                text = selected.text;
            }
        }
        if (this.rendered) {
            this.el.dom.value = (Ext.isEmpty(text) ? '' : text);
        }
    },

    setValue: function(val) {
        if (!val) {
            return;
        }
        if (this.multiSelection) {
            var selected = this.tree.selModel.getSelectedNodes();
            for (var i = 0; i < selected.length; i++) {
                this.tree.selModel.unselect(selected[i]);
            }
            if (Ext.isString(val)) {
                val = val.split(this.rawValueSeparator);
            }
            if (Ext.isArray(val)) {
                for (var i = 0; i < val.length; i++) {
                    this.selectById(val[i]);
                }
            }
        } else {
            var selected = this.tree.selModel.getSelectedNode();
            if (selected) {
                this.tree.selModel.unselect(selected);
            }
            this.selectById(val);
        }
        if (this.enableHiddenField) {
            var v = null;
            if (this.multiSelection) {
                this.hiddenField.value = val.join(',');
            } else {
                this.hiddenField.value = val;
            }
        }
        this.resetDisplayText();
        this.value = val;
        this.validate();
    },

    getValue: function() {
        var val = null;
        if (this.multiSelection) {
            val = [];
            var selected = this.tree.selModel.getSelectedNodes();
            for (var i = 0; i < selected.length; i++) {
                val.push(selected[i].id);
            }
        } else {
            var selected = this.tree.selModel.getSelectedNode();
            if (selected) {
                val = selected.id;
            }
        }
        return val;
    }
});
Ext.reg('cetreecombo', CExt.form.TreeComboBox);
  评论这张
 
阅读(3021)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018