ext 年历框添加清空按钮

ext 日历框添加清空按钮

将下列代码复制到

<script type="text/javascript" src="${pageContext.request.contextPath}/jslib/ext/ext-all.js"></script>

下一行就好。

Ext.override(Ext.DatePicker, {
?clearText:'清空',
?// private
??? onRender : function(container, position){
?
??????? var m = [
???????????? '<table cellspacing="0">',
??????????????? '<tr><td title="', this.prevText ,'">&#160;</a></td><td align="center"></td><td title="', this.nextText ,'">&#160;</a></td></tr>',
??????????????? '<tr><td colspan="3"><table cellspacing="0"><thead><tr>'],
??????????????? dn = this.dayNames,
??????????????? i;
??????? for(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.push('</tr></tbody></table></td></tr>',
??????? ??'<tr><td colspan="3" align="center">',
??????? ???'<table><tr><td 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);

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

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

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

??????? this.keyNav = new Ext.KeyNav(this.eventEl, {
??????????? 'left' : function(e){
??????????????? if(e.ctrlKey){
??????????????????? this.showPrevMonth();
??????????????? }else{
??????????????????? this.update(this.activeDate.add('d', -1));
??????????????? }
??????????? },

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

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

??????????? 'down' : function(e){
??????????????? if(e.ctrlKey){
??????????????????? this.showPrevYear();
??????????????? }else{
??????????????????? 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.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.el.child('em').addClass('x-btn-arrow');
??????? var today = (new Date()).dateFormat(this.format);
??????? if(this.showToday){
??????????? this.todayKeyListener = this.eventEl.addKeyListener(Ext.EventObject.SPACE, this.selectToday,? this);
???????????
??????????? this.todayBtn = new Ext.Button({
??????????????? renderTo: this.el.child('td.x-date-today', true),
??????????????? text: String.format(this.todayText, today),
??????????????? tooltip: String.format(this.todayTip, today),
??????????????? handler: this.selectToday,
??????????????? scope: this
??????????? });
??????? }
????? //增加清空按钮事件
??this.clearDate=function(){
??? ??this.setValue(new Date().clearTime());
??????????? this.fireEvent('select', this, null);
??? ?};
??????? this.todayBtn = new Ext.Button({
??????????? renderTo: this.el.child('td.x-date-clear', true),
??????????? text: this.clearText,
??????????? tooltip: this.clearText,
??????????? handler: this.clearDate,
??????????? scope: this
??????? });
??????? this.mon(this.eventEl, 'mousewheel', this.handleMouseWheel, this);
??????? this.mon(this.eventEl, 'click', this.handleDateClick,? this, {delegate: 'a.x-date-date'});
??????? this.mon(this.mbtn, 'click', this.showMonthPicker, this);
??????? this.onEnable(true);
??? }
???
});