我在 中添加了新的关闭按钮Ext.picker.Date，但它的处理程序没有被调用。这是我的代码的 jsfiddle 链接http://jsfiddle.net/ZBKTE/1/
此代码的一些详细信息如下
第 12 行 - 在选取器的第 55 行中添加新的关闭按钮的renderTpl
代码 - 用于在 DOM 中呈现关闭按钮的代码 第 59 行 - initComponent 方法创建了closeBtn.
这里也是完整的代码
Ext.define('my.view.form.DatePicker', {
extend: 'Ext.picker.Date',
requires: [
'Ext.button.Button'],
alias: 'widget.my-datepicker',
msgTarget: 'none',
monthYearText: '',
ariaTitle: '',
renderTpl: [
'<div id="{id}-innerEl" role="grid">',
'<div id="{id}-buttonsEl" class="{baseCls}-close-button-parent">{%this.renderCloseBtn(values, out)%}</div>',
'<div role="presentation" class="{baseCls}-header">',
'<div class="{baseCls}-prev"><a id="{id}-prevEl" href="#" role="button" title="{prevText}"></a></div>',
'<div class="{baseCls}-month" id="{id}-middleBtnEl">{%this.renderMonthBtn(values, out)%}</div>',
'<div class="{baseCls}-next"><a id="{id}-nextEl" href="#" role="button" title="{nextText}"></a></div>',
'</div>',
'<table id="{id}-eventEl" class="{baseCls}-inner" cellspacing="0" role="presentation">',
'<thead role="presentation"><tr role="presentation">',
'<tpl for="dayNames">',
'<th role="columnheader" title="{.}"><span>{.:this.firstInitial}</span></th>',
'</tpl>',
'</tr></thead>',
'<tbody role="presentation"><tr role="presentation">',
'<tpl for="days">',
'{#:this.isEndOfWeek}',
'<td role="gridcell" id="{[Ext.id()]}">',
'<a role="presentation" href="#" hidefocus="on" class="{parent.baseCls}-date" tabIndex="1">',
'<em role="presentation"><span role="presentation"></span></em>',
'</a>',
'</td>',
'</tpl>',
'</tr></tbody>',
'</table>',
'<tpl if="showToday">',
'<div id="{id}-footerEl" role="presentation" class="{baseCls}-footer">{%this.renderTodayBtn(values, out)%}</div>',
'</tpl>',
'</div>', {
firstInitial: function (value) {
return Ext.picker.Date.prototype.getDayInitial(value);
},
isEndOfWeek: function (value) {
// convert from 1 based index to 0 based
// by decrementing value once.
value--;
var end = value % 7 === 0 && value !== 0;
return end ? '</tr><tr role="row">' : '';
},
renderTodayBtn: function (values, out) {
Ext.DomHelper.generateMarkup(values.$comp.todayBtn.getRenderTree(), out);
},
renderMonthBtn: function (values, out) {
Ext.DomHelper.generateMarkup(values.$comp.monthBtn.getRenderTree(), out);
},
renderCloseBtn: function (values, out) {
Ext.DomHelper.generateMarkup(values.$comp.closeBtn.getRenderTree(), out);
}
}],
initComponent: function () {
var me = this;
me.closeBtn = new Ext.button.Button({
ownerCt: me,
ownerLayout: me.getComponentLayout(),
text: 'C',
handler: function () {
debug.console('need code for close click');
me.hide();
},
scope: me
});
me.callParent(arguments);
},
beforeRender: function () {
var me = this;
me.callParent(arguments);
//me.monthBtn.removeListener('click', me.showMonthPicker);
me.monthBtn = new Ext.button.Button({
ownerCt: me,
ownerLayout: me.getComponentLayout(),
text: '',
tooltip: me.monthYearText //,
});
},
/**
* Show the previous month.
* @param {Object} e
* @return {Ext.picker.Date} this
*/
showPrevMonth: function (e) {
if (Ext.Date.getFirstDateOfMonth(Ext.Date.add(this.activeDate, Ext.Date.MONTH, -1)) >= Ext.Date.getFirstDateOfMonth(this.minDate)) {
return this.update(Ext.Date.add(this.activeDate, Ext.Date.MONTH, -1));
}
},
/**
* Show the next month.
* @param {Object} e
* @return {Ext.picker.Date} this
*/
showNextMonth: function (e) {
if ((Ext.Date.add(this.activeDate, Ext.Date.MONTH, 1) <= this.maxDate)) {
return this.update(Ext.Date.add(this.activeDate, Ext.Date.MONTH, 1));
}
},
/**
* Respond to a date being clicked in the picker
* @private
* @param {Ext.EventObject} e
* @param {HTMLElement} t
*/
handleDateClick: function (e, t) {
var me = this;
if (Ext.fly(t.parentNode).hasCls(me.prevCls) || Ext.fly(t.parentNode).hasCls(me.nextCls)) {
e.stopEvent();
} else {
me.callParent(arguments);
}
}
});
Ext.define('my.view.form.ifsdatefield', {
extend: 'Ext.form.field.Date',
alias: 'widget.my-datefield',
msgTarget: 'none',
preventMark: true,
cls: 'ifs-datefield',
initComponent: function () {
var me = this;
me.callParent(arguments);
},
createPicker: function () {
var me = this,
format = Ext.String.format;
return new my.view.form.DatePicker({
pickerField: me,
ownerCt: me.ownerCt,
renderTo: document.body,
floating: true,
cls: me.cls,
ariaTitle: 'test',
hidden: true,
focusOnShow: true,
minDate: me.minValue,
maxDate: me.maxValue,
disabledDatesRE: me.disabledDatesRE,
disabledDatesText: me.disabledDatesText,
disabledDays: me.disabledDays,
disabledDaysText: me.disabledDaysText,
format: me.format,
showToday: me.showToday,
startDay: me.startDay,
minText: format(me.minText, me.formatDate(me.minValue)),
maxText: format(me.maxText, me.formatDate(me.maxValue)),
msgTarget: 'none',
width: 220,
height: 265,
listeners: {
scope: me,
select: me.onSelect
},
keyNavConfig: {
esc: function () {
me.collapse();
}
}
});
}
});
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
width: 300,
bodyPadding: 10,
title: 'Dates',
items: [{
xtype: 'my-datefield',
anchor: '100%',
fieldLabel: 'From',
name: 'from_date',
minValue: Ext.Date.add(new Date(), Ext.Date.YEAR, -5),
maxValue: Ext.Date.add(new Date(), Ext.Date.YEAR, 1),
value: Ext.Date.clearTime(new Date(), false),
editable: false
}]
});