ExtJS 扩展TimeField,设置时间区域

回答问题: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);