Question

我可以像这样在文本字段中添加tap事件：

<?php
namespace App\Http\Middleware;

use Closure;
use Illuminate\Contracts\Routing\Middleware;
use Session;
use App;
use Redirect;
class AuthenticationMiddleware{

    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        die("inside");
        if(!User::check())
        {
            return Redirect::to("/login");
        }
        else
        {
            return $next($request);
        }
    }

}

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

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

为什么呢？如何在文本字段上进行点击事件？

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

试试这个：

Sencha Fiddle

在您看来：

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背景？在触摸中你必须采取其他方式。

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

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

3 个答案: