这个问题实在开发时侯遇见的,需要添加一个确定按钮,原来做的datetimefield就只有一个现在的按钮。非常感谢网上的大佬和之前开发的前辈。直接上代码了。
1、自定义一个时间选择器TimePickerField,继承自Ext.form.field.Base,由三个NumberField组成。
Ext.define('common.util.timeFeld.TimePickerField', {
extend: 'Ext.form.field.Base',
alias: 'widget.timepicker',
alternateClassName: 'Ext.form.field.TimePickerField',
requires: ['Ext.form.field.Number'],
// 隐藏BaseField的输入框 , hidden basefield's input
inputType: 'hidden',
style: 'padding:4px 0 0 0;margin-bottom:0px',
/**
* @cfg {String} value
* initValue, format: 'H:i:s'
*/
value: null,
/**
* @cfg {Object} spinnerCfg
* 数字输入框参数, number input config
*/
spinnerCfg: {
width: 60
},
/** Override. */
initComponent: function() {
var me = this;
me.value = me.value || Ext.Date.format(new Date(), 'H:i:s');
me.callParent();// called setValue
me.spinners = [];
var cfg = Ext.apply({
}, me.spinnerCfg, {
readOnly: me.readOnly,
disabled: me.disabled,
style: 'float: left',
listeners: {
change: {
fn: me.onSpinnerChange,
scope: me
}
}
});
me.hoursSpinner = Ext.create('Ext.form.field.Number', Ext.apply({
}, cfg, {
minValue: 0,
maxValue: 23
}));
me.minutesSpinner = Ext.create('Ext.form.field.Number', Ext.apply({
}, cfg, {
minValue: 0,
maxValue: 59
}));
// TODO 使用timeformat 判断是否创建秒输入框, maybe second field is not always need.
me.secondsSpinner = Ext.create('Ext.form.field.Number', Ext.apply({
}, cfg, {
minValue: 0,
maxValue: 59
}));
me.spinners.push(me.hoursSpinner, me.minutesSpinner, me.secondsSpinner);
},
/**
* @private
* Override.
*/
onRender: function() {
var me = this, spinnerWrapDom, spinnerWrap;
me.callParent(arguments);
// render to original BaseField input td
// spinnerWrap = Ext.get(Ext.DomQuery.selectNode('div', this.el.dom)); // 4.0.2
spinnerWrapDom = Ext.dom.Query.select('td', this.getEl().dom)[1]; // 4.0 ->4.1 div->td
spinnerWrap = Ext.get(spinnerWrapDom);
me.callSpinnersFunction('render', spinnerWrap);
Ext.core.DomHelper.append(spinnerWrap, {
tag: 'div',
cls: 'x-form-clear-left'
});
this.setRawValue(this.value);
},
_valueSplit: function(v) {
if(Ext.isDate(v)) {
v = Ext.Date.format(v, 'H:i:s');
}
var split = v.split(':');
return {
h: split.length