- 浏览: 340931 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
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 2957ExtJs强制re-render整个grid 有时候我们在gr ... -
子panel居中小技巧
2014-06-16 11:19 651子panel居中小技巧 { xtype: 'contain ... -
集成bootstrap-datetimepicker插件到ExtJs中
2014-06-11 10:49 1427系统有一个需求:查询 ... -
用Sencha Touch写2048游戏
2014-06-05 15:47 12571 UI部分 Ext.define('mobile2048.v ... -
ExtJs下拉菜单对齐
2014-04-24 14:39 695ExtJs下拉菜单对齐 通过设置plain:true可以将下 ... -
ExtJs4中给Grid增加右键菜单功能
2014-04-08 17:32 13061 首先定义右键时所要显示菜单组件 Ext.define('Q ... -
ExtJs4实现CheckBox Tree以及文件预览功能
2014-04-04 16:28 1641需求: 服务器上有一个文件夹(根文件夹),其下面有可能是文件也 ... -
ExtJs中根据后台数据动态创建表格列及其数据
2014-02-18 16:57 10747renderDynamicTable: functio ... -
给ExtJs树节点添加提示
2014-01-20 17:48 27001 给树treeview增加事件监听 "#filet ... -
在TreeGrid上增加键盘监听事件
2014-01-15 16:12 13321 首先定义gridview id viewConfig: { ... -
在Grid上增加键盘监听事件
2014-01-08 14:31 25011 首先定义gridview id viewConfig : ... -
自定义最大化最小化ExtJs插件
2013-11-25 14:41 4732由于ExtJs的panle组件本身是不可以处理最大化最小化事件 ... -
如何利用Spring的redirectStrategy进行url hash tag的重定向
2013-11-25 13:55 8478我们都知道url的hash部分是不能传到服务器端的,例如 ht ... -
在ExtJS中给表格中某列的行值添加tool-tips
2013-01-15 16:22 1282{ ...
相关推荐
extjs时间日期选择组件.
日期用Extjs自带的Ext.form.field.Date,时间用Ext.form.field.Number和Ext.form.Label进行组装。 样式为横向的日期、时间,非日期弹出框下方选择时间。 注意事项:1、只有日期、年、月、日全部选择后,才能从name中...
1.ExtJS自定义组件,图片按钮为例. 2.此图片按钮背景完全为图片,没有边框,需要使用者提供2张图片,一张初始化用,一张点击后用,可在'imgPaths:'属性里填写,格式为'01.jpg~02.jpg' 3.解压后请将所有附件放置您extjs...
ExtJs 的日期控件不带清空功能,项目有可能需要一个带清空功能的日期控件。
ExtJS日期多选组件源码 日期一般是单选,有时间有需要选择多个日期的情况,返回一个日期的数组。
日期用Extjs自带的Ext.form.field.Date,时间用Ext.form.field.Number和Ext.form.Label进行组装。 样式显示为横向的日期、时间,非日期弹出框下方选择日期。 调用代码:Ext.create('erp.ux.form.field.DateTimer', {...
漂亮的Extjs图片展示组件实例,类似于幻灯片,可直接拿去用,非常不错的哦
extjs自定义控件extjs自定义控件extjs自定义控件extjs自定义控件extjs自定义控件extjs自定义控件extjs自定义控件
extjs4.0结合My97DatePicker4.7版本使用 使用简单 方便 解决extjs中日期控件不能显示时间的问题 下载后将其放到extjs目录的examples下 直接运行date.html即可 extjs4.0版本 4.0以前的版本没有测试过 如果有4.0版本...
用过Extjs的人都晓得,Ext自身的DateField只支持日期选择,而TimeField却实现的又很简单。真的是苦了一帮子英雄好汉啊!此控件由本人原创,扩展了DateField。在Extjs3.0.0、3.2.1、3.3.0版本下都测试通过。且在IE6、...
1、Extjs3.0 常用组件介绍ppt 2、怎样安装开发利器Spket 3、Spket安装包
自定义高级查询Extjs
自定义下拉树,你懂的,内附图和前后台源代码
11.实现右键菜单的功能,自定义一个按钮 12.文章预览功能、修改文章功能 13.查看文章评审(重写分页组件的部分方法) 14.完善分页组件、查看文章评审后台功能 15.由菜单树操作右边的工作区域、完成管理员管理文章...
extjs 4.0 的日期时间控制,解压之后放在ext-4.0.7-gpl下的examples文件夹即可。我是下载的csdn别人的版本改的,别人给的是英文版。我给改成了中文版。
这里主要介绍了ExtJS常用组件的样式修改,包括工具栏样式修改、菜单样式修改、树形菜单样式修改、表格样式修改、按钮样式修改等。
extjs-form组件配置参数详解 extjs各种组件说明
extjs入门学习,各个组件的使用,包括Observable、Observable、BoxComponent、Container、Panel、Viewport及Window...
extjs时间空间精确秒