ExtJS/Sencha - Aggiungi pulsante per DateField popup, per cancellare la data

Question

Ho un 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 di questo campo è disabilitato. In qualsiasi modifica, mostra una finestra popup, quindi qualsiasi data di scadenza è impossibile. C'è un modo per aggiungere al popup qualcosa come il pulsante Oggi, ma che significa Cancella, dopo di che la data in questo campo verrà reimpostata su 00.00.00?

Grazie.

Answer 1

Aggiornato

suo fatto - qui è il codice: http://publikz.com/?p=1223

Answer 2

È possibile ottenere il riferimento al componente Ext.picker.Date (responsabile della visualizzazione del popup del calendario) con il metodo getPicker() di DateField. È quindi possibile personalizzare il testo del pulsante Today con l'opzione di configurazione todayText e personalizzare ciò che accade quando viene fatto clic sovrascrivendo il metodo selectToday().

(Se si desidera mantenere il tasto Today così com'è, e aggiungere un altro pulsante, invece, si può fare anche, estendendo/personalizzazione Ext.picker.date, ma è un po 'più complicato.)

Answer 3

calendar = ..... // find the calendar component 

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

Answer 4

provare qualcosa di simile:

{ 
    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); 
    } 
} 

Dipende molto dall'implementazione, ma funziona. E devi contrassegnarlo in questo modo non renderà un altro pulsante chiaro ogni volta che fai clic sul grilletto.

Answer 5

Se qualcuno è alla ricerca di una piccola soluzione in ExtJS 4 Ecco il mio consiglio:

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