ExtJS 4.2 Date组件扩展：添加清除按钮

ExtJS中除了提供丰富的组件外，我们还可以扩展他的组件。

在这里，我们将在Date日期组件上添加一个【清除】按钮，用于此组件已选中值的清除。

目录

1. Date组件介绍

2. 主要代码说明

3. 代码与在线演示

 

1. Date组件介绍

这里的Date组件全称为 Ext.form.field.Date，为form表单一个组件。

查看Ext.form.field.Date的源代码的得知需要 Ext.picker.Date。

Ext.picker.Date是一个日期选择器，包含了日期选中、渲染布局等等，也正是我们需要修改的文件。

 

2. 主要代码说明

Date组件原先就包括了一个【今天】按钮，可根据此按钮在Ext.picker.Date的创建方式来创建一个【清除】按钮。

2.1 创建一个js文件，用以覆盖Ext.picker.Date

Ext.define('Js.ux.DatePicker', {
    override: 'Ext.picker.Date'
    ...
}

 

2.2 renderTpl属性

说明：renderTpl表示一个组件的渲染模板，在【今天】按钮后面渲染【清除】按钮。

 

2.3 beforeRender方法

说明：在此方法中初始化【清除】按钮。

beforeRender: function () {
    var me = this;
    me.callParent();
    // 创建按钮 
    me.clearBtn = new Ext.button.Button({
        ownerCt: me,
        ownerLayout: me.getComponentLayout(),
        text: '清除',
        tooltip: '清除日期',
        tooltipType: 'title',
        handler: me.selectClear,
        scope: me
    });
}

　　

2.4 selectClear方法

说明：此方法表示点击【清除】按钮执行的内容。

selectClear: function () {
    var me = this,
        btn = me.clearBtn,
        handler = me.handler;

    if (btn && !btn.disabled) {
        me.setValue('');
        me.fireEvent('select', me, me.value);
        if (handler) {
            handler.call(me.scope || me, me, me.value);
        }
        me.onSelect();
    }
    return me;
}

　　

3. 代码与在线演示

3.1 完整代码

在ExtJS文件后面引入此文件即可：

/*!
* 在原有的Date组件上添加【清除】按钮
*/
Ext.define('Js.ux.DatePicker', {
    override: 'Ext.picker.Date',
    renderTpl: [
        '
',
            '
',
                 // the href attribute is required for the :hover selector to work in IE6/7/quirks
                '',
                '
{%this.renderMonthBtn(values, out)%}
',
                 // the href attribute is required for the :hover selector to work in IE6/7/quirks
                '',
            '
',
            '',
                '',
                    '',
                        '',
                    '',
                '',
                '',
                    '',
                        '{#:this.isEndOfWeek}',
                        '',
                    '',
                '',
            '
',
                            '
{.:this.firstInitial}
',
                        '
',
                            // the href attribute is required for the :hover selector to work in IE6/7/quirks
                            '',
                        '
',
            '',
                '
',
                    '{%this.renderTodayBtn(values, out)%}',
                    '{%this.renderClearBtn(values, out)%}',
                    '
',
            '',
        '
',
        {
            firstInitial: function (value) {
                return Ext.picker.Date.prototype.getDayInitial(value);
            },
            isEndOfWeek: function (value) {
                // convert from 1 based index to 0 based
                // by decrementing value once.
                value--;
                var end = value % 7 === 0 && value !== 0;
                return end ? '' : '';
            },
            renderTodayBtn: function (values, out) {
                Ext.DomHelper.generateMarkup(values.$comp.todayBtn.getRenderTree(), out);
            },
            renderMonthBtn: function (values, out) {
                Ext.DomHelper.generateMarkup(values.$comp.monthBtn.getRenderTree(), out);
            },
            renderClearBtn: function (values, out) { // 清除按钮
                Ext.DomHelper.generateMarkup(values.$comp.clearBtn.getRenderTree(), out);
            }
        }
    ],

    beforeRender: function () {
        var me = this;
        me.callParent();
        // 创建按钮 
        me.clearBtn = new Ext.button.Button({
            ownerCt: me,
            ownerLayout: me.getComponentLayout(),
            text: '清除',
            tooltip: '清除日期',
            tooltipType: 'title',
            handler: me.selectClear,
            scope: me
        });
    },

    // Do the job of a container layout at this point even though we are not a Container.
    // TODO: Refactor as a Container.
    finishRenderChildren: function () {
        var me = this;
        me.callParent();
        me.clearBtn.finishRender();
    },

    /**
    * Sets the value of the date field
    * @param {Date} value The date to set
    * @return {Ext.picker.Date} this
    */
    setValue: function (value) {
        if (value == '') {
            this.value = value;
        } else {
            this.value = Ext.Date.clearTime(value, true);
            return this.update(this.value);
        }
    },

    /**
    * 清除按钮点击
    */
    selectClear: function () {
        var me = this,
            btn = me.clearBtn,
            handler = me.handler;

        if (btn && !btn.disabled) {
            me.setValue('');
            me.fireEvent('select', me, me.value);
            if (handler) {
                handler.call(me.scope || me, me, me.value);
            }
            me.onSelect();
        }
        return me;
    },

    beforeDestroy: function () {
        var me = this;
        if (me.rendered) {
            Ext.destroy(
                me.clearBtn
            );
        }
        me.callParent();
    },
});

 

3.2 运行图

 

3.3 在线演示

在线演示：http://www.akmsg.com/ExtJS/index.html#App.Demo.DateExtendTab

 

End

Web开发之路系列文章

菜单加载中...