javascript - 在 Sencha Touch 中的文本字段上点击事件

Question

我可以像这样将点击事件添加到文本字段：

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

它有效。但是这个，当在控制器中使用时，不起作用：

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

为什么？如何使点击事件在文本字段上工作？

Answer 1

默认情况下，控制器无法监听元素事件：https ://www.sencha.com/forum/showthread.php?251844s&p=922908&viewfull=1#post922908

但是您可以将自己的自定义事件添加到 TextField 组件：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 2

尝试这个：

煎茶小提琴

在您看来：

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);
                        }
                    }
                ]
            }
        ]
    }
});

在您的控制器中：

  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');
        }
    }); 

tap当点击文本字段时，您正在从视图中手动触发事件，并且控制器正在侦听它并onMyTextFieldTap在它发生时执行。

Answer 3

看起来你是有 ExtJs 背景的？在 Touch 中，您必须采取其他方式。

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