Tap события на текстовом поле в Сенче Touch,

Question

я могу добавить событие водопроводного к TextField, как это:

{ 
    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

Похоже, вы пришли с фонами ExtJs? In 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); 
    } 
}); 

Answer 2

По умолчанию контроллеры не могут прослушивать событие элемента: 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 3

Попробуйте это:

Sencha Fiddle

I п Ваше мнение:

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 когда Бывает.