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?
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
}]
});
}
});
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.
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);
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.