1. #1
    Sencha User
    Join Date
    Jan 2008
    Location
    Bexhill-on-Sea, East Sussex, ENGLAND
    Posts
    21
    Vote Rating
    0
    pmahoney is on a distinguished road

      0  

    Default Tap event on iPhone

    Tap event on iPhone


    I have an extended version of the Ext.field.Text component. Basically it makes the text field read only, but adds a 'tap' event so I can call code to manage data input to the field.

    Code:
    /**
     * Small extension to the field.text to add a tap event.
     */
    Ext.define('Ux.field.TapText', {
        extend: 'Ext.field.Text',
        xtype: 'taptextfield',
    
        /**
         * @event tap
         * Fires when this field receives a tap
         * @param {Ux.field.TapText} this This field
         * @param {Ext.event.Event} e
         */
    
        config: {
            // @inherit
            readOnly: true,
        },
    
        // @private
        initialize: function() {
            var me = this;
    
            me.element.down('input').on('tap','doBubbleTap',me);
            
            me.callParent();
        },
    
        doBubbleTap: function(e, t) {
        	this.fireEvent('tap', this, e, t);
        },
    
        // @private
        // We'll show the clear icon even for read-only state.
        showClearIcon: function() {
            var me = this;
    
            if (!me.getDisabled() && me.getValue() && me.getClearIcon()) {
                me.element.addCls(Ext.baseCSSPrefix + 'field-clearable');
            }
    
            return me;
        },
        
        // @private
        setValue: function(value) {
        	this.value = value;
    
            if (this.rendered) {
            	var text = this.getText();
            	this.updateValue(text);
            }
    
            return this;
        },
    
        getText: function() {
        	if (this.value) {
                if (Ext.isString(this.value)) {
                    return this.value;
                }
    
                if (tpl = this.getTpl()) {
                	return tpl.apply(this.value.getData());
                }
    
                return 'template required';
        	}
        	
        	return '';
        },
    
        getValue: function() {
            var value = this.value || null;
            return value;
        },
    
    });
    Works perfectly on Chrome and Safari, but the doBubbleTap() function does not get called when running on the iPhone.

    Any ideas welcome.

  2. #2
    Sencha User
    Join Date
    Jan 2008
    Location
    Bexhill-on-Sea, East Sussex, ENGLAND
    Posts
    21
    Vote Rating
    0
    pmahoney is on a distinguished road

      0  

    Default


    I have an answer. Hope it makes sense.

    Turns out iOS does not have a 'tap' event. Instead it re-purposes the 'click' event...

    The following alteration to the initialize function did the trick.

    Code:
        // @private
        initialize: function() {
            var me = this;
    
            if (Ext.os.is.iOS) {
                me.element.down('input').on('click','doBubbleTap',me);
            }
            else {
                me.element.down('input').on('tap','doBubbleTap',me);
            }
            
            me.callParent();
        },