`
jobar
  • 浏览: 346903 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

构建自定义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 效果


  • 大小: 15 KB
分享到:
评论

相关推荐

    ExtJS日期多选组件源码

    通过研究和理解"ExtJS日期多选组件源码",开发者可以深入学习ExtJS组件设计、事件处理、数据绑定等核心概念,并能进一步定制适合自己项目需求的日期选择组件。这样的组件对于提高开发效率和用户体验具有积极的意义。

    Extjs6 日期时间控件

    在EXTJS6中,日期时间控件是一种强大的用户界面组件,它将传统的日期选择器与时间选择器结合在一起,提供了一种便捷的方式来输入和编辑日期和时间数据。这个控件在许多应用程序中都非常实用,特别是在那些需要精确...

    extjs 4.0 日期时间控件

    在标题中提到的"extjs 4.0 日期时间控件",是指ExtJS 4.0框架中的DateTime组件,这是一个用于在Web应用中输入和显示日期与时间的控件。 描述中提到了这个控件是经过修改的中文版本。原版可能是英文,但通过定制,...

    Extjs 5 日期时间控件

    在ExtJS 5中,日期时间控件是开发用户界面时经常会用到的组件,它允许用户选择和输入日期及时间值。本篇文章将深入探讨ExtJS 5的日期时间控件及其特点。 首先,ExtJS 5 的日期时间控件(DateTimeField)结合了日期...

    Extjs自定义组件-下拉树

    ### Extjs自定义组件——下拉树:深入解析与实现 在现代Web开发中,Extjs作为一款功能强大且灵活的框架,深受开发者喜爱。它提供了丰富的UI组件库,能够帮助开发者快速构建复杂的用户界面。其中,自定义组件是Extjs...

    extjs日期+时间控件

    9. **自定义控件**:如果标准的日期时间控件无法满足需求,开发者可以创建自定义组件,组合使用`Ext.form.field.Date`和`Ext.form.field.Time`,并通过`Ext.container.Container`来布局。 10. **数据绑定**:在MVVM...

    extjs3.0 日期时间控件

    标题中的"extjs3.0 日期时间控件"指的是ExtJS 3.0框架中的DateTimeField组件,这是一个组合了日期选择器和时间选择器的控件,允许用户以交互的方式选择精确的日期和时间。这个控件通常用于表单中,提供了一种直观且...

    ExtJs 日期和时间的整合

    `Datetime.js`文件很可能是包含自定义日期时间处理逻辑或者扩展了ExtJS的日期时间功能的脚本。它可能包含了特定的日期选择器、时间选择器组件,或者是对现有日期时间组件的增强,比如添加了多语言支持、时间范围限制...

    网上下载的三个ExtJs时间日期控件

    使用此类库时,你需要注意它的API文档,学习如何初始化控件、设置日期格式、获取用户选择的日期和时间,以及如何与其他ExtJs组件进行联动。 3. 文件"ada01a66-266c-3ceb-b17c-ac17788bb872"同样是一个可能的日期...

    extjs时间控件精确秒

    在EXTJS这个强大的JavaScript框架中,时间控件是开发者经常使用的组件之一,尤其在构建复杂的Web应用程序时。EXTJS的时间控件允许用户选择或输入时间,通常以小时、分钟和秒为单位,提供了用户友好的界面和丰富的...

    extjs 日期时间

    标题中提到的"extjs 日期时间",指的是ExtJS框架内用于处理日期和时间输入的组件。这个控件通常会包含两个部分:日期选择器和时间选择器,允许用户精确地指定一个日期和时间。在ExtJS 2.0中,这个控件可能还不是非常...

    EXTJS时间控件年月日时分秒

    EXTJS是一款基于JavaScript的富客户端应用框架,它提供了一系列丰富的组件,用于构建功能强大的Web应用程序。在EXTJS中,时间控件是常见的交互元素,允许用户选择特定的时间,包括年、月、日、时、分和秒。这篇文档...

    ExtJs日期时间选择控件

    总结,ExtJs的日期时间选择控件是一个功能强大且灵活的组件,不仅提供了丰富的配置选项和事件机制,还能通过自定义和扩展满足各种复杂需求。优化后的时间选择控件精确到秒,使得在需要精确时间信息的场景下表现得尤...

    extjs 3.1 组件 使用

    ExtJS 3.1 是一个历史悠久的JavaScript框架,主要用于构建富客户端Web应用程序。它提供了丰富的组件库,包括表格、表单、菜单、工具栏、树形结构等,使得开发者能够轻松创建复杂的用户界面。在本篇文章中,我们将...

    Extjs 年月日时分秒组件

    5. **可扩展性**:由于ExtJS组件的高度模块化,我们可以添加额外的功能,比如禁用某些日期或时间,或者添加自定义的验证规则。 6. **布局管理**:组件可以轻松地与其他UI元素一起在布局中使用,如表格、面板或窗口...

    ExtJS日期时间控件

    这通常通过自定义ExtJS组件来实现,可能会结合使用`Ext.picker.Date`和`Ext.picker.Time`,并通过事件监听和处理来同步日期和时间的选择。 3. **第三方插件**: ExtJS社区有许多第三方插件,如xdatetime或extjs-...

    ExtJS 组件扩展

    综上所述,正确理解和运用ExtJS组件扩展的两个层次,不仅能够帮助开发者构建高效稳定的Web应用,还能显著提升开发效率和代码质量。通过避免常见的错误,合理规划组件扩展的层次,并遵循最佳实践,可以有效促进项目的...

    extjs3.2、3.3 时间控件 日期控件扩展

    ExtJS是一款基于JavaScript的富客户端应用开发框架,它提供了丰富的组件库,用于构建复杂的Web应用程序。在3.2和3.3版本中,ExtJS的时间控件(DateTimeField)和日期控件(DateField)是开发者常用的功能组件,用于...

    自定义高级查询Extjs

    在这个场景中,"自定义高级查询Extjs"指的是利用Ext JS框架来构建这样的功能。Ext JS是一个流行的JavaScript库,用于创建富客户端应用程序,特别是与数据展示和操作相关的Web应用。 1. **Ext JS简介** - Ext JS...

    extjs3.0 组件

    EXTJS 3.0 的窗体组件支持创建各种类型的数据输入表单,包括文本字段、选择框、日期选择器等。窗体不仅提供了丰富的验证机制,还支持异步提交,使得数据交互更加便捷高效。此外,EXTJS 还提供了强大的表单布局,如...

Global site tag (gtag.js) - Google Analytics