ExtJS 扩展TimeField,设置时间区域

最新推荐文章于 2019-07-31 18:55:37 发布

最新推荐文章于 2019-07-31 18:55:37 发布 · 357 阅读

文章标签：

#EXT

ExtJS 专栏收录该内容

40 篇文章

订阅专栏

本文介绍如何为 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);