ExtJS 2.2测试通过 datefield加上时分秒的代码

最新推荐文章于 2024-08-20 23:53:43 发布

kunlong0909

最新推荐文章于 2024-08-20 23:53:43 发布

阅读量4.1k

点赞数

分类专栏： Extjs JAVASCRIPT 文章标签： extjs 测试 function class date parameters

本文链接：https://blog.csdn.net/kunlong0909/article/details/7517543

版权

本文介绍了如何在ExtJS 2.2中扩展DatePicker组件，实现带有时分秒的选择器。包括CSS样式设置，JS代码实现以及构造函数和事件处理。还展示了应用此组件的案例代码。

摘要由CSDN通过智能技术生成

1、CSS中加上（图片路径自己修改就行，glass-bg.gif在ext包下面搜一下，肯定有。arrowLeft和arrowRight也在example里有）：

.minutecss{
padding:4px;
height:100%;
border-top: 1px solid #a3bad9;
background: #dfecfb url(../ext/resources/images/state/shared/glass-bg.gif) repeat-x left top;
}
.y-hour-middle,.y-hour-left,.y-hour-right {
font:bold 11px "sans serif", tahoma, verdana, helvetica;
overflow:hidden;
}

.y-hour-right, .y-hour-left {
width:18px;
}
.y-hour-right{
text-align:right;
}
.y-hour-middle {
padding-top:2px;
padding-bottom:2px;
color:#5C95FE;
}
.y-hour-right a, .y-hour-left a{
display:block;
width:16px;
height:16px;
background-position: center;
background-repeat: no-repeat;
cursor:pointer;
}

.y-hour-right a {
background-image: url(../images/arrowRight.gif);
margin-right:2px;
}
.y-hour-left a{
background-image: url(../images/arrowLeft.gif);
margin-left:2px;
}
.y-minute-middle,.y-minute-left,.y-minute-right {
font:bold 11px "sans serif", tahoma, verdana, helvetica;
overflow:hidden;
}

.y-minute-right, .y-minute-left {
width:18px;
}
.y-minute-right{
text-align:right;
}
.y-minute-middle {
padding-top:2px;
padding-bottom:2px;
color:#5C95FE;
}
.y-minute-right a, .y-minute-left a{
display:block;
width:16px;
height:16px;
background-position: center;
background-repeat: no-repeat;
cursor:pointer;
}

.y-minute-right a {
background-image: url(../images/arrowRight.gif);
margin-right:2px;
}
.y-minute-left a{
background-image: url(../images/arrowLeft.gif);
margin-left:2px;
}

.y-second-middle,.y-second-left,.y-second-right {
font:bold 11px "sans serif", tahoma, verdana, helvetica;
overflow:hidden;
}

.y-second-right, .y-second-left {
width:18px;
}
.y-second-right{
text-align:right;
}
.y-second-middle {
padding-top:2px;
padding-bottom:2px;
color:#5C95FE;
}
.y-second-right a, .y-second-left a{
display:block;
width:16px;
height:16px;
background-position: center;
background-repeat: no-repeat;
cursor:pointer;
}

.y-second-right a {
background-image: url(../images/arrowRight.gif);
margin-right:2px;
}
.y-second-left a{
background-image: url(../images/arrowLeft.gif);
margin-left:2px;
}

2.JS文件里加上如下代码

/********** CONSTRUCTOR ******
* Parameters: as per Ext.DatePicker
****/
DatetimePicker = function(config){
/** Call superclass constructor **/
DatetimePicker.superclass.constructor.call(this, config);
};

// 重写datePicker
Ext.extend(DatetimePicker, Ext.DatePicker, {

/**
* Method Name: onRender
* Description: as per Ext.DatePicker's onRender, except renders year in its own cell with arrow-changers in additional columns
* Parameters: as per Ext.DatePicker's onRender
* Returns: n/a
* Throws: n/a
*/
// 点击今天按钮
selectToday : function(){
this.setValue(new Date().clearTime());
var val1 = this.value;
val1.setHours(this.theHours);
val1.setMinutes(this.theMinutes);
val1.setSeconds(this.theSeconds);
this.fireEvent("select", this, val1);
},
// 选择某个日期
handleDateClick : function(e, t){
e.stopEvent();
if(t.dateValue && !Ext.fly(t.parentNode).hasClass("x-date-disabled")){
this.setValue(new Date(t.dateValue));
var val1 = this.value;
val1.setHours(this.theHours);
val1.setMinutes(this.theMinutes);
val1.setSeconds(this.theSeconds);
this.fireEvent("select", this, val1);
}
},
onRender : function(container, position){
var m = [
'<table cellspacing="0">',
'<tr><td colspan="3"><table cellspacing="0" width="100%"><tr><td class="x-date-left"><a href="#" title="', this.prevText ,'"> </a></td><td class="x-date-middle" align="center"></td><td class="x-date-right"><a href="#" title="', this.nextText ,'"> </a></td></tr></table></td></tr>',
'<tr><td colspan="3"><table class="x-date-inner" cellspacing="0"><thead><tr>'];
var dn = this.dayNames;
for(var i = 0; i < 7; i++){
var d = this.startDay+i;
if(d > 6){
d = d-7;
}
m.push("<th><span>", dn[d].substr(0,1), "</span></th>");
}
m[m.length] = "</tr></thead><tbody><tr>";
for(i = 0; i < 42; i++) {
if(i % 7 === 0 && i !== 0){
m[m.length] = "</tr><tr>";
}
m[m.length] = '<td><a href="#" hidefocus="on" class="x-date-date" tabIndex="1"><em><span></span></em></a></td>';
}

m[m.length] = '</tr></tbody></table></td></tr><tr><td class="minutecss"><table cellspacing="0" ><tr>';
m[m.length] = '<td class="y-hour-left"><a href="#" title="down"> </a></td><td class="y-hour-middle" align="center"></td><td class="y-hour-right"><a href="#" title="up"> </a></td>';
m[m.length] = '<td class="y-minute-left"><a href="#" title="down"> </a></td><td class="y-minute-middle" align="center"></td><td class="y-minute-right"><a href="#" title="up"> </a></td>';
m[m.length] = '<td class="y-second-left"><a href="#" title="down"> </a></td><td class="y-second-middle" align="center"></td><td class="y-second-right"><a href="#" title="up"> </a></td>';