覆盖 Extjs 时间字段以显示自定义最大值 23:59
override Extjs Timefield to show custom max value 23:59
我需要你的帮助来覆盖 ExtJs 时间字段以显示一个自定义值,23:59。我试图覆盖 createStore
函数,但我的时间选择器仍然具有标准值。可能是什么问题?
Ext.override(Ext.picker.Time, {
createStore: function() {
var me = this,
utilDate = Ext.Date,
times = [],
min = me.absMin,
max = me.absMax;
while (min <= max) {
times.push({
disp: utilDate.dateFormat(min, me.format),
date: min
});
min = utilDate.add(min, 'mi', me.increment);
}
var end = new Date();
end.setHours(23, 59, 59, 999);
times.push({
disp: '23:59',
date: end
});
return new Ext.data.Store({
fields: ['disp', 'date'],
data: times
});
}
});
嗯,我想当您查看组件的存储区时,您会发现设置了一个名为 time-picker-filter
的过滤器。如果您取消设置,该组件将显示您的新记录。我不知道过滤器的用途,所以我建议不要这样做。
过滤器在函数 updateList
中配置和应用,它采用 属性 maxValue
或者,如果那个未定义,则 absMax
作为上限.
所以我想你应该检查属性 maxValue
和 absMax
包含哪些值,如果定义了它们,请将它们更改为 23:59:59,999
.
在 ExtJS 6 中,您可以重写 createStore()
方法,就像您在早期版本中所做的那样。
我创建了一个 23:59
的时间值,伪装成 24:00
。
这里是working example.
Ext.picker.Time 覆盖
Ext.define('App.components.TimePicker', {
override: 'Ext.picker.Time',
statics: {
createStore: function(format, increment) {
var me = this;
var store = me.callParent(arguments);
var dateUtil = Ext.Date;
var clearTime = dateUtil.clearTime;
var initDate = this.prototype.initDate;
if (format === 'H:i') {
var time = clearTime(new Date(initDate[0], initDate[1], initDate[2]));
time.setHours(23, 59);
store.add({
disp: '24:00',
date: time
});
}
return store;
}
}
});
用法示例
Ext.application({
name: 'TimeApp',
autoCreateViewport: false,
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [{
xtype: 'form',
title: 'Date-Field 24th Hour Example',
bodyPadding: 12,
items: [{
xtype: 'timefield',
width: 220,
name: 'time',
fieldLabel: 'Time',
// ====================== // Begin custom options.
format: 'H:i', // Important
emptyText : '12:00', // Why not?
increment: 15, // Default value
listConfig : {
maxHeight: 160 // Limit rows to 5 (~32px each row)
}
}]
}]
});
}
});
我需要你的帮助来覆盖 ExtJs 时间字段以显示一个自定义值,23:59。我试图覆盖 createStore
函数,但我的时间选择器仍然具有标准值。可能是什么问题?
Ext.override(Ext.picker.Time, {
createStore: function() {
var me = this,
utilDate = Ext.Date,
times = [],
min = me.absMin,
max = me.absMax;
while (min <= max) {
times.push({
disp: utilDate.dateFormat(min, me.format),
date: min
});
min = utilDate.add(min, 'mi', me.increment);
}
var end = new Date();
end.setHours(23, 59, 59, 999);
times.push({
disp: '23:59',
date: end
});
return new Ext.data.Store({
fields: ['disp', 'date'],
data: times
});
}
});
嗯,我想当您查看组件的存储区时,您会发现设置了一个名为 time-picker-filter
的过滤器。如果您取消设置,该组件将显示您的新记录。我不知道过滤器的用途,所以我建议不要这样做。
过滤器在函数 updateList
中配置和应用,它采用 属性 maxValue
或者,如果那个未定义,则 absMax
作为上限.
所以我想你应该检查属性 maxValue
和 absMax
包含哪些值,如果定义了它们,请将它们更改为 23:59:59,999
.
在 ExtJS 6 中,您可以重写 createStore()
方法,就像您在早期版本中所做的那样。
我创建了一个 23:59
的时间值,伪装成 24:00
。
这里是working example.
Ext.picker.Time 覆盖
Ext.define('App.components.TimePicker', {
override: 'Ext.picker.Time',
statics: {
createStore: function(format, increment) {
var me = this;
var store = me.callParent(arguments);
var dateUtil = Ext.Date;
var clearTime = dateUtil.clearTime;
var initDate = this.prototype.initDate;
if (format === 'H:i') {
var time = clearTime(new Date(initDate[0], initDate[1], initDate[2]));
time.setHours(23, 59);
store.add({
disp: '24:00',
date: time
});
}
return store;
}
}
});
用法示例
Ext.application({
name: 'TimeApp',
autoCreateViewport: false,
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [{
xtype: 'form',
title: 'Date-Field 24th Hour Example',
bodyPadding: 12,
items: [{
xtype: 'timefield',
width: 220,
name: 'time',
fieldLabel: 'Time',
// ====================== // Begin custom options.
format: 'H:i', // Important
emptyText : '12:00', // Why not?
increment: 15, // Default value
listConfig : {
maxHeight: 160 // Limit rows to 5 (~32px each row)
}
}]
}]
});
}
});