自己来封装Ext组件5--Steel2DateField

-----------------------------------------------------------------------------------------------------------------------

声明一下下：

由于这些东西是我刚写好就贴上来的，没怎么详细的测试过，有BUG那是必须的，这里仅起到抛砖引玉的作用

如果有什么问题，大家可以联系我 [e-mail]  或直接评论， 谢谢！！

文章中后端技术是用的  Nutz  http://nutzam.com/  ---  除SSH之外的另一种选择  （打个小广告，哈哈！！）

------------------------------------------------------------------------------------------------------------------------

 

在做列表和报表查询时，为了限制数据量，通常都会有一个对时间段的限制，为此有了下面的这个控件Steel2DateField

先看效果图

默认会生成如下两个表单值：

 

不多说，代码如下：

 

/**
 * 一个用于查询列表条件区的日期范围控件
 * 
 * @class Ext.Steel2DateField
 * @extends Ext.Container
 *     部分特定配置方法：	
 *     ------------------------------------------
 *     如果要对两个field进行特殊配置，请用下面两个配置项
 *     beginCfg：见 DateField
 *     endCfg：  见 DateField
 *     
 *     format： Steel.DEFAULTDATEFORMAT  通用配置
 *     name：会默认加上前缀 begin 和 end 表示开始和结束时间
 *     
 *     获取和设置值相关方法如下
 *     setBeginDateValue
 *     getBeginDateValue
 *     setEndDateValue
 *     getEndDateValue
 *     setValues：参数为      (bv,ev)
 *     getValues：返回值为数组 [bv,ev]
 *	   ------------------------------------------
 */
Ext.Steel2DateField = Ext.extend(Ext.Container,{
         initComponent: function(){
                Ext.Steel2DateField.superclass.initComponent.call(this);
         },
         constructor:function(options){
                Ext.apply(this,options);
                this.beginDate=new Ext.form.DateField(
                					Ext.apply({
                                    	x:0,y:0,
                                    	width:100,
                                    	format:this.format||Steel.DEFAULTDATEFORMAT,
                                    	name:this.name ? 'begin'+this.name : 'beginDate'
                                    },this.beginCfg||{}));
                                      
                  this.endDate=new Ext.form.DateField(
                  					Ext.apply({
                                        x:122,y:0,
                                        width:100,
                                        format:this.format||Steel.DEFAULTDATEFORMAT,
                                    	name:this.name ? 'end'+this.name : 'endDate'
                                    },this.endCfg||{}));  
                  this.layout = 'absolute';                    
                  this.items=[
                  			this.beginDate
                  			,{
                            	xtype:'label',
                            	x:105,y:0,
                            	text:Steel.DATEFIELDSEPARATOR
                            },this.endDate
                  ];
                Ext.Steel2DateField.superclass.constructor.call(this);
         },
         setBeginDateValue:function(v){
         	this.beginDate.setValue(v);
         },
         setEndDateValue:function(v){
         	this.endDate.setValue(v);
         },
         setValues:function(bv,ev){
         	this.beginDate.setValue(bv);
         	this.endDate.setValue(ev);
         },
         getBeginDateValue:function(){
              return this.beginDate.getValue();
         },
         getEndDateValue:function(){
              return this.endDate.getValue();
         },
         getValues:function(){
             return [this.beginDate.getValue(),this.endDate.getValue()];
         }
});

Ext.reg('steel2date', Ext.Steel2DateField);

 里面的方法应该都可以见名知意，就不废话了。。。。。。

其实这只不过是个抛砖引玉，如果需要相关的控件时候，相信你也可以自己动手弄了