ExtJS / Sencha - add a button to the DateField popup to clear the date

Question

I have a DateField:

editor : new Ext.form.DateField({ /*Ext.ux.form.Custom*/ allowBlank: true, format: 'm/d/Y', width : 120, enableKeyEvents: true, listeners: { 'keydown' : function (field_, e_ ) { field_.onTriggerClick(); e_.stopEvent(); return false; }, 'focus' : function (field_ ) { field_.onTriggerClick(); e_.stopEvent(); return false; } } }) 

Editing this field is disabled. With any editing, it displays a pop-up window, so any absence of a date is impossible. Is there a way to add something like the Today button to the popup, but the value is Clear, after which the date in this field will be reset to 00.00.00?

Thanks.

Answer 1

Update

Done - here is the code: http://publikz.com/?p=1223

Answer 2

Try something like this:

 { xtype: 'datefield', onTriggerClick: function() { Ext.form.DateField.prototype.onTriggerClick.apply(this, arguments); var btn = new Ext.Button({ text: 'Clear' }); btn.render(this.menu.picker.todayBtn.container); } } 

It is very implementation dependent, but it works. And you should note this so that every time you pull the trigger, another button will not be displayed.

Answer 3

You can get a link to the Ext.picker.Date component (responsible for displaying the calendar popup) using DateField getPicker () . You can then customize the text of the Today button with the todayText configuration option and customize what happens when clicked by overriding selectToday () .

(If you want to keep the Today button as it is, and add another button instead, you can also do this by expanding / customizing Ext.picker.date , but it's a little more complicated.)

Answer 4

 calendar = ..... // find the calendar component clearDateButton = new Ext.Button({ renderTo: calendar.el.child("td.x-date-bottom,true"), text: "Clear Date", handler: ...... }) 

Answer 5

If someone is looking for a little solution in ExtJS 4, here is my suggestion:

 Ext.picker.Date.override({ beforeRender: function() { this.clearBtn = new Ext.button.Button({ text: 'Clear', handler: this.clearDate, scope: this }); this.callOverridden(arguments); }, initComponent: function() { var fn = function(){}; var incmp = function(values, out){ Ext.DomHelper.generateMarkup(values.$comp.clearBtn.getRenderTree(), out); fn(values, out); }; if(this.renderTpl.length === undefined){ fn = this.renderTpl.initialConfig.renderTodayBtn; this.renderTpl.initialConfig.renderTodayBtn = incmp; } else { fn = this.renderTpl[this.renderTpl.length-1].renderTodayBtn; this.renderTpl[this.renderTpl.length-1].renderTodayBtn = incmp; } this.callOverridden(arguments); }, finishRenderChildren: function () { this.clearBtn.finishRender(); this.callOverridden(arguments); }, clearDate: function(){ this.fireEvent('select', this, ''); } }); 

Working ExtJS Fiddle