- 浏览: 346903 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
hanmiao:
如果接口里的方法声明会抛出某些异常,那么在使用lambda 表 ...
Java8中Lambda表达式的10个例子 -
彭成林:
我试了一下,,虽然配置这个插件简单,,但是验证码的效果真是不咋 ...
一个Struts2验证码生成插件JCaptcha4Struts2的使用经历 -
桃汁天天:
非常感谢 为我们剩下了许多研究时间
ExtJs中根据后台数据动态创建表格列及其数据 -
jobar:
mistake 写道var resultSetId = typ ...
ExtJs中根据后台数据动态创建表格列及其数据 -
mistake:
var resultSetId = type === 'con ...
ExtJs中根据后台数据动态创建表格列及其数据
构建自定义ExtJs时间日期组件
1 代码
2 效果
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 效果
发表评论
-
ExtJs强制re-render整个grid
2014-06-17 12:01 3004ExtJs强制re-render整个grid 有时候我们在gr ... -
子panel居中小技巧
2014-06-16 11:19 685子panel居中小技巧 { xtype: 'contain ... -
集成bootstrap-datetimepicker插件到ExtJs中
2014-06-11 10:49 1456系统有一个需求:查询 ... -
用Sencha Touch写2048游戏
2014-06-05 15:47 12971 UI部分 Ext.define('mobile2048.v ... -
ExtJs下拉菜单对齐
2014-04-24 14:39 751ExtJs下拉菜单对齐 通过设置plain:true可以将下 ... -
ExtJs4中给Grid增加右键菜单功能
2014-04-08 17:32 13451 首先定义右键时所要显示菜单组件 Ext.define('Q ... -
ExtJs4实现CheckBox Tree以及文件预览功能
2014-04-04 16:28 1668需求: 服务器上有一个文件夹(根文件夹),其下面有可能是文件也 ... -
ExtJs中根据后台数据动态创建表格列及其数据
2014-02-18 16:57 10798renderDynamicTable: functio ... -
给ExtJs树节点添加提示
2014-01-20 17:48 27311 给树treeview增加事件监听 "#filet ... -
在TreeGrid上增加键盘监听事件
2014-01-15 16:12 13721 首先定义gridview id viewConfig: { ... -
在Grid上增加键盘监听事件
2014-01-08 14:31 25291 首先定义gridview id viewConfig : ... -
自定义最大化最小化ExtJs插件
2013-11-25 14:41 4766由于ExtJs的panle组件本身是不可以处理最大化最小化事件 ... -
如何利用Spring的redirectStrategy进行url hash tag的重定向
2013-11-25 13:55 8548我们都知道url的hash部分是不能传到服务器端的,例如 ht ... -
在ExtJS中给表格中某列的行值添加tool-tips
2013-01-15 16:22 1349{ ...
相关推荐
通过研究和理解"ExtJS日期多选组件源码",开发者可以深入学习ExtJS组件设计、事件处理、数据绑定等核心概念,并能进一步定制适合自己项目需求的日期选择组件。这样的组件对于提高开发效率和用户体验具有积极的意义。
在EXTJS6中,日期时间控件是一种强大的用户界面组件,它将传统的日期选择器与时间选择器结合在一起,提供了一种便捷的方式来输入和编辑日期和时间数据。这个控件在许多应用程序中都非常实用,特别是在那些需要精确...
在标题中提到的"extjs 4.0 日期时间控件",是指ExtJS 4.0框架中的DateTime组件,这是一个用于在Web应用中输入和显示日期与时间的控件。 描述中提到了这个控件是经过修改的中文版本。原版可能是英文,但通过定制,...
在ExtJS 5中,日期时间控件是开发用户界面时经常会用到的组件,它允许用户选择和输入日期及时间值。本篇文章将深入探讨ExtJS 5的日期时间控件及其特点。 首先,ExtJS 5 的日期时间控件(DateTimeField)结合了日期...
### Extjs自定义组件——下拉树:深入解析与实现 在现代Web开发中,Extjs作为一款功能强大且灵活的框架,深受开发者喜爱。它提供了丰富的UI组件库,能够帮助开发者快速构建复杂的用户界面。其中,自定义组件是Extjs...
9. **自定义控件**:如果标准的日期时间控件无法满足需求,开发者可以创建自定义组件,组合使用`Ext.form.field.Date`和`Ext.form.field.Time`,并通过`Ext.container.Container`来布局。 10. **数据绑定**:在MVVM...
标题中的"extjs3.0 日期时间控件"指的是ExtJS 3.0框架中的DateTimeField组件,这是一个组合了日期选择器和时间选择器的控件,允许用户以交互的方式选择精确的日期和时间。这个控件通常用于表单中,提供了一种直观且...
`Datetime.js`文件很可能是包含自定义日期时间处理逻辑或者扩展了ExtJS的日期时间功能的脚本。它可能包含了特定的日期选择器、时间选择器组件,或者是对现有日期时间组件的增强,比如添加了多语言支持、时间范围限制...
使用此类库时,你需要注意它的API文档,学习如何初始化控件、设置日期格式、获取用户选择的日期和时间,以及如何与其他ExtJs组件进行联动。 3. 文件"ada01a66-266c-3ceb-b17c-ac17788bb872"同样是一个可能的日期...
在EXTJS这个强大的JavaScript框架中,时间控件是开发者经常使用的组件之一,尤其在构建复杂的Web应用程序时。EXTJS的时间控件允许用户选择或输入时间,通常以小时、分钟和秒为单位,提供了用户友好的界面和丰富的...
标题中提到的"extjs 日期时间",指的是ExtJS框架内用于处理日期和时间输入的组件。这个控件通常会包含两个部分:日期选择器和时间选择器,允许用户精确地指定一个日期和时间。在ExtJS 2.0中,这个控件可能还不是非常...
EXTJS是一款基于JavaScript的富客户端应用框架,它提供了一系列丰富的组件,用于构建功能强大的Web应用程序。在EXTJS中,时间控件是常见的交互元素,允许用户选择特定的时间,包括年、月、日、时、分和秒。这篇文档...
总结,ExtJs的日期时间选择控件是一个功能强大且灵活的组件,不仅提供了丰富的配置选项和事件机制,还能通过自定义和扩展满足各种复杂需求。优化后的时间选择控件精确到秒,使得在需要精确时间信息的场景下表现得尤...
ExtJS 3.1 是一个历史悠久的JavaScript框架,主要用于构建富客户端Web应用程序。它提供了丰富的组件库,包括表格、表单、菜单、工具栏、树形结构等,使得开发者能够轻松创建复杂的用户界面。在本篇文章中,我们将...
5. **可扩展性**:由于ExtJS组件的高度模块化,我们可以添加额外的功能,比如禁用某些日期或时间,或者添加自定义的验证规则。 6. **布局管理**:组件可以轻松地与其他UI元素一起在布局中使用,如表格、面板或窗口...
这通常通过自定义ExtJS组件来实现,可能会结合使用`Ext.picker.Date`和`Ext.picker.Time`,并通过事件监听和处理来同步日期和时间的选择。 3. **第三方插件**: ExtJS社区有许多第三方插件,如xdatetime或extjs-...
综上所述,正确理解和运用ExtJS组件扩展的两个层次,不仅能够帮助开发者构建高效稳定的Web应用,还能显著提升开发效率和代码质量。通过避免常见的错误,合理规划组件扩展的层次,并遵循最佳实践,可以有效促进项目的...
ExtJS是一款基于JavaScript的富客户端应用开发框架,它提供了丰富的组件库,用于构建复杂的Web应用程序。在3.2和3.3版本中,ExtJS的时间控件(DateTimeField)和日期控件(DateField)是开发者常用的功能组件,用于...
在这个场景中,"自定义高级查询Extjs"指的是利用Ext JS框架来构建这样的功能。Ext JS是一个流行的JavaScript库,用于创建富客户端应用程序,特别是与数据展示和操作相关的Web应用。 1. **Ext JS简介** - Ext JS...
EXTJS 3.0 的窗体组件支持创建各种类型的数据输入表单,包括文本字段、选择框、日期选择器等。窗体不仅提供了丰富的验证机制,还支持异步提交,使得数据交互更加便捷高效。此外,EXTJS 还提供了强大的表单布局,如...