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

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 ,'">&#160;</a></td><td class="x-date-middle" align="center"></td><td class="x-date-right"><a href="#" title="', this.nextText ,'">&#160;</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>';