Ext JS 4.2 - Changing the Today button in a date picker

Changes the "Today" button in a date field's picker to "Yesterday"

by Fahd Shariff

HTML

<link rel="stylesheet" href="http://cdn.sencha.io/ext-4.2.0-gpl/resources/css/ext-all.css">

JavaScript

Ext.onReady(function() {
  showPanel();
});

showPanel = function() {
  Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    width: 250,
    bodyPadding: 10,
    title: 'Date field with "Yesterday" button',
    items: [{
      xtype: 'datefield',
      anchor: '100%',
      fieldLabel: 'Date',
      format: 'Y/m/d',      
      value: Ext.Date.subtract(new Date(), Ext.Date.DAY, 1),
      listeners: {
        render: function(dateField) {
          var picker = dateField.getPicker(),
            yesterday = Ext.Date.subtract(new Date(), Ext.Date.DAY, 1),
            selectYesterday = function() {
              this.setValue(yesterday);
              this.fireEvent('select', this, this.value);
              this.onSelect();
            };
          picker.todayBtn.setText('Yesterday');
          picker.todayBtn.setTooltip(Ext.String.format('{0} (Spacebar)',
            Ext.Date.format(yesterday, dateField.format)));
          picker.todayBtn.setHandler(selectYesterday, picker);
          picker.eventEl.addKeyListener(Ext.EventObject.SPACE, selectYesterday, picker);
        }
      }
    }]
  });
}