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 of this field is disabled. On any edit, it shows popup, so any clear of date is impossible. Is there a way to add to popup something like button Today, but meaning Clear, after which date in this field will be resetted to 00.00.00?

Thanks.

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 of this field is disabled. On any edit, it shows popup, so any clear of date is impossible. Is there a way to add to popup something like button Today, but meaning Clear, after which date in this field will be resetted to 00.00.00?

Thanks.

• javascript
• extjs

5 Answers 5

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's very dependent on implementation, but it works. And you must flag it that way it won't render another clear button every time you click the trigger.

You can get reference to the Ext.picker.Date ponent (responsible for displaying the calendar popup) with DateField's getPicker() method. You can then customize the text of the Today button with config option todayText and customize what happens when it is clicked by overriding the selectToday() method.

(If you want to keep the Today button as it is, and add another button instead, it can be done too, by extending / customizing Ext.picker.date, but it is a bit more plicated.)

calendar = .....  // find the calendar ponent 

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

Updated

Its made - here is code: http://publikz./?p=1223

If anyone is searching for a small 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.$p.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