Javascript Extjs 4.1.1在Datepicker中添加了新按钮，但其处理程序不工作

我在

Ext.picker.Date

中添加了新的close按钮，但未调用其处理程序。下面是我的代码的JSFIDLE链接

下面是该代码的一些详细信息

第12行-在选择器的renderTpl 第55行-在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
    }]
});

Ext.define（'my.view.form.DatePicker'{
扩展：“Ext.picker.Date”，
要求：[
“Ext.button.button']，
别名：“widget.my datepicker”，
msgTarget:'无'，
monthYearText:“”，
标题：''，
renderTpl：[
'',
“{%this.renderCloseBtn（值，输出）%}”，
'',
'',
“{%this.renderMonthBtn（值，输出）%}”，
'',
'',
'',
'',
'',
“{.：this.firstInitial}”，
'',
'',
'',
'',
“{#：this.isEndOfWeek}”，
'',
'',
'',
'',
'',
'',
'',
“{%this.renderTodayBtn（值，输出）%}”，
'',
'', {
firstInitial:函数（值）{
返回Ext.picker.Date.prototype.getDayInitial（值）；
},
isEndOfWeek:函数（值）{
//从基于1的索引转换为基于0的索引
//通过将值递减一次。
价值--；
var end=value%7==0&&value！==0；
返回结束？“”：“”；
},
renderTodayBtn:函数（值，输出）{
Ext.DomHelper.generateMarkup（值$comp.todayBtn.getRenderTree（），out）；
},
renderMonthBtn:函数（值，输出）{
Ext.DomHelper.generateMarkup（值$comp.monthBtn.getRenderTree（），out）；
},
renderCloseBtn：函数（值，输出）{
Ext.DomHelper.generateMarkup（值$comp.closeBtn.getRenderTree（），out）；
}
}],
initComponent:函数（）{
var me=这个；
me.closeBtn=新的Ext.button.button({
所有者：我，
ownerLayout:me.getComponentLayout（），
文本：“C”，
处理程序：函数（）{
控制台（'需要关闭单击代码'）；
我藏起来了；
},
范围：我
});
me.callParent（参数）；
},
beforeRender:函数（）{
var me=这个；
me.callParent（参数）；
//me.monthBtn.removeListener（'click'，me.showMonthPicker）；
me.monthBtn=新的Ext.button.button({
所有者：我，
ownerLayout:me.getComponentLayout（），
文本：“”，
工具提示：me.monthYearText/，
});
},
/**
*显示上个月。
*@param{Object}e
*@return{Ext.picker.Date}
*/
showPrevMonth:函数（e）{
if（Ext.Date.getFirstDateOfMonth（Ext.Date.add（this.activeDate，Ext.Date.MONTH，-1））>=Ext.Date.getFirstDateOfMonth（this.minDate））{
返回this.update（Ext.Date.add（this.activeDate，Ext.Date.MONTH，-1））；
}
},
/**
*显示下个月。
*@param{Object}e
*@return{Ext.picker.Date}
*/
showNextMonth:功能（e）{
如果（（Ext.Date.add）（this.activeDate，Ext.Date.MONTH，1）嗯，聪明的尝试。你刚刚错过了。非常感谢。它现在可以工作了。如果在这里发布之前我在这方面浪费了很多时间，我应该昨天就完成。