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,
'"> </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="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 : " ",
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'
});
1 楼
hilinw
2010-08-11
说明一下，extjs版本是2.2 +
2 楼
babydeed
2010-08-12
楼主不妨看看这个文章 http://chemzqm.iteye.com/blog/653723
3 楼
hilinw
2010-08-18
楼主不妨看看这个文章 http://chemzqm.iteye.com/blog/653723
看过了。
确实强大。
但是只能在3.0 +以上用吧。
以前试用过3.0。因为Extjs 引入了闭包，扩展性不好而没有使用。
4 楼
dayone
2010-08-31
哥们 spinner.gif 给传一个呗
5 楼
xiaoyayaday
2012-02-17
css 呢？
6 楼
zht520
2012-06-15
不错 实现效果很好