我的扩展EXT时间控件，可以选择到时分

Ext.ux.form.DateTimePicker:

//不能单据使用，必先引用 Ext.ux.form.Spinner
Ext.ns('Ext.ux.form');
Ext.ux.form.DateTimePicker = function(config) {
Ext.ux.form.DateTimePicker.superclass.constructor.call(this, config);
};

Ext.extend(Ext.ux.form.DateTimePicker, Ext.DatePicker, {
hourText:'时',
minuteText:'分',
spinnerCfg : {
width : 40
},
    initComponent : function(){
        Ext.DatePicker.superclass.initComponent.call(this);
        this.value = this.value ?this.value : new Date();
        this.addEvents(
            'select'
        );
        if(this.handler){
            this.on("select", this.handler,  this.scope || this);
        }
        this.initDisabledDays();
    },
selectToday : function() {
this.setValue(new Date());
this.value.setHours(this.theHours);
this.value.setMinutes(this.theMinutes);
this.fireEvent("select", this, this.value);
},
handleDateClick : function(e, t) {
e.stopEvent();
if (t.dateValue && !Ext.fly(t.parentNode).hasClass("x-date-disabled")) {
this.value = new Date(t.dateValue);
this.value.setHours(this.theHours);
this.value.setMinutes(this.theMinutes);
this.setValue(this.value);
this.fireEvent("select", this, this.value);
}
},
onRender : function(container, position) {
var m = ['<table cellspacing="0" width="200px">', '<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="x-hour"></td><td>'+this.hourText+'</td><td width ="5px"></td><td class="x-minute"></td><td>'+this.minuteText+'</td>';
m[m.length] = '</tr></table></td><td  colspan="2" class="x-date-bottom" align="center"></td></tr></table><div class="x-date-mp"></div>';

var el = document.createElement("div");
el.className = "x-date-picker";
el.innerHTML = m.join("");

container.dom.insertBefore(el, position);

this.el = Ext.get(el);
this.eventEl = Ext.get(el.firstChild);

new Ext.util.ClickRepeater(this.el.child("td.x-date-left a"), {
handler : this.showPrevMonth,
scope : this,
preventDefault : true,
stopDefault : true
});

new Ext.util.ClickRepeater(this.el.child("td.x-date-right a"), {
handler : this.showNextMonth,
scope : this,
preventDefault : true,
stopDefault : true
});

var cfg = Ext.apply({}, this.spinnerCfg, {
readOnly : this.readOnly,
disabled : this.disabled,
align : 'right',
selectOnFocus : true,
listeners : {
spinup : {
fn : this.onSpinnerChange,
scope : this
},
spindown : {
fn : this.onSpinnerChange,
scope : this
},
change : {
fn : this.onSpinnerChange,
scope : this
},

afterrender : {
fn : function(spinner) {
spinner.wrap.applyStyles('float: left');
},
single : true
}
}
});
this.hoursSpinner = new Ext.ux.form.Spinner(Ext.apply({}, cfg, {
renderTo:this.el.child("td.x-hour", true),
strategy : new Ext.ux.form.Spinner.NumberStrategy({
minValue : 0,
maxValue : 23
}),
cls : 'first',
value : this.theHours
}));
this.minutesSpinner = new Ext.ux.form.Spinner(Ext.apply({}, cfg, {
renderTo:this.el.child("td.x-minute", true),
strategy : new Ext.ux.form.Spinner.NumberStrategy({
minValue : 0,
maxValue : 59
}),
value : this.theMinutes
}));

this.eventEl.on("mousewheel", this.handleMouseWheel, this);

this.monthPicker = this.el.down('div.x-date-mp');
this.monthPicker.enableDisplayMode('block');

var kn = new Ext.KeyNav(this.eventEl, {
"left" : function(e) {
e.ctrlKey ? this.showPrevMonth() : this.update(this.activeDate.add("d", -1));
},

"right" : function(e) {
e.ctrlKey ? this.showNextMonth() : this.update(this.activeDate.add("d", 1));
},

"up" : function(e) {
e.ctrlKey ? this.showNextYear() : this.update(this.activeDate.add("d", -7));
},

"down" : function(e) {
e.ctrlKey ? this.showPrevYear() : this.update(this.activeDate.add("d", 7));
},

"pageUp" : function(e) {
this.showNextMonth();
},

"pageDown" : function(e) {
this.showPrevMonth();
},

"enter" : function(e) {
e.stopPropagation();
return true;
},

scope : this
});

this.eventEl.on("click", this.handleDateClick, this, {
delegate : "a.x-date-date"
});

this.eventEl.addKeyListener(Ext.EventObject.SPACE, this.selectToday, this);

this.el.unselectable();

this.cells = this.el.select("table.x-date-inner tbody td");
this.textNodes = this.el.query("table.x-date-inner tbody span");

this.mbtn = new Ext.Button({
text : "&#160;",
tooltip : this.monthYearText,
renderTo : this.el.child("td.x-date-middle", true)
});

this.mbtn.on('click', this.showMonthPicker, this);
this.mbtn.el.child(this.mbtn.menuClassTarget).addClass("x-btn-with-menu");

var dt1 = new Date();
var txt = '';
this.theHours = dt1.getHours();
if (this.theHours < 10) {
txt = '0' + this.theHours;
} else {
txt = this.theHours;
}
this.hoursSpinner.setValue(txt);

this.theMinutes = dt1.getMinutes();
if (this.theMinutes < 10) {
txt = '0' + this.theMinutes;
} else {
txt = this.theMinutes;
}
this.minutesSpinner.setValue(txt);

var today = (new Date()).dateFormat(this.format);
var todayBtn = new Ext.Button({
renderTo : this.el.child("td.x-date-bottom", true),
text : String.format(this.todayText, today),
tooltip : String.format(this.todayTip, today),
handler : this.selectToday,
scope : this
});

if (Ext.isIE) {
this.el.repaint();
}
this.update(this.value);
},

onSpinnerChange : function() {
if (!this.rendered) {
return;
}
this.fireEvent('change', this, this.getHourAndMinuteValue());
},
getHourAndMinuteValue : function() {
this.theHours = this.hoursSpinner.getValue();
this.theMinutes = this.minutesSpinner.getValue();
},
    setValue : function(value){
        var old = this.value;
        this.value = value;
        if(this.el){
            this.update(this.value);
        }
    },
update : function(date) {
var vd = this.activeDate;
if(vd == this.value){
return;
}
this.activeDate = date;
if (vd && this.el) {
var t = date.getTime();
if (vd.getMonth() == date.getMonth() && vd.getFullYear() == date.getFullYear()) {
this.cells.removeClass("x-date-selected");
this.cells.each(function(c) {
if (c.dom.firstChild.dateValue == t) {
c.addClass("x-date-selected");
setTimeout(function() {
try {
c.dom.firstChild.focus();
} catch (e) {
}
}, 50);
return false;
}
});
if(vd.getHours() == date.getHours() && vd.getMinutes() == date.getMinutes()){
return;
}else{
var txt = date?date.getHours():0;
if (txt < 10) {
txt = '0' + txt;
}
this.hoursSpinner.setValue(txt);
txt = date?date.getMinutes():0;

if (txt < 10) {
txt = '0' + txt;
} else {
txt = txt;
}
this.minutesSpinner.setValue(txt);
return;
}
}
}
var days = date.getDaysInMonth();
var firstOfMonth = date.getFirstDateOfMonth();
var startingPos = firstOfMonth.getDay() - this.startDay;

if (startingPos <= this.startDay) {
startingPos += 7;
}

var pm = date.add("mo", -1);
var prevStart = pm.getDaysInMonth() - startingPos;

var cells = this.cells.elements;
var textEls = this.textNodes;
days += startingPos;

var day = 86400000;
var d = new Date(pm.getFullYear(), pm.getMonth(), prevStart);
var today = new Date().clearTime().getTime();
var sel = date.clearTime().getTime();
var min = this.minDate ? this.minDate.clearTime() : Number.NEGATIVE_INFINITY;
var max = this.maxDate ? this.maxDate.clearTime() : Number.POSITIVE_INFINITY;
var ddMatch = this.disabledDatesRE;
var ddText = this.disabledDatesText;
var ddays = this.disabledDays ? this.disabledDays.join("") : false;
var ddaysText = this.disabledDaysText;
var format = this.format;

var setCellClass = function(cal, cell) {
cell.title = "";
d = d.clearTime();
var t = d.getTime();
cell.firstChild.dateValue = t;
if (t == today) {
cell.className += " x-date-today";
cell.title = cal.todayText;
}
if (t == sel) {
cell.className += " x-date-selected";
setTimeout(function() {
try {
cell.firstChild.focus();
} catch (e) {
}
}, 50);
}
// disabling
if (t < min) {
cell.className = " x-date-disabled";
cell.title = cal.minText;
return;
}
if (t > max) {
cell.className = " x-date-disabled";
cell.title = cal.maxText;
return;
}
if (ddays) {
if (ddays.indexOf(d.getDay()) != -1) {
cell.title = ddaysText;
cell.className = " x-date-disabled";
}
}
if (ddMatch && format) {
var fvalue = d.dateFormat(format);
if (ddMatch.test(fvalue)) {
cell.title = ddText.replace("%0", fvalue);
cell.className = " x-date-disabled";
}
}
};

var i = 0;
for (; i < startingPos; i++) {
textEls[i].innerHTML = (++prevStart);
d.setDate(d.getDate() + 1);
cells[i].className = "x-date-prevday";
setCellClass(this, cells[i]);
}
for (; i < days; i++) {
var intDay = i - startingPos + 1;
textEls[i].innerHTML = (intDay);
d.setDate(d.getDate() + 1);
cells[i].className = "x-date-active";
setCellClass(this, cells[i]);
}
var extraDays = 0;
for (; i < 42; i++) {
textEls[i].innerHTML = (++extraDays);
d.setDate(d.getDate() + 1);
cells[i].className = "x-date-nextday";
setCellClass(this, cells[i]);
}

this.mbtn.setText(this.monthNames[date.getMonth()] + " " + date.getFullYear());
this.theHours = date?date.getHours():0;
var txt = this.theHours;
if (this.theHours < 10) {
txt = '0' + this.theHours;
}
this.hoursSpinner.setValue(txt);
this.theMinutes = date?date.getMinutes():0;
if (this.theMinutes < 10) {
txt = '0' + this.theMinutes;
} else {
txt = this.theMinutes;
}
this.minutesSpinner.setValue(txt);

if (!this.internalRender) {
var main = this.el.dom.firstChild;
var w = main.offsetWidth;
this.el.setWidth(w + this.el.getBorderWidth("lr"));
Ext.fly(main).setWidth(w);
this.internalRender = true;
if (Ext.isOpera && !this.secondPass) {
main.rows[0].cells[1].style.width = (w - (main.rows[0].cells[0].offsetWidth + main.rows[0].cells[2].offsetWidth)) + "px";
this.secondPass = true;
this.update.defer(10, this, [date]);
}
}
}
});

Ext.ux.form.DateTimeItem = function(config) {

Ext.ux.form.DateTimeItem.superclass.constructor.call(this, new Ext.ux.form.DateTimePicker(config), config);
this.picker = this.component;
this.addEvents({
select : true
});

this.picker.on("render", function(picker) {
picker.getEl().swallowEvent("click");
picker.container.addClass("x-menu-date-item");
});

this.picker.on("select", this.onSelect, this);
};

Ext.extend(Ext.ux.form.DateTimeItem, Ext.menu.Adapter, {
onSelect : function(picker, date) {
this.fireEvent("select", this, date, picker);
Ext.ux.form.DateTimeItem.superclass.handleClick.call(this);
}
});

Ext.ux.form.DateTimeMenu = function(config) {
Ext.ux.form.DateTimeMenu.superclass.constructor.call(this, config);
this.plain = true;
var di = new Ext.ux.form.DateTimeItem(config);
this.add(di);
this.picker = di.picker;
this.relayEvents(di, ["select"]);
};
Ext.extend(Ext.ux.form.DateTimeMenu, Ext.menu.Menu);

Ext.reg('datetimepicker', Ext.ux.form.DateTimePicker);



spinner.js:

Ext.namespace("Ext.ux.form");

/**
 * Ext.ux.form.Spinner Class
 * 
 * @author Steven Chim
 * @version Spinner.js 2008-01-10 v0.21
 * 
 * @class Ext.ux.form.Spinner
 * @extends Ext.form.TriggerField 2008.06.25 wlh 增加对齐显示参数： align
 */

Ext.ux.form.Spinner = function(config) {
	Ext.ux.form.Spinner.superclass.constructor.call(this, config);
	this.addEvents({
		'spinup' : true,
		'spindown' : true
	});
}

Ext.extend(Ext.ux.form.Spinner, Ext.form.TriggerField, {
	triggerClass : 'x-form-spinner-trigger',
	splitterClass : 'x-form-spinner-splitter',

	alternateKey : Ext.EventObject.shiftKey,
	strategy : undefined,
	align : 'left',
	// private
	onRender : function(ct, position) {
		if (this.align == 'right') {
			this.fieldClass = 'x-form-num-field';
		}
		Ext.ux.form.Spinner.superclass.onRender.call(this, ct, position);

		this.splitter = this.wrap.createChild({
			tag : 'div',
			cls : this.splitterClass,
			style : 'width:13px; height:2px;'
		});
		this.splitter.show().setRight((Ext.isIE) ? 1 : 2);
		this.splitter.show().setTop((Ext.isIE) ? 10 : 10);

		this.proxy = this.trigger.createProxy('', this.splitter, true);
		this.proxy.addClass("x-form-spinner-proxy");
		this.proxy.setStyle('left', '0px');
		this.proxy.setSize(14, 1);
		this.proxy.hide();
		this.dd = new Ext.dd.DDProxy(this.splitter.dom.id, "SpinnerDrag", {
			dragElId : this.proxy.id
		});

		this.initSpinner();
	},

	// private
	initSpinner : function() {
		this.keyNav = new Ext.KeyNav(this.el, {
			"up" : function(e) {
				this.onSpinUp();
			},

			"down" : function(e) {
				this.onSpinDown();
			},

			"pageUp" : function(e) {
				this.onSpinUpAlternate();
			},

			"pageDown" : function(e) {
				this.onSpinDownAlternate();
			},

			scope : this
		});

		this.trigger.un("click", this.onTriggerClick);
		this.repeater = new Ext.util.ClickRepeater(this.trigger);
		// xyr 会出现两次click时间，去掉该行
		// this.repeater.on("click", this.onTriggerClick, this,
		// {preventDefault:true});
		this.trigger.on("mouseover", this.onMouseOver, this, {
			preventDefault : true
		});
		this.trigger.on("mouseout", this.onMouseOut, this, {
			preventDefault : true
		});
		this.trigger.on("mousemove", this.onMouseMove, this, {
			preventDefault : true
		});
		this.trigger.on("mousedown", this.onMouseDown, this, {
			preventDefault : true
		});
		this.trigger.on("mouseup", this.onMouseUp, this, {
			preventDefault : true
		});
		this.wrap.on("mousewheel", this.handleMouseWheel, this);
		this.wrap.on("blur", this.onBlur, this);

		this.dd.setXConstraint(0, 0, 10)
		this.dd.setYConstraint(1500, 1500, 10);
		this.dd.endDrag = this.endDrag.createDelegate(this);
		this.dd.startDrag = this.startDrag.createDelegate(this);
		this.dd.onDrag = this.onDrag.createDelegate(this);

		if (this.strategy == undefined) {
			this.strategy = new Ext.ux.form.Spinner.NumberStrategy();
		}
	},

	// private
	onMouseOver : function() {
		if (this.disabled) {
			return;
		}
		var middle = this.getMiddle();
		this.__tmphcls = (Ext.EventObject.getPageY() < middle) ? 'x-form-spinner-overup' : 'x-form-spinner-overdown';
		this.trigger.addClass(this.__tmphcls);
	},

	// private
	onMouseOut : function() {
		this.trigger.removeClass(this.__tmphcls);
	},

	// private
	onMouseMove : function() {
		if (this.disabled) {
			return;
		}
		var middle = this.getMiddle();
		if (((Ext.EventObject.getPageY() > middle) && this.__tmphcls == "x-form-spinner-overup")
				|| ((Ext.EventObject.getPageY() < middle) && this.__tmphcls == "x-form-spinner-overdown")) {
		}
	},

	// private
	onMouseDown : function() {
		if (this.disabled) {
			return;
		}
		var middle = this.getMiddle();
		this.__tmpccls = (Ext.EventObject.getPageY() < middle) ? 'x-form-spinner-clickup' : 'x-form-spinner-clickdown';
		this.trigger.addClass(this.__tmpccls);
	},

	// private
	onMouseUp : function() {
		this.trigger.removeClass(this.__tmpccls);
	},

	// private
	onTriggerClick : function() {
		if (this.disabled) {
			return;
		}
		var middle = this.getMiddle();
		var ud = (Ext.EventObject.getPageY() < middle) ? 'Up' : 'Down';
		this['onSpin' + ud]();
	},

	// private
	getMiddle : function() {
		var t = this.trigger.getTop();
		var h = this.trigger.getHeight();
		var middle = t + (h / 2);
		return middle;
	},

	handleMouseWheel : function(e) {
		var delta = e.getWheelDelta();
		if (delta > 0) {
			this.onSpinUp();
			e.stopEvent();
		} else if (delta < 0) {
			this.onSpinDown();
			e.stopEvent();
		}
	},

	onBlur : function(e) {
		this.strategy.onBlur(this);
		this.fireEvent("spinup", this);
	},

	// private
	startDrag : function() {
		this.proxy.show();
		this._previousY = Ext.fly(this.dd.getDragEl()).getTop();
	},

	// private
	endDrag : function() {
		this.proxy.hide();
	},

	// private
	onDrag : function() {
		if (this.disabled) {
			return;
		}
		var y = Ext.fly(this.dd.getDragEl()).getTop();
		var ud = '';

		if (this._previousY > y) {
			ud = 'Up';
		} // up
		if (this._previousY < y) {
			ud = 'Down';
		} // down

		if (ud != '') {
			this['onSpin' + ud]();
		}

		this._previousY = y;
	},

	// private
	onSpinUp : function() {
		// debugger;
		if (Ext.EventObject.shiftKey == true) {
			this.onSpinUpAlternate();
			return;
		} else {
			this.strategy.onSpinUp(this);
		}
		this.fireEvent("spinup", this);
	},

	// private
	onSpinDown : function() {
		if (Ext.EventObject.shiftKey == true) {
			this.onSpinDownAlternate();
			return;
		} else {
			this.strategy.onSpinDown(this);
		}
		this.fireEvent("spindown", this);
	},

	// private
	onSpinUpAlternate : function() {
		this.strategy.onSpinUpAlternate(this);
		this.fireEvent("spinup", this);
	},

	// private
	onSpinDownAlternate : function() {
		this.strategy.onSpinDownAlternate(this);
		this.fireEvent("spindown", this);
	}

});

Ext.reg('uxspinner', Ext.ux.form.Spinner);

/*******************************************************************************
 * Abstract Strategy
 */
Ext.ux.form.Spinner.Strategy = function(config) {
	Ext.apply(this, config);
};

Ext.extend(Ext.ux.form.Spinner.Strategy, Ext.util.Observable, {
	defaultValue : 0,
	minValue : undefined,
	maxValue : undefined,
	incrementValue : 1,
	alternateIncrementValue : 5,

	onSpinUp : function(field) {
		this.spin(field, false, false);
	},

	onSpinDown : function(field) {
		this.spin(field, true, false);
	},

	onSpinUpAlternate : function(field) {
		this.spin(field, false, true);
	},

	onSpinDownAlternate : function(field) {
		this.spin(field, true, true);
	},

	onBlur : function(field){
		// extend
	},
	
	spin : function(field, down, alternate) {
		// extend
	},

	fixBoundries : function(value) {
		return value;
		// overwrite
	}

});

/*******************************************************************************
 * Concrete Strategy: Numbers
 */
Ext.ux.form.Spinner.NumberStrategy = function(config) {
	Ext.ux.form.Spinner.NumberStrategy.superclass.constructor.call(this, config);
};

Ext.extend(Ext.ux.form.Spinner.NumberStrategy, Ext.ux.form.Spinner.Strategy, {

	allowDecimals : true,
	decimalPrecision : 2,

	onBlur : function(field){
		var v = parseFloat(field.getValue());
		v = (isNaN(v)) ? this.defaultValue : v;
		v = this.fixBoundries(v);
		field.setRawValue(v);
	},
	
	spin : function(field, down, alternate) {
		// debugger;
		Ext.ux.form.Spinner.NumberStrategy.superclass.spin.call(this, field, down, alternate);

		var v = parseFloat(field.getValue());
		var incr = (alternate == true) ? this.alternateIncrementValue : this.incrementValue;

		(down == true) ? v -= incr : v += incr;
		v = (isNaN(v)) ? this.defaultValue : v;
		v = this.fixBoundries(v);
		field.setRawValue(v);
	},

	fixBoundries : function(value) {
		var v = value;

		if (this.minValue != undefined && v < this.minValue) {
			v = this.minValue;
		}
		if (this.maxValue != undefined && v > this.maxValue) {
			v = this.maxValue;
		}

		return this.fixPrecision(v);
	},

	// private
	fixPrecision : function(value) {
		var nan = isNaN(value);
		if (!this.allowDecimals || this.decimalPrecision == -1 || nan || !value) {
			return nan ? '' : value;
		}
		return parseFloat(parseFloat(value).toFixed(this.decimalPrecision));
	}
});

/*******************************************************************************
 * Concrete Strategy: Date
 */
Ext.ux.form.Spinner.DateStrategy = function(config) {
	Ext.ux.form.Spinner.DateStrategy.superclass.constructor.call(this, config);
};

Ext.extend(Ext.ux.form.Spinner.DateStrategy, Ext.ux.form.Spinner.Strategy, {
	defaultValue : new Date(),
	format : "Y-m-d",
	incrementValue : 1,
	incrementConstant : Date.DAY,
	alternateIncrementValue : 1,
	alternateIncrementConstant : Date.MONTH,

	spin : function(field, down, alternate) {
		Ext.ux.form.Spinner.DateStrategy.superclass.spin.call(this);

		var v = field.getRawValue();

		v = Date.parseDate(v, this.format);
		var dir = (down == true) ? -1 : 1;
		var incr = (alternate == true) ? this.alternateIncrementValue : this.incrementValue;
		var dtconst = (alternate == true) ? this.alternateIncrementConstant : this.incrementConstant;

		if (typeof this.defaultValue == 'string') {
			this.defaultValue = Date.parseDate(this.defaultValue, this.format);
		}

		v = (v) ? v.add(dtconst, dir * incr) : this.defaultValue;

		v = this.fixBoundries(v);
		field.setRawValue(v.format(this.format));
	},

	// private
	fixBoundries : function(date) {
		var dt = date;
		var min = (typeof this.minValue == 'string') ? Date.parseDate(this.minValue, this.format) : this.minValue;
		var max = (typeof this.maxValue == 'string') ? Date.parseDate(this.maxValue, this.format) : this.maxValue;

		if (this.minValue != undefined && dt < min) {
			dt = min;
		}
		if (this.maxValue != undefined && dt > max) {
			dt = max;
		}

		return dt;
	}

});

/*******************************************************************************
 * Concrete Strategy: Time
 */
Ext.ux.form.Spinner.TimeStrategy = function(config) {
	Ext.ux.form.Spinner.TimeStrategy.superclass.constructor.call(this, config);
};

Ext.extend(Ext.ux.form.Spinner.TimeStrategy, Ext.ux.form.Spinner.DateStrategy, {
	format : "H:i",
	incrementValue : 1,
	incrementConstant : Date.MINUTE,
	alternateIncrementValue : 1,
	alternateIncrementConstant : Date.HOUR
});

Spinner.css

.x-form-spinner-proxy { /*background-color:#ff00cc;*/
	
}
.x-form-field-wrap .x-form-spinner-trigger {
	background: transparent url(../images/spinner.gif) no-repeat 0 0;
}
.x-form-field-wrap .x-form-spinner-overup {
	background-position: -17px 0;
}
.x-form-field-wrap .x-form-spinner-clickup {
	background-position: -34px 0;
}
.x-form-field-wrap .x-form-spinner-overdown {
	background-position: -51px 0;
}
.x-form-field-wrap .x-form-spinner-clickdown {
	background-position: -68px 0;
}
.x-trigger-wrap-focus .x-form-spinner-trigger {
	background-position: -85px 0;
}
.x-trigger-wrap-focus .x-form-spinner-overup {
	background-position: -102px 0;
}
.x-trigger-wrap-focus .x-form-spinner-clickup {
	background-position: -119px 0;
}
.x-trigger-wrap-focus .x-form-spinner-overdown {
	background-position: -136px 0;
}
.x-trigger-wrap-focus .x-form-spinner-clickdown {
	background-position: -153px 0;
}

使用方式：
		this.birthday = new Ext.form.DateField({
			renderTo : 'birthday',
			width : 120,
			format : 'Y-m-d H:i',
			menu : new Ext.ux.form.DateTimeMenu(),
			selectOnFocus : true,
			allowBlank : true,
			msgTargethelp:'title'
		});