1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    219
    Answers
    10
    Vote Rating
    5
    webfriend13 is on a distinguished road

      0  

    Default Unanswered: Click event for datefield

    Unanswered: Click event for datefield


    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.

  2. #2
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    1,085
    Answers
    112
    Vote Rating
    95
    Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light

      0  

    Default


    you need to return false in the picker beforeshow listener to cancel the calendar picker from showing:

    Code:
    // 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).

  3. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    219
    Answers
    10
    Vote Rating
    5
    webfriend13 is on a distinguished road

      0  

    Default


    Hi Farish,

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

    Code:
    //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');
        },

  4. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,898
    Answers
    456
    Vote Rating
    623
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    The correct solution is to override onTriggerClick:

    Code:
    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
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  5. #5
    Sencha User
    Join Date
    Feb 2012
    Posts
    219
    Answers
    10
    Vote Rating
    5
    webfriend13 is on a distinguished road

      0  

    Default


    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?

  6. #6
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    1,085
    Answers
    112
    Vote Rating
    95
    Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light

      1  

    Default


    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:

    Code:
    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;
    });

  7. #7
    Sencha User
    Join Date
    Feb 2012
    Posts
    219
    Answers
    10
    Vote Rating
    5
    webfriend13 is on a distinguished road

      0  

    Default


    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.


    Code:
    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.

  8. #8
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    1,085
    Answers
    112
    Vote Rating
    95
    Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light

      0  

    Default


    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.

  9. #9
    Sencha User
    Join Date
    Feb 2012
    Posts
    219
    Answers
    10
    Vote Rating
    5
    webfriend13 is on a distinguished road

      0  

    Default


    Hi Farish,

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

Thread Participants: 2

Tags for this Thread