Click event for datefield

[webfriend13]

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]

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]

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]

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/#!...onTriggerClick

[webfriend13]

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]

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]

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]

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]

Hi Farish,

Thank you for quick reply. I really appreciate your help .