1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    104
    Answers
    4
    Vote Rating
    0
    izak18 is on a distinguished road

      0  

    Default Answered: DatePicker Read Only

    Answered: DatePicker Read Only


    Hi everybody, I have a question, it is possible make a datepickerfield read only?

    How I do that? I tried with a afterrender but only works in text and number field.
    This is my code:

    Code:
    id: 'dateFact',
    xtype: 'datepickerfield',
    label: 'Fecha Facturación',
    name: 'FechaFact',
    value: new Date(),
    picker: {
        doneButton: 'Aceptar',
        cancelButton: 'Cancelar',
        slotOrder: ['day', 'month', 'year'],
        useClearIcon: true,
        hideOnMaskTap: true,
    },
    listeners: {
        afterrender: function(ele) {
            console.log(ele);
        ele.fieldEl.dom.readOnly = true;
    }}
    Hope you can help me.
    Thanks!

  2. Ok, I made it, thanks for everything anyway.
    This is the code for everybody else who need this requirement:

    Code:
    console.log(this);
    if (this.fieldEl.dom.readOnly == true) {
          this.getDatePicker().hide()
    }
    else {
          this.getDatePicker().show()
    }
    See ya!

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Answers
    3542
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    If you want it read only you need to cancel the tap event listener
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    104
    Answers
    4
    Vote Rating
    0
    izak18 is on a distinguished road

      0  

    Default


    Thanks for the reply, but I can't get it. I tried this:

    Code:
    listeners: {
               'render': function(thisComponent) {
                    thisComponent.events.change = false;
               }
    }
    How I cancel a tap event?
    Thanks in advance.

  5. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Answers
    3542
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    I would extend datepicker field and override the onMaskTap method to not show the datepicker if it is read only.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  6. #5
    Sencha User
    Join Date
    Mar 2012
    Posts
    104
    Answers
    4
    Vote Rating
    0
    izak18 is on a distinguished road

      0  

    Default


    Hi, thanks for the reply, now I have this:

    Code:
    xtype: 'datepickerfield',label: 'Fecha Facturación',
    name: 'FechaFacturacion',
    value: new Date(),
    picker: {
        doneButton: 'Aceptar',
        cancelButton: 'Cancelar',
        slotOrder: ['day', 'month', 'year'],
        useClearIcon: true,
        hideOnMaskTap: true
    },
    listeners: {
    	onMaskTap: function() {
            if (Ext.ux.form.TimePicker.superclass.onMaskTap.apply(this, arguments) !== true) {
                return false;
            }
            console.log("tap");
            if (something == 'read'){
                this.getTimePicker().hide();
            }
        }
    }
    But, not even I can show the message console.log("Tap").
    Any idea, please?

    Thanks!

  7. #6
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Answers
    3542
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    onMaskTap is a method not an event. You would need to create your own extension to handle it.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  8. #7
    Sencha User
    Join Date
    Mar 2012
    Posts
    104
    Answers
    4
    Vote Rating
    0
    izak18 is on a distinguished road

      0  

    Default


    Oh I see.
    And How I can do that? I don't understand very well.
    Could you please show me some examples?

  9. #8
    Sencha User
    Join Date
    Mar 2012
    Posts
    104
    Answers
    4
    Vote Rating
    0
    izak18 is on a distinguished road

      0  

    Default


    Any ideas please?
    Thanks!

  10. #9
    Sencha User
    Join Date
    Jul 2011
    Location
    Pakistan
    Posts
    82
    Answers
    3
    Vote Rating
    2
    zonaib is on a distinguished road

      0  

    Default


    hey mitchellsimoens !
    datepickerfield does not have tap listeners...
    now what should we do??
    i have this problm in sencha touch 2
    Last edited by zonaib; 1 Jun 2012 at 6:43 AM. Reason: incomplete text

  11. #10
    Sencha User
    Join Date
    Mar 2012
    Posts
    104
    Answers
    4
    Vote Rating
    0
    izak18 is on a distinguished road

      0  

    Default


    mitchellsimoens

    I overrode the onMaskTap method to not show the datepicker, but, how I can make it read if the field is readOnly, I have this:

    Code:
    onMaskTap: function() {        if (Ext.form.DateCrystalisPicker.superclass.onMaskTap.apply(this, arguments) !== true) {
                return false
            }
            if (this.dom.readOnly == true) {
                this.getDatePicker().hide()
            }
            else {
                this.getDatePicker().show()
            }
    
        },


    Please help me, thanks in advance!