PDA

View Full Version : Click event for datefield



webfriend13
2 Nov 2012, 1:09 AM
HI All,

I have a datefield and when i click on top of calender icon or the text box of the datefield, I want to open a popup window instead of expanding the calender control.

Issue: I am not able ot find the click event of the datefield. How can I prevent caldender control from expanding when user clicks over datefield.

Thanks in advance.

Farish
2 Nov 2012, 2:19 AM
you need to return false in the picker beforeshow listener to cancel the calendar picker from showing:


// use component query to find your datefield
var picker = dateField.getPicker();
picker.on('beforeshow', function() {
// your code here
return false;
});

For the field itself, you may use the focus event (but this only fires when the field is focused and wont fire again if you click in the field when its already focused).

webfriend13
4 Nov 2012, 7:50 PM
Hi Farish,

Thank you for quick reply. For some reason, system is not firing beforeshow event of the datepicker. System is firing beforerender event.




//This is the controller code.
init: function () {
this.control({
'myview #to-datefield': {
beforeshow: this.beforeSH,
beforerender: this.beforeRen
}
});
},

beforeSH: function (ctrl, eOpts) {
alert('there you go'); // not firing before show event
},
beforeRen: function (ctrl, eOpts) {
alert('befor Ren');
},

evant
4 Nov 2012, 8:06 PM
The correct solution is to override onTriggerClick:



Ext.define('MyDate', {
extend: 'Ext.form.field.Date',

onTriggerClick: function(){
Ext.create('Ext.window.Window', {
title: 'I am a window',
width: 200,
height: 200,
autoShow: true
});
}
});

Ext.onReady(function(){
new MyDate({
renderTo: document.body
});
});


Relevant docs: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.Trigger-method-onTriggerClick

webfriend13
5 Nov 2012, 12:20 AM
Hi Evant,

Thank you for the reply. I have few question on the solution you provided.
1) Why do we need to override 'onTriggerClick'? Why there is no default click event for this control? In which all scenarios, we have to override 'onTriggerClick '.
2) The solution suggested by Farish should also work. Why its not working?

Farish
5 Nov 2012, 12:34 AM
are you adding the event on the datefield itself? you need to set the event listener on the picker of the datefield and not on the field itself. the following code works:


Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
width: 300,
bodyPadding: 10,
title: 'Dates',
items: [{
xtype: 'datefield',
anchor: '100%'
}]
});

var dateField = Ext.ComponentQuery.query('datefield');
var picker = dateField[0].getPicker();

picker.on('beforeshow', function() {
console.log('beforeshow fired');
return false;
});

webfriend13
5 Nov 2012, 1:00 AM
HI Farish,

I know what you are saying. I missed it last time. Thank you for explaining it to me. I am using component query within my controller. I am not sure how can i get the reference to the picker in my controller.




Ext.define('My.controller.FilterController',
{
extend: 'Ext.app.Controller',
init: function () {
this.control({
//Problem: how to write var picker = Ext.ComponentQuery.query('from-datefield')[0].getPicker(); in my controller
'myview #from-datefield': {
beforeshow: this.onBeforeShow
}
});
},

onBeforeShow: function (ctrl, eOpts) {
alert('before show');
return false;
},





The idea is to transalte "var dateField = Ext.ComponentQuery.query('datefield');
var picker = dateField[0].getPicker();" into a query which I can use within the init() of my controller.

Farish
5 Nov 2012, 1:18 AM
I am sorry I am not aware of using the MVC architecture for setting an event listener on a picker. may be someone else can guide you about this. but you are on the right track. if you can set the event listener on the picker, it should work.

webfriend13
5 Nov 2012, 1:26 AM
Hi Farish,

Thank you for quick reply. I really appreciate your help =D>.