ExtJS中提供了下拉日期选择控件Ext.form.field.Date与下拉时间选择控件Ext.form.field.Time。不过没有一个在选择日期时选择时间的控件datetimefield。目的就是运用自定义组件的方法,来扩展下拉日期选择控件Ext.form.field.Date,在下拉框中添加时间选择的组件。目标效果:
1 Ext.define(‘My.picker.DateTime‘, {
2 extend: ‘Ext.picker.Date‘,
3 alias: ‘widget.datetimepicker‘,
4 okText:‘确定‘,
5 okTip:‘确定‘,
6
7 renderTpl: [
8 ‘‘
,
9 ‘‘
,
14 ‘
‘,
15 ‘‘,
16 ‘‘,
17 ‘‘,
18 ‘{.:this.firstInitial}
‘,
19 ‘ ‘,
20 ‘ ‘,
21 ‘ ‘,
22 ‘‘,
23 ‘‘,
24 ‘{#:this.isEndOfWeek}‘,
25 ‘‘,
26 // The ‘#‘ is needed for keyboard navigation
27 ‘‘,
28 ‘ ‘,
29 ‘ ‘,
30 ‘ ‘,
31 ‘
‘
,
32 ‘
‘,
33 ‘‘,
34 ‘ ‘
,
35 ‘
‘,
36 {
37 firstInitial: function (value) {
38 return Ext.picker.Date.prototype.getDayInitial(value);
39 },
40 isEndOfWeek: function (value) {
41 // convert from 1 based index to 0 based
42 // by decrementing value once.
43 value--;
44 var end = value % 7 === 0 && value !== 0;
45 return end ? ‘‘ : ‘‘;
46 },
47 renderTodayBtn: function (values, out) {
48 Ext.DomHelper.generateMarkup(values.$comp.todayBtn.getRenderTree(), out);
49 },
50 renderMonthBtn: function (values, out) {
51 Ext.DomHelper.generateMarkup(values.$comp.monthBtn.getRenderTree(), out);
52 }
53 }
54 ]
55 });
其中renderTpl部分与后面按钮渲染部分出自源码。
效果:
第二步:在原布局中添加3个spinner组件用来选取时、分、秒,添加一个确认按钮,并在组件渲染之前,将自定义添加的时、分、秒和确认按钮进行初始化
1 Ext.define(‘My.picker.DateTime‘, {
2 extend: ‘Ext.picker.Date‘,
3 alias: ‘widget.datetimepicker‘,
4 okText:‘确定‘,
5 okTip:‘确定‘,
6
7 renderTpl: [
8 ‘‘
,
9 ‘‘
,
14 ‘
‘,
15 ‘‘,
16 ‘‘,
17 ‘‘,
18 ‘{.:this.firstInitial}
‘,
19 ‘ ‘,
20 ‘ ‘,
21 ‘ ‘,
22 ‘‘,
23 ‘‘,
24 ‘{#:this.isEndOfWeek}‘,
25 ‘‘,
26 // The ‘#‘ is needed for keyboard navigation
27 ‘‘,
28 ‘ ‘,
29 ‘ ‘,
30 ‘ ‘,
31
32 ‘‘,
33 ‘‘,
34 ‘{%this.renderHourBtn(values,out)%} ‘,
35 ‘{%this.renderMinuteBtn(values,out)%} ‘,
36 ‘{%this.renderSecondBtn(values,out)%} ‘,
37 ‘ ‘,
38 ‘
‘,
39
40 ‘‘,
41 ‘‘,
42 ‘ ‘,
43 ‘‘,
44 {
45 firstInitial: function (value) {
46 return Ext.picker.Date.prototype.getDayInitial(value);
47 },
48 isEndOfWeek: function (value) {
49 // convert from 1 based index to 0 based
50 // by decrementing value once.
51 value--;
52 var end = value % 7 === 0 && value !== 0;
53 return end ? ‘‘ : ‘‘;
54 },
55 renderTodayBtn: function (values, out) {
56 Ext.DomHelper.generateMarkup(values.$comp.todayBtn.getRenderTree(), out);
57 },
58 renderMonthBtn: function (values, out) {
59 Ext.DomHelper.generateMarkup(values.$comp.monthBtn.getRenderTree(), out);
60 },
61 renderHourBtn: function (values, out) {
62 Ext.DomHelper.generateMarkup(values.$comp.hourBtn.getRenderTree(), out);
63 },
64 renderMinuteBtn: function (values, out) {
65 Ext.DomHelper.generateMarkup(values.$comp.minuteBtn.getRenderTree(), out);
66 },
67 renderSecondBtn: function (values, out) {
68 Ext.DomHelper.generateMarkup(values.$comp.secondBtn.getRenderTree(), out);
69 },
70 renderOkBtn: function (values, out) {
71 Ext.DomHelper.generateMarkup(values.$comp.okBtn.getRenderTree(), out);
72 }
73 }
74 ],
75 beforeRender: function () {
76 var me = this ,_$Number=Ext.form.field.Number;
77 me.hourBtn=new _$Number({
78 minValue:0,
79 maxValue:23,
80 step:1,
81 width:55
82 });
83 me.minuteBtn=new _$Number({
84 minValue:0,
85 maxValue:59,
86 step:1,
87 width:70,
88 labelWidth:10,
89 fieldLabel:‘ ‘
90 });
91 me.secOndBtn=new _$Number({
92 minValue:0,
93 maxValue:59,
94 step:1,
95 width:70,
96 labelWidth:10,
97 fieldLabel:‘ ‘
98 });
99
100 me.okBtn = new Ext.button.Button({
101 ownerCt: me,
102 ownerLayout: me.getComponentLayout(),
103 text: me.okText,
104 tooltip: me.okTip,
105 tooltipType:‘title‘,
106 handler:me.okHandler,
107 scope: me
108 });
109 me.callParent();
110 }
111 });
效果:
第三步:添加按钮事件绑定,各种内部逻辑的处理,获取选定的时间等等
【ExtJS】自定义组件datetimefield(一)
推荐阅读
本文提供了30条关于优化SQL的建议,包括避免使用select *,使用具体字段,以及使用limit 1等。这些建议是基于实际开发经验总结出来的,旨在帮助读者优化SQL查询。 ...
[详细]
蜡笔小新 2023-12-13 13:24:33
本文介绍了lua语言中闭包的特性及其在模式匹配、日期处理、编译和模块化等方面的应用。lua中的闭包是严格遵循词法定界的第一类值,函数可以作为变量自由传递,也可以作为参数传递给其他函数。这些特性使得lua语言具有极大的灵活性,为程序开发带来了便利。 ...
[详细]
蜡笔小新 2023-12-14 18:18:21
本文介绍了基于layUI的图片上传前预览功能的两种实现方式:一种是使用blob+FileReader,另一种是使用layUI自带的参数。通过选择文件后点击文件名,在页面中间弹窗内预览图片。其中,layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块,并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ...
[详细]
蜡笔小新 2023-12-14 17:06:58
本文介绍了使用Java实现大数乘法的分治算法,包括输入数据的处理、普通大数乘法的结果和Karatsuba大数乘法的结果。通过改变long类型可以适应不同范围的大数乘法计算。 ...
[详细]
蜡笔小新 2023-12-14 15:43:50
本文介绍了OC学习笔记中的@property和@synthesize,包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ...
[详细]
蜡笔小新 2023-12-14 12:05:06
本文主要讨论串匹配算法的性能评估,包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库,可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n),通过随机取出长度为m的子串作为模式P,在文本T中进行匹配,统计平均复杂度。对于成功和失败的匹配分别进行测试,分析其平均复杂度。详情请参考相关学习资源。 ...
[详细]
蜡笔小新 2023-12-13 16:16:05
本文介绍了通过ABAP开发往外网发邮件的需求,并提供了配置和代码整理的资料。其中包括了配置SAP邮件服务器的步骤和ABAP写发送邮件代码的过程。通过RZ10配置参数和icm/server_port_1的设定,可以实现向Sap User和外部邮件发送邮件的功能。希望对需要的开发人员有帮助。摘要长度:184字。 ...
[详细]
蜡笔小新 2023-12-13 15:50:17
本文详细介绍了动态规划算法的基本步骤,包括划分阶段、选择状态、决策和状态转移方程,并以最长递增子序列问题为例进行了详细解析。动态规划算法的有效性依赖于问题本身所具有的最优子结构性质和子问题重叠性质。通过将子问题的解保存在一个表中,在以后尽可能多地利用这些子问题的解,从而提高算法的效率。 ...
[详细]
蜡笔小新 2023-12-13 15:38:19
本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置,包括pom.xml的依赖配置和web.xml中servlet的配置。 ...
[详细]
蜡笔小新 2023-12-13 13:58:25
本文介绍了指针的概念以及在函数调用时使用指针作为参数的情况。指针存放的是变量的地址,通过指针可以修改指针所指的变量的值。然而,如果想要修改指针的指向,就需要使用指针的引用。文章还通过一个简单的示例代码解释了指针的引用的使用方法,并思考了在修改指针的指向后,取指针的输出结果。 ...
[详细]
蜡笔小新 2023-12-13 12:54:29
在project.properties添加#Projecttarget.targetandroid-19android.library.reference.1..Sliding ...
[详细]
蜡笔小新 2023-12-13 12:08:09
猜字母游戏猜字母游戏——设计数据结构猜字母游戏——设计程序结构猜字母游戏——实现字母生成方法猜字母游戏——实现字母检测方法猜字母游戏——实现主方法1猜字母游戏——设计数据结构1.1 ...
[详细]
蜡笔小新 2023-12-13 12:04:03
本文介绍了CentOS 7部署KVM虚拟化环境的架构,详细解释了虚拟化技术的概念和原理,包括全虚拟化和半虚拟化。同时介绍了虚拟机的概念和虚拟化软件的作用。 ...
[详细]
蜡笔小新 2023-12-12 21:38:57
本文介绍了一种解析GRE报文长度的方法,通过分析GRE报文头中的标志位来计算报文长度。具体实现步骤包括获取GRE报文头指针、提取标志位、计算报文长度等。该方法可以帮助用户准确地获取GRE报文的长度信息。 ...
[详细]
蜡笔小新 2023-12-12 20:55:05
本文介绍了两种PDF内容编辑的方法:迅捷PDF编辑器和Adobe Acrobat DC。使用迅捷PDF编辑器,用户可以通过选择需要更改的文字内容并设置字体形式、大小和颜色来编辑PDF文件。而使用Adobe Acrobat DC,则可以通过在软件中点击编辑来编辑PDF文件。PDF文件的编辑可以帮助办公人员进行文件内容的修改和定制。 ...
[详细]
蜡笔小新 2023-12-12 19:37:50