Tap event on textfield in Sencha Touch

Question

I can add tap event to textfield like this:

{
    xtype         : 'textfield',
    name          : 'GIVEN_NAME',
    label         : 'Given Name',
    disabled: false,
    listeners : {
        element : 'element',
        tap : function() {
            console.log('tap');
        }
    }
}

and it works. But this one, when used in controller, doesn't work:

control: {
    givenName: {
        element : 'element',
        tap: 'onGivenNameTap'
    }
}

Why? How can I make tap event work on textfield?

Answer 1

Looks like you came with ExtJs background? In Touch you have to do some other manner.

Ext.define('MyApp.Controller, {
    extend: 'Ext.app.Controller',
    config: {
        refs: {
             givenNameCt: 'textfield[name=GIVEN_NAME]'
        },
        control: {
            givenNameCt: {
                tap: 'onGivenNameTap'
            }
        }
    }
    ...
    onGivenNameTap: function(ct) {
        console.log('onGivenNameTap happens...', arguments);
    }
});

Answer 2

By default, controllers cannot listen element events: https://www.sencha.com/forum/showthread.php?251844s&p=922908&viewfull=1#post922908

But you can add your own custom event to TextField component: https://fiddle.sencha.com/#fiddle/rio

Ext.define('Fiddle.field.Text', {
    override: 'Ext.field.Text',

    initialize: function() {
        this.callParent();

        this.on('painted', function() {
            var cmp = this;

            cmp.element.on('tap', function() {
                cmp.fireEvent('elementtap', cmp, cmp.element);
            });
        });
    }
});

Ext.define('Fiddle.controller.Main', {
    extend: 'Ext.app.Controller',

    config: {
        refs: {
            givenName: 'textfield[name="givenName"]'
        },
        control: {
            givenName: {
                elementtap: 'onGivenNameTap'
            }
        }
    },

    onGivenNameTap: function() {
        Ext.Msg.alert('Tap!');    
    }
});

Ext.application({
    name : 'Fiddle',
    controllers: ['Fiddle.controller.Main'],

    launch : function() {
        Ext.create('Ext.Panel', {
            fullscreen: true,
            items: [{
                xtype         : 'textfield',
                name          : 'givenName',
                label         : 'Given Name',
                disabled: false
            }]
        });
    }
});

Answer 3

Try this:

Sencha Fiddle

In your view:

Ext.define('MyApp.view.my_view', {
    extend: 'Ext.Panel',

    config: {
        layout: 'fit',
        items: [
            {
                xtype: 'textfield',
                itemId: 'my_text_field',
                label: 'My Label',
                listeners: [
                    {
                        element: 'element',
                        event: 'tap',
                        fn: function () {
                            this.fireEvent('tap', this);
                        }
                    }
                ]
            }
        ]
    }
});

In your controller:

  Ext.define('MyApp.controller.my_controller', {
        extend: 'Ext.app.Controller',

        requires: [
            'MyApp.view.my_view'
        ],

        config: {
            control: {
                'textfield[itemId=my_text_field]': {
                    tap: 'onMyTextFieldTap'
                }
            }
        },

        onMyTextFieldTap: function () {
            alert('tap');
        }
    }); 

You are manually firing the tap event from the view when the textfield is tapped, and the controller is listening for it and will execute onMyTextFieldTap when it happens.