Mercurial > lada > lada-client

comparison resources/datetime/UX_TimePickerField.js @ 273:a282da79cfaa

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Added datetimepicker from http://www.sencha.com/forum/showthread.php?137242-Ext.ux.DateTimeField-DateTimePicker-for-ext4-also-DateTimeMenu-TimePickerField
author Torsten Irländer <torsten.irlaender@intevation.de>
date Wed, 07 Aug 2013 11:59:50 +0200
parents
children
comparison
equal deleted inserted replaced
272:852dc338894e 273:a282da79cfaa
1 /**
2 * 时间输入框, 三个整数框分别输入时,分,秒.
3 * @author wangzilong
4 * update Ext - 4.1 2012/04/27
5 */
6 Ext.define('Ext.ux.form.TimePickerField', {
7 extend: 'Ext.form.field.Base',
8 alias: 'widget.timepicker',
9 alternateClassName: 'Ext.form.field.TimePickerField',
10 requires: ['Ext.form.field.Number'],
11
12 // 隐藏BaseField的输入框 , hidden basefield's input
13 inputType: 'hidden',
14
15 style: 'padding:4px 0 0 0;margin-bottom:0px',
16
17 /**
18 * @cfg {String} value
19 * initValue, format: 'H:i:s'
20 */
21 value: null,
22
23 /**
24 * @cfg {Object} spinnerCfg
25 * 数字输入框参数, number input config
26 */
27 spinnerCfg: {
28 width: 40
29 },
30
31 /** Override. */
32 initComponent: function() {
33 var me = this;
34
35 me.value = me.value || Ext.Date.format(new Date(), 'H:i:s');
36
37 me.callParent();// called setValue
38
39 me.spinners = [];
40 var cfg = Ext.apply({}, me.spinnerCfg, {
41 readOnly: me.readOnly,
42 disabled: me.disabled,
43 style: 'float: left',
44 listeners: {
45 change: {
46 fn: me.onSpinnerChange,
47 scope: me
48 }
49 }
50 });
51
52 me.hoursSpinner = Ext.create('Ext.form.field.Number', Ext.apply({}, cfg, {
53 minValue: 0,
54 maxValue: 23
55 }));
56 me.minutesSpinner = Ext.create('Ext.form.field.Number', Ext.apply({}, cfg, {
57 minValue: 0,
58 maxValue: 59
59 }));
60 // TODO 使用timeformat 判断是否创建秒输入框, maybe second field is not always need.
61 me.secondsSpinner = Ext.create('Ext.form.field.Number', Ext.apply({}, cfg, {
62 minValue: 0,
63 maxValue: 59
64 }));
65
66 me.spinners.push(me.hoursSpinner, me.minutesSpinner, me.secondsSpinner);
67
68 },
69 /**
70 * @private
71 * Override.
72 */
73 onRender: function() {
74 var me = this, spinnerWrapDom, spinnerWrap;
75 me.callParent(arguments);
76
77 // render to original BaseField input td
78 // spinnerWrap = Ext.get(Ext.DomQuery.selectNode('div', this.el.dom)); // 4.0.2
79 spinnerWrapDom = Ext.dom.Query.select('td', this.getEl().dom)[1]; // 4.0 ->4.1 div->td
80 spinnerWrap = Ext.get(spinnerWrapDom);
81 me.callSpinnersFunction('render', spinnerWrap);
82
83 Ext.core.DomHelper.append(spinnerWrap, {
84 tag: 'div',
85 cls: 'x-form-clear-left'
86 });
87
88 this.setRawValue(this.value);
89 },
90
91 _valueSplit: function(v) {
92 if(Ext.isDate(v)) {
93 v = Ext.Date.format(v, 'H:i:s');
94 }
95 var split = v.split(':');
96 return {
97 h: split.length > 0 ? split[0] : 0,
98 m: split.length > 1 ? split[1] : 0,
99 s: split.length > 2 ? split[2] : 0
100 };
101 },
102 onSpinnerChange: function() {
103 if(!this.rendered) {
104 return;
105 }
106 this.fireEvent('change', this, this.getValue(), this.getRawValue());
107 },
108 // 依次调用各输入框函数, call each spinner's function
109 callSpinnersFunction: function(funName, args) {
110 for(var i = 0; i < this.spinners.length; i++) {
111 this.spinners[i][funName](args);
112 }
113 },
114 // @private get time as object,
115 getRawValue: function() {
116 if(!this.rendered) {
117 var date = this.value || new Date();
118 return this._valueSplit(date);
119 } else {
120 return {
121 h: this.hoursSpinner.getValue(),
122 m: this.minutesSpinner.getValue(),
123 s: this.secondsSpinner.getValue()
124 };
125 }
126 },
127
128 // private
129 setRawValue: function(value) {
130 value = this._valueSplit(value);
131 if(this.hoursSpinner) {
132 this.hoursSpinner.setValue(value.h);
133 this.minutesSpinner.setValue(value.m);
134 this.secondsSpinner.setValue(value.s);
135 }
136 },
137 // overwrite
138 getValue: function() {
139 var v = this.getRawValue();
140 return Ext.String.leftPad(v.h, 2, '0') + ':' + Ext.String.leftPad(v.m, 2, '0') + ':'
141 + Ext.String.leftPad(v.s, 2, '0');
142 },
143 // overwrite
144 setValue: function(value) {
145 this.value = Ext.isDate(value) ? Ext.Date.format(value, 'H:i:s') : value;
146 if(!this.rendered) {
147 return;
148 }
149 this.setRawValue(this.value);
150 this.validate();
151 },
152 // overwrite
153 disable: function() {
154 this.callParent(arguments);
155 this.callSpinnersFunction('disable', arguments);
156 },
157 // overwrite
158 enable: function() {
159 this.callParent(arguments);
160 this.callSpinnersFunction('enable', arguments);
161 },
162 // overwrite
163 setReadOnly: function() {
164 this.callParent(arguments);
165 this.callSpinnersFunction('setReadOnly', arguments);
166 },
167 // overwrite
168 clearInvalid: function() {
169 this.callParent(arguments);
170 this.callSpinnersFunction('clearInvalid', arguments);
171 },
172 // overwrite
173 isValid: function(preventMark) {
174 return this.hoursSpinner.isValid(preventMark) && this.minutesSpinner.isValid(preventMark)
175 && this.secondsSpinner.isValid(preventMark);
176 },
177 // overwrite
178 validate: function() {
179 return this.hoursSpinner.validate() && this.minutesSpinner.validate() && this.secondsSpinner.validate();
180 }
181 });
http://lada.wald.intevation.org