[英]Tap event on textfield in Sencha Touch
I can add tap event to textfield like this: 我可以将tap事件添加到文本字段中,如下所示:
{
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? 如何使点击事件在文本字段上起作用?
By default, controllers cannot listen element events: https://www.sencha.com/forum/showthread.php?251844s&p=922908&viewfull=1#post922908 默认情况下,控制器无法监听元素事件: 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 但是您可以将自己的自定义事件添加到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
}]
});
}
});
Try this: 尝试这个:
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. 当文本字段被点击时,您正在从视图中手动触发tap
击事件,控制器正在监听它,并且在发生该事件时将执行onMyTextFieldTap
。
Looks like you came with ExtJs background? 看起来您是具有ExtJs背景的? 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);
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.