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

百鬼夜行

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

 
 
 

日志

 
 

OptionField  

2010-12-16 17:08:29|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

/**
 * @class CExt.form.OptionField
 * @extends CExt.form.Field
 * Creates a new OptionField
 * @constructor
 * @param {Object} config Configuration options
 * @xtype ceoptionfield
 */
CExt.form.OptionField = Ext.extend(CExt.form.Field, {
    /**
     * @cfg {String}
     * blankText <p>Error text to display if the {@link #allowBlank} validation fails (defaults to "You must
     * select at least one item in this group")</p>
     */
    blankText: 'You must select at least one option in this field',

    /**
     * @cfg {Boolean} submitDisplay 提交显示内容或提交隐藏值,默认提交显示内容 Defaults to true
     */
    submitDisplay: true,

    /**
     * @cfg {Ext.data.Store} store
     * {@link Ext.data.Store} OptionField数据集.
     */

    /**
     * @cfg {String} displayField
     * <p>The underlying {@link Ext.data.Field#name data field name} to bind to this</p>
     * <p>OptionField (defaults to undefined)</p>
     * See also {@link #valueField}.
     */

    /**
     * @cfg {String} valueField
     * <p>The underlying {@link Ext.data.Field#name data value name} to bind to this</p>
     * <p>OptionField (defaults to undefined)</p>
     * See also {@link #displayField}.
     */

    /**
     * @cfg {Boolean/String} disableField
     * <p>store数据集中使OptionField项禁用的字段</p>
     * <p>The disableField bind to this OptionField (defaults to undefined)</p>
     * See also {@link #checkField}.
     */

    /**
     * @cfg {Boolean/String} checkField
     * <p>store数据集中使OptionField项默认选中的字段</p>
     * <p>The disableField bind to this OptionField (defaults to undefined)</p>
     * See also {@link #disableField}.
     */

    /**
     * @cfg {Boolean} checkSelModel True显示复选框列,false不显示复选框列 Defaults to true
     */
    checkSelModel: true,

    /**
     * @cfg {String} align 设置每行文本对齐方式,默认左对齐
     */
    align: 'left',

    /**
     * @cfg {String} cls OptionField样式,默认'x-form-optionfield'
     */
    cls: 'x-form-optionfield',

    /**
     * @cfg {String} disabledClass <p>OptionField禁用选项的样式,默认'x-form-optionfield-disable'</p>
     */
    disabledClass: 'x-form-optionfield-disable',

    /**
     * @cfg {Boolean} singleSelect
     * <p>单选开关,默认false为复选效果</p>
     * <p>True to allow selection of exactly one item at a time, false to allow no selection at all (defaults to false).</p>
     */

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

    /**
     * @cfg {Boolean} allowBlank
     * (Optional) Used for validating a {@link Ext.data.Record record}, defaults to true.
     * An empty value here will cause {@link Ext.data.Record}.{@link Ext.data.Record#isValid isValid}
     * to evaluate to false.
     */
    allowBlank: true,

    // private
    initComponent: function() {
        this.addEvents(
        /**
         * @event valuechange
         * <p>当选中状态改变时触发事件</p>
         * <p>Fires when the selected nodes change.</p>
         * @param {CExt.form.OptionField} this
         * @param {Array} selections 选中节点数组 Array of the selected nodes
         */
        "valuechange",

        /**
        * @event beforeselect
        * <p>选中前触发事件,返回false则取消选择事件的执行</p>
        * <p>Fires before a selection is made. If any handlers return false, the selection is cancelled.</p>
        * @param {CExt.form.OptionField} this
        * @param {HTMLElement} node 选中的HTML节点 The node to be selected
        * @param {Array} selections 当前选中节点数组 Array of currently selected nodes
        */
        "beforeselect");

        CExt.form.OptionField.superclass.initComponent.call(this);

        this.list = Ext.create({
            xtype: 'listview',
            store: this.store,
            displayField: this.displayField,
            valueField: this.valueField,

            simpleSelect: true,
            multiSelect: !this.singleSelect,
            singleSelect: this.singleSelect,

            hideHeaders: true,
            columns: this.checkSelModel ? [{
                cls: 'x-grid3-row-checker x-optionfield-checker'
            }, {
                dataIndex: this.displayField,
                align: this.align
            }] : [{
                dataIndex: this.displayField,
                align: this.align
            }]
        });

        this.list.disabledItems = new Ext.CompositeElementLite();

        this.hiddenName = this.name || this.id;
    },

    // private
    onRender: function(ct, position) {
        this.list.render(ct);
        this.el = this.list.getEl();

        this.hiddenField = this.el.insertSibling({
            tag: 'input',
            type: 'hidden',
            name: this.hiddenName,
            id: (this.hiddenId || this.hiddenName)
        }, 'before', true);

        Ext.apply(Ext.list.ListView.prototype, {
            doSingleSelection: function(item, index, e) {
                if (!this.disabledItems.contains(this.getNode(index))) {
                    if ((e.ctrlKey || this.simpleSelect) && this.isSelected(index)) {
                        this.deselect(index);
                        this.switchCheckedIcon(index);
                    } else {
                        var isDisableSelected = false;
                        for (var i = 0, len = this.disabledItems.getCount(); i < len; i++) {
                            if (this.isSelected(this.disabledItems.item(i))) {
                                isDisableSelected = true;
                                break;
                            }
                        }
                        if (!isDisableSelected) {
                            this.select(index, false);
                            this.switchCheckedIcon(index, true);
                        }
                    }
                }
            },
            doMultiSelection: function(item, index, e) {
                if (!this.disabledItems.contains(this.getNode(index))) {
                    if (e.shiftKey && this.last !== false) {
                        var last = this.last;
                        this.selectRange(last, index, true);
                        this.switchCheckedIcon(this.getNodes(last, index), true);
                        this.last = last;
                    } else {
                        if ((e.ctrlKey || this.simpleSelect) && this.isSelected(index)) {
                            this.deselect(index);
                            this.switchCheckedIcon(index);
                        } else {
                            this.select(index, e.ctrlKey || e.shiftKey || this.simpleSelect);
                            this.switchCheckedIcon(index, true);
                        }
                    }
                }
            },
            clearSelections: function(suppressEvent, skipUpdate) {
                if ((this.multiSelect || this.singleSelect) && this.selected.getCount() > 0) {
                    if (!skipUpdate) {
                        this.selected.removeClass(this.selectedClass);
                        for (var i = 0; i < this.selected.elements.length; i++) {
                            Ext.fly(this.selected.elements[i].firstChild.firstChild).removeClass('x-optionfield-checked');
                        }
                    }
                    this.selected.clear();
                    this.last = false;
                    if (!suppressEvent) {
                        this.fireEvent("selectionchange", this, this.selected.elements);
                    }
                }
            },
            getNodes: function(start, end) {
                var ns = this.all.elements;
                start = start || 0;
                end = !Ext.isDefined(end) ? Math.max(ns.length - 1, 0) : end;
                var nodes = [], i;
                if (start <= end) {
                    for (i = start; i <= end && ns[i]; i++) {
                        if (!this.disabledItems.contains(this.getNode(i))) {
                            nodes.push(ns[i]);
                        }
                    }
                } else {
                    for (i = start; i >= end && ns[i]; i--) {
                        if (!this.disabledItems.contains(this.getNode(i))) {
                            nodes.push(ns[i]);
                        }
                    }
                }
                return nodes;
            },
            //private
            switchCheckedIcon: function(nodeInfo, sl) {
                if (Ext.isArray(nodeInfo)) {
                    for (var i = 0, len = nodeInfo.length; i < len; i++) {
                        this.switchCheckedIcon(nodeInfo[i], true);
                    }
                } else {
                    if (this.fireEvent("beforeselect", this, this.getNode(nodeInfo), this.selected.elements) !== false) {
                        if (sl) {
                            Ext.fly(this.getNode(nodeInfo).firstChild.firstChild).addClass('x-optionfield-checked');
                        } else {
                            Ext.fly(this.getNode(nodeInfo).firstChild.firstChild).removeClass('x-optionfield-checked');
                        }
                    }
                }
            }
        });

        this.list.addListener('beforeselect', function(t, node, els) {
            return this.fireEvent('beforeselect', t, node, els);
        }, this);

        this.list.on('selectionchange', function(view, nodes) {
            this.fireEvent("valuechange", this, this.list.selected.elements);
            this.hiddenField.value = this.getRawValue();
            this.validate();
        }, this);
        CExt.form.OptionField.superclass.onRender.call(this, ct, position);
    },

    afterRender: function() {
        CExt.form.OptionField.superclass.afterRender.call(this);
        var la = this.list.all;
        for (var i = 0, len = la.getCount(); i < len; i++) {
            if (this.list.store.getAt(i).get(this.disableField)) {
                this.disableOptions(i);
            }

   (function (self) {
                if (self.list.store.getAt(i).get(self.checkField)) {
                    //单选模式但store数据中有多个checked项,则设置且只设置一项为checked
                    if (self.singleSelect && self.list.selected.getCount() > 0) {
                        return;
                    }
                    self.list.select(i, true);
                    self.list.switchCheckedIcon(i, true);
                }
            })(this);
        }
    },

    //private
    initValue: function() {
        CExt.form.OptionField.superclass.initValue.call(this);
        this.hiddenField.value = this.getRawValue();
    },

    /**
     * 得到选中节点的数量
     * Gets the number of selected nodes.
     * @return {Number} The node count
     */
    getSelectionCount: function() {
        return this.list.selected.getCount();
    },

    /**
     * 重置所有选中项
     * Clears all selections.
     * @param {Boolean} suppressEvent (optional)
     * <p>设置为true则不会触发selectionchange事件</p>
     * <p>True to skip firing of the selectionchange event</p>
     */
    reset: function(suppressEvent) {
        this.list.clearSelections(suppressEvent);
    },

    /**
     * 返回一个二维数组,包含每个选中项的文本和值
     * <p>Gets an array of the selected options` value/text in the group.</p>
     * @return {Array} An array of the selected options` value/text.
     */
    getValue: function() {
        var va = [];
        var se = this.list.selected.elements;
        Ext.each(se, function(v, i) {
            var vb = [];
            vb.push(this.list.store.getAt(v.viewIndex).get(this.displayField));
            vb.push(this.list.store.getAt(v.viewIndex).get(this.valueField));
            va.push(vb);
        }, this);
        return va;
    },

    getRawValue: function(returnModel) {
        var ca = this.getValue();
        if (ca) {
            var r = '';
            if (returnModel == 'label' || this.submitDisplay) {
                Ext.each(ca, function(v) {
                    if (r.length > 0) {
                        r += this.rawValueSeparator;
                    }
                    r += v[0].toString();
                }, this);
            } else {
                Ext.each(ca, function(v) {
                    if (r.length > 0) {
                        r += this.rawValueSeparator;
                    }
                    r += v[1].toString();
                }, this);
            }
            return r;
        } else {
            return '';
        }
    },

    /*
     * Runs OptionField's validations and returns an array of any errors. The only error by default
     * is if fieldRequired is set to false.
     * @return {Array} Array of all validation errors
     */
    getErrors: function(values) {
        var errors = CExt.form.OptionField.superclass.getErrors.apply(this, arguments);
        if (!this.allowBlank) {
            var blank = true;
            if (this.getValue().length != 0) {
                blank = false;
            }
            if (blank) {
                errors.push(this.blankText);
            }
        }
        return errors;
    },

    // private
    onResize: function(w, h) {
        this.list.setSize(w, h);
        if (this.checkSelModel) {
            //set width for the first columns with the checkbox/radio. and the rest column`s width.
            var cl = this.list.el.dom.childNodes[1].firstChild;
            for (var i = 0; i < cl.children.length; i++) {
                Ext.fly(cl.childNodes[i].firstChild).setWidth(15);
                Ext.get(cl.childNodes[i].childNodes[1]).setWidth((Ext.fly(cl.childNodes[i]).getWidth() - 15 - Ext.getScrollBarWidth()));
            }
        }
    },

    // private
    onDestroy: function() {
        this.list.destroy();
        this.list.disabledItems.clear();
        Ext.destroy(this.list, this.hiddenField);
        CExt.form.OptionField.superclass.onDestroy.call(this);
    },

    /**
     * 禁用选项
     * @param {Array/HTMLElement/Number/Ext.data.Record} node <p>The node, node index or record to check</p>
     */
    disableOptions: function(node) {
        if (Ext.isArray(node)) {
            Ext.each(node, function(c) {
                this.disableOptions(c);
            }, this);
        } else {
            var node = this.list.getNode(node);
            if (!this.list.disabledItems.contains(this.list.getNode(node))) {
                Ext.fly(node).addClass(this.disabledClass);
                this.list.disabledItems.add(node);
            }
        }
    },

    /**
     * 启用选项
     * @param {Array/HTMLElement/Number/Ext.data.Record} node <p>The node, node index or record to check</p>
     */
    enableOptions: function(node) {
        if (Ext.isArray(node)) {
            Ext.each(node, function(c) {
                this.enableOptions(c);
            }, this);
        } else {
            var node = this.list.getNode(node);
            if (this.list.disabledItems.contains(this.list.getNode(node))) {
                Ext.fly(node).removeClass(this.disabledClass);
                this.list.disabledItems.removeElement(node);
            }
        }
    }
});

Ext.reg('ceoptionfield', CExt.form.OptionField);

  评论这张
 
阅读(401)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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