GridDate 快速选择日期控件

效果如图，亲测6.2.1版本可用

/**
 *支持快速选择日期的日期控件
 */
Ext.define('ux.form.field.GridDate', {
    extend: 'Ext.form.field.Date',
    alias: 'widget.gridDateField',
    requires: ['ux.picker.GridDate'],
    pickerGrid: {
        store: {
            //默认配置
            data: [{
                value: 30,
                text: '一个月后'
            },
            {
                value: 90,
                text: '三个月后'
            },
            {
                value: 180,
                text: '六个月后'
            },
            {
                value: 365,
                text: '一年后'
            },
            {
                value: 365 * 2,
                text: '两年后后'
            },
            {
                value: 365 * 3,
                text: '三年后'
            }]
        }
    },
    //创建弹窗
    createPicker: function () {
        var me = this,
        format = Ext.String.format;
        return new ux.picker.GridDate({
            floating: true,
            hidden: true,
            pickerField: me,
            pickerGrid: me.pickerGrid,
            pickerDate: {
                pickerField: me,
                focusable: false,
                // Key events are listened from the input field which is never blurred
                preventRefocus: true,
                minDate: me.minValue,
                maxDate: me.maxValue,
                disabledDatesRE: me.disabledDatesRE,
                disabledDatesText: me.disabledDatesText,
                ariaDisabledDatesText: me.ariaDisabledDatesText,
                disabledDays: me.disabledDays,
                disabledDaysText: me.disabledDaysText,
                ariaDisabledDaysText: me.ariaDisabledDaysText,
                format: me.format,
                showToday: me.showToday,
                startDay: me.startDay,
                minText: format(me.minText, me.formatDate(me.minValue)),
                ariaMinText: format(me.ariaMinText, me.formatDate(me.minValue, me.ariaFormat)),
                maxText: format(me.maxText, me.formatDate(me.maxValue)),
                ariaMaxText: format(me.ariaMaxText, me.formatDate(me.maxValue, me.ariaFormat)),
                listeners: {
                    scope: me,
                    select: me.onSelect,
                    tabout: me.onTabOut
                },
                keyNavConfig: {
                    esc: function () {
                        me.inputEl.focus();
                        me.collapse();
                    }
                }
            }
        });
    }
});

/**
 * 支持快速选择日期的日期控件
 */
Ext.define('ux.picker.GridDate', {
    extend: 'Ext.container.Container',
    alias: 'widget.gridDatePicker',
    requires: ['Ext.picker.Date', 'Ext.form.field.ComboBox'],
    layout: 'hbox',
    config: {
        pickerDate: {

        },
        pickerGrid: {
            width: 120,
            height:'100%',
            title: '快速选择',
            hideHeaders: true,
            columns: [{
                flex:1,
                dataIndex: 'text'
            }]
        }
    },
    //初始化
    initComponent: function () {
        var me = this;
        me.callParent(arguments);
        me.add([me.getPickerGrid(), me.getPickerDate()]);
    },
    //创建时间控件
    applyPickerDate: function (config) {
        return Ext.factory(config, 'Ext.picker.Date', this.getPickerDate());
    },
    //创建下拉框
    applyPickerGrid: function (config) {
        return Ext.factory(config, 'Ext.grid.Panel', this.getPickerGrid());
    },
    //更新下拉框
    updatePickerGrid: function (item) {
        if (item) {
            item.on({
                itemclick: 'onItemclick',
                scope: this
            });
        }
    },
    //快速选择
    onItemclick: function (t, rec) {
        //设置值
        this.pickerField.setValue(new Date(Date.now() + 1000 * 60 * 60 * 24 * rec.get('value')));
        //隐藏弹出层
        this.pickerField.collapse();
    },
    //设置禁止时间
    setDisabledDates: function (value) {
        this.getPickerDate().setDisabledDates(value);
    },
    //设置禁止日期
    setDisabledDays: function (value) {
        this.getPickerDate().setDisabledDays(value);
    },
    //设置最小值
    setMinValue: function (value) {
        this.getPickerDate().setMinDate(value);
    },
    //设置最大值
    setMaxValue: function (value) {
        this.getPickerDate().setMaxDate(value);
    },
    //设置值
    setValue:function (value) {
        this.getPickerDate().setValue(value);
    }
});

作者：魔狼再世
原文：http://www.cnblogs.com/mlzs/p/7134360.html