PDA

View Full Version : extjs 4.1.1 dateField with search and clear additional triggers



maneljn
9 Oct 2014, 1:30 AM
I have tested this and works very well, for anyone who needs...

It fires the trigger2click when user clicks on search, and trigger3click when clicks on clear
Enter key, and select date with picker also launches trigger2click event.



/**
*
*/

Ext.define('Cesi.ux.form.field.TriggerBuscarFecha', {
extend: 'Ext.form.field.Date',
alias : 'widget.cesifieldtriggerbuscarfecha',

constructor: function(config) {

config = config || {};
// Aplicar configuraciones por defecto
Ext.apply(this, config,
{
enableKeyEvents : true,
emptyText: '31-12-9999',
startDay: 1,
format: 'd-m-Y',
submitFormat: 'Y-m-d',
selectOnFocus: true,
trigger2Cls: 'icono_buscar',
trigger3Cls: 'icono_buscar_cancelar',
onTrigger2Click: function(e) {
this.fireEvent('trigger2click',this,e);
},
onTrigger3Click: function(e) {
this.fireEvent('trigger3click',this,e);
}
}); // fin del Apply

this.addEvents('trigger2click');
this.addEvents('trigger3click');

this.callParent(arguments);

// Al puslar enter como si clicara en el trigger de buscar
this.on('keyup', function(field, e) {
if (field.hideTrigger) {
return;
}
var key = e.getKey();
if (key == e.ENTER) {
field.fireEvent("trigger2click", field, e);
}
});

// Al seleccionar con el picker, si clicara en el trigger de buscar
this.on('select', function(field, value, e) {
if (field.hideTrigger) {
return;
}
field.fireEvent("trigger2click", field, e);
});

},

// Inicializar el componente
initComponent: function () {
this.callParent();
}

});



Usage example:



// ---------------------------------------------------------------
// Definir datefield FILTRAR fecha vencimiento final
// ---------------------------------------------------------------
me.campoFiltroVencFin = Ext.create('Cesi.ux.form.field.TriggerBuscarFecha', {
name: 'campoFiltroVencFin',
fieldLabel: gt.dgettext('esiacademia','Fecha vencimiento hasta'),
labelAlign: 'right',
labelWidth: 135,
width: 275,
emptyText: '31-12-9999',
format: 'd-m-Y',
startDay: 1,
submitFormat: 'Y-m-d'
});


50611

watertrac_dev
9 Oct 2014, 5:46 AM
Thanks for your contribution. Here's a fiddle demoing your component.bi2