自己来封装Ext组件5--Steel2DateField
-----------------------------------------------------------------------------------------------------------------------
声明一下下：
由于这些东西是我刚写好就贴上来的，没怎么详细的测试过，有BUG那是必须的，这里仅起到抛砖引玉的作用
如果有什么问题，大家可以联系我 [email protected] 或直接评论， 谢谢！！
文章中后端技术是用的 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);
里面的方法应该都可以见名知意，就不废话了。。。。。。
其实这只不过是个抛砖引玉，如果需要相关的控件时候，相信你也可以自己动手弄了