回答问题:http://www.iteye.com/problems/20038
需求是能动态设置TimeField的最大值和最小值:
首先观察源码,没有发现相关的接口.
// private
initComponent : function(){
Ext.form.TimeField.superclass.initComponent.call(this);
if(typeof this.minValue == "string"){
this.minValue = this.parseDate(this.minValue);
}
if(typeof this.maxValue == "string"){
this.maxValue = this.parseDate(this.maxValue);
}
if(!this.store){
var min = this.parseDate(this.minValue);
if(!min){
min = new Date(this.initDate).clearTime();
}
var max = this.parseDate(this.maxValue);
if(!max){
max = new Date(this.initDate).clearTime().add('mi', (24 * 60) - 1);
}
var times = [];
while(min <= max){
times.push([min.dateFormat(this.format)]);
min = min.add('mi', this.increment);
}
this.store = new Ext.data.ArrayStore({
fields: ['text'],
data : times
});
this.displayField = 'text';
}
}
它是继承combo的,所以要修改显示的值就需要对store入手,于是开始扩展,代码如下:
Ext.override( Ext.form.TimeField,{
setRangeValue : function(minValue,maxValue){
if(!Ext.isEmpty(minValue)){
this.minValue = this.parseDate(minValue);
}
if(!Ext.isEmpty(maxValue)){
this.maxValue = this.parseDate(maxValue);
}
var min = this.parseDate(this.minValue);
if(!min){
min = new Date(this.initDate).clearTime();
}
var max = this.parseDate(this.maxValue);
if(!max){
max = new Date(this.initDate).clearTime().add('mi', (24 * 60) - 1);
}
var times = [];
while(min <= max){
times.push([min.dateFormat(this.format)]);
min = min.add('mi', this.increment);
}
this.store.loadData(times);
}
});
测试代码:
function test3(){
Ext.override( Ext.form.TimeField,{
setRangeValue : function(minValue,maxValue){
if(!Ext.isEmpty(minValue)){
this.minValue = this.parseDate(minValue);
}
if(!Ext.isEmpty(maxValue)){
this.maxValue = this.parseDate(maxValue);
}
var min = this.parseDate(this.minValue);
if(!min){
min = new Date(this.initDate).clearTime();
}
var max = this.parseDate(this.maxValue);
if(!max){
max = new Date(this.initDate).clearTime().add('mi', (24 * 60) - 1);
}
var times = [];
while(min <= max){
times.push([min.dateFormat(this.format)]);
min = min.add('mi', this.increment);
}
this.store.loadData(times);
}
});
var t = new Ext.form.TimeField({
minValue: '9:00 AM',
maxValue: '6:00 PM',
increment: 30,
renderTo:document.body
});
var b = new Ext.Button({
renderTo:document.body,
text:'设置结束时间为20:00',
handler:function(){
t.setRangeValue(null,'10:00 PM')
}
})
}
Ext.onReady(test3);
分享到:
相关推荐
EXTJS3.0扩展例子集合...内含源代码...
extjs扩展教程 extjs扩展教程extjs扩展教程
由后台返回的json的日期时间格式中,往往都是 类似 "/Date(1309200300000)/"的日期时间格式,结果导致无法正常在TimeField中显示
extjs扩展年度控件,EXTJS里的时间控件的年度重写
在ExtJs4.2表单控件里分别有个时间控件(datafield)和时间控件(timefield),但是官方提供的控件不能将日期和时分秒整合到一起,我从网上搜集整理了一个可用的选择日期时分秒的拓展控件,extjs版本是4.2,亲测能用,...
ExtJs:收集基于ExtJs扩展的一些控件 ExtJs:收集基于ExtJs扩展的一些控件
本文是extjs的扩展包,可以在页面中插入图片,把这个js文件放入相应的目录下,extjs就是引用这个类型,就可以插入图片
ExtJs DWR扩展 DWRProxy、DWRTreeLoader、DWRGridProxy,经过EXT3.0版本测试! 通过DWR向Ext提供数据!非常棒的扩展!
dreamweaver Extjs 扩展插件语法提示 在dreamweaver中可以显示Extjs语法提示,提升开发效率,用起来很方便 分.zxp和.mxp两种扩展 cc2015,cs6均可用。 扩展安装需要到用Adobe Extension Manager,请自行在网上百度,...
ExtJS扩展包(ExtJsExtenderControl)ExtExtenders
同事写的extjs月份扩展控件,可以直接调用,用于只要求显示月份不显示日期的项目
ExtJS扩展:lovcombo(已解决Bug版) 内赋详细使用说明
ExtJS 组件扩展 如何正确使用Extjs---扩展组件的两个层次
extjs扩展标记 ,实现extjs的jsp标签,功能强大
实现对Ext树进行分页的组件,扩展了TreeLaoder和PagingToobar
Extjs表单VTYPE扩展,方便验证!
分享给爱好EXTJS的同胞们! EXTJS4.0文件夹下面包括 1.只有年月选择--dateYM.html (这个在EXTJS4.0和4.1下显示都是可以的) 2.扩展日期选择时分秒--dateTimeField4.0.html (这个只在EXTJS4.0下显示可以) ...
extjs6 datetimefield 时间 增加分时秒控件
extjs extjs extjs extjs extjs extjs