构建自定义ExtJs时间日期组件

构建自定义ExtJs时间日期组件
1 代码

Ext.define('Qui.view.DatetimepickerDialog', {
    extend: 'Ext.window.Window',
    alias: 'widget.DatetimepickerDialog',

    requires: [
        'Ext.menu.DatePicker',
        'Ext.slider.Single',
        'Ext.toolbar.Toolbar',
        'Ext.button.Button'
    ],

    height: 393,
    itemId: 'mywindow',
    width: 527,
    closeAction: 'hide',
    title: 'Edit date/time',
    modal: true,

    layout: {
        type: 'hbox',
        align: 'stretch',
        padding: 4
    },

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'container',
                    flex: 1,
                    itemId: 'fromContainer',
                    layout: {
                        type: 'vbox',
                        align: 'stretch'
                    },
                    items: [
                        {
                            xtype: 'datemenu',
                            floating: false,
                            itemId: 'fromCal',
                            title: 'From: 06/06/2014 00:00:00 AM',
                            listeners: {
                                select: {
                                    fn: me.onFromCalSelect,
                                    scope: me
                                }
                            }
                        },
                        {
                            xtype: 'slider',
                            tipText: function(thumb) {
                                return (thumb.value * 1800).toHHMM();
                            },
                            margins: '4 4 0 0',
                            itemId: 'fromTime',
                            fieldLabel: '00:00 AM',
                            labelWidth: 80,
                            value: 0,
                            maxValue: 47,
                            listeners: {
                                change: {
                                    fn: me.onFromTimeChange,
                                    scope: me
                                },
                                changecomplete: {
                                    fn: me.onFromTimeChangeComplete,
                                    scope: me
                                }
                            }
                        }
                    ]
                },
                {
                    xtype: 'container',
                    flex: 1,
                    margins: '0 0 0 4',
                    itemId: 'toContainer',
                    layout: {
                        type: 'vbox',
                        align: 'stretch'
                    },
                    items: [
                        {
                            xtype: 'datemenu',
                            floating: false,
                            itemId: 'toCal',
                            title: 'To: 06/08/2014 11:59:59 PM',
                            listeners: {
                                select: {
                                    fn: me.onToCalSelect,
                                    scope: me
                                }
                            }
                        },
                        {
                            xtype: 'slider',
                            margins: '4 4 0 0',
                            itemId: 'toTime',
                            fieldLabel: '11:30 PM',
                            labelWidth: 80,
                            value: 47,
                            maxValue: 47,
                            listeners: {
                                change: {
                                    fn: me.onToTimeChange,
                                    scope: me
                                },
                                changecomplete: {
                                    fn: me.onToTimeChangeComplete,
                                    scope: me
                                }
                            }
                        }
                    ]
                }
            ],
            dockedItems: [
                {
                    xtype: 'toolbar',
                    flex: 1,
                    dock: 'bottom',
                    ui: 'footer',
                    layout: {
                        type: 'hbox',
                        pack: 'center'
                    },
                    items: [
                        {
                            xtype: 'button',
                            itemId: 'triageTimeFilterUpdateBtn',
                            text: 'Update'
                        },
                        {
                            xtype: 'button',
                            itemId: 'triageTimeFilterCancelBtn',
                            text: 'Cancel'
                        }
                    ]
                }
            ]
        });

        me.callParent(arguments);
    },

    onFromCalSelect: function(datepicker, date, eOpts) {
        var me = this;
        me.fromDate = me.onCalSelect(date, me.down('#fromTime'), me.down('#fromCal'), null, 'From');

    },

    onFromTimeChange: function(slider, newValue, thumb, eOpts) {
        this.onTimeChange(slider, newValue, thumb);
        return newValue;
    },

    onFromTimeChangeComplete: function(slider, newValue, thumb, eOpts) {
        var me = this;
        var cal = me.down('#fromCal');
        me.fromDate = me.onCalSelect(cal.picker.getValue(), slider, cal, null, 'From');
    },

    onToCalSelect: function(datepicker, date, eOpts) {
        var me = this;
        me.toDate = me.onCalSelect(date, me.down('#toTime'), me.down('#toCal'), null, 'To');

    },

    onToTimeChange: function(slider, newValue, thumb, eOpts) {
        this.onTimeChange(slider, newValue, thumb);
        return newValue;
    },

    onToTimeChangeComplete: function(slider, newValue, thumb, eOpts) {
        var me = this;
        var cal = me.down('#toCal');
        me.toDate = me.onCalSelect(cal.picker.getValue(), slider, cal, null, 'To');
    },

    onTimeChange: function(slider, value, thumb) {
        var ts = (value * 1800).toHHMM();
        slider.setFieldLabel(ts);
        slider.ts = value * 1800000; // 30 min * 60 sec * 1000 ms

    },

    onCalSelect: function(date, slider, cal, d, lbl) {
        var me = this;
        if (d === undefined || d === null) {
            d = new Date();
            var t = slider.ts === undefined ? slider.value * 1800000 : slider.ts;
            d.setTime(date.getTime() + t);
        }
        cal.setTitle(lbl + ': ' + Ext.Date.format(d, 'M d, y g:i:s A'));
        return d;

    }

});

2 效果

[img]http://dl2.iteye.com/upload/attachment/0098/2279/98d72fa1-27dd-30e5-b588-d4300c8ad1a3.png[/img]