读书人
栏目▼

小弟我的扩展EXT时间控件可以选择到

发布时间： 2012-10-27 10:42:26 作者： rapoo

我的扩展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 title="', this.prevText,
'"> </a></td><td align="center"></td><td title="', this.nextText, '"> </a></td></tr></table></td></tr>',
'<tr><td colspan="3"><table 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" tabIndex="1"><em><span></span></em></a></td>';
}

m[m.length] = '</tr></tbody></table></td></tr><tr><td ><tr>';
m[m.length] = '<td align="center"></td></tr></table><div : 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:



Spinner.css


    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              不错 实现效果很好
读书人网 >Web前端

热点推荐

触屏版 | 电脑版

读书人网 m.reader8.net