a extjs datefield with a clear button

a extjs datefield with a clear button

{
            xtype: 'datefield',
            onTriggerClick: function () {
                var dt1 = this;
                Ext.form.DateField.prototype.onTriggerClick.apply(dt1, arguments);
                if (Ext.isEmpty(dt1.clearBtn)) {
                    this.clearBtn = new Ext.Button({
                        text: 'Clear',
                        handler: function () {
                            dt1.setValue("");
                            dt1.picker.hide();
                            dt1.collapse();
                        }
                    });
                    dt1.clearBtn.render(dt1.picker.todayBtn.container);
                }
            },
            itemId: 'endDt',
            format: 'Y-m-d H:i:s',
            labelWidth: 68,
            value: '',
            width: 218,
            fieldLabel: 'EndTime',
            listeners: {
                select: function (field, value, eOpts) {
                    var temp = Ext.Date.add(new Date(value), Ext.Date.HOUR, 23);
                    temp = Ext.Date.add(new Date(temp), Ext.Date.MINUTE, 59);
                    temp = Ext.Date.add(new Date(temp), Ext.Date.SECOND, 59);
                    field.setValue(temp);
                }
            }
        },

why the clearBtn handler can't be fired?

why the clearBtn handler can't be fired?

Because "ownerCt" should be specified as well:

this.clearBtn = new Ext.Button({ text: 'Clear', handler: function(){ dt1.setValue(''); dt1.picker.hide(); dt1.collapse(); }, renderTo: dt1.picker.todayBtn.container, ownerCt: dt1.picker });

why the clearBtn handler can't be fired?

Because "ownerCt" should be specified as well:

this.clearBtn = new Ext.Button({ text: 'Clear', handler: function(){ dt1.setValue(''); dt1.picker.hide(); dt1.collapse(); }, renderTo: dt1.picker.todayBtn.container, ownerCt: dt1.picker });

Thanks!