ExtJS 6.x Hinzufügen von benutzerdefiniertem Klickereignis zur Komponente für ViewController

Question

Für ExtJS 6.5+ Modern fügen Sie ein Klickereignis zu einer Komponente hinzu, damit Sie in einem Ansichtscontroller darauf zugreifen können.

Das folgende Beispiel funktioniert nicht. Ich habe auch versucht, einen Listener direkt zum Unterelement hinzuzufügen.

Beispiel Vorlage:

Ext.define('TestController', { 
    extend: 'Ext.app.ViewController', 
    alias: 'controller.test-controller', 

    control: { 
     '[reference=someComponent]': { 
      click: 'someComponentClick' 
     } 
    }, 

    someComponentClick: function() { 
     console.log('it worked!') 
    } 
}) 


Ext.define('TestContainer', { 
    extend: 'Ext.Container', 
    xtype: 'test-container', 
    controller: 'test-controller', 
    items: [ 
     { 
      xtype: 'component', 
      reference: 'someComponent' 
      html: 'CLICK HERE TO TEST' 
     } 
    ] 
}) 

aktualisieren

Basierend auf priyadarshi Antwort, ruft die folgende auf dem Element die Funktion in der Steuerung. Ich würde es jedoch vorziehen, das Ereignis normal im Controller auszuwählen, indem ich nur auf das Klickereignis höre. Gibt es trotzdem Ereignis-Listener an das dom vom Controller anzuhängen oder zumindest ein Event vom Element auszulösen, damit man es im Controller abholen kann (ohne dass es explizit Funktionen auf dem Controller aufruft).

Ext.define('TestController', { 
    extend: 'Ext.app.ViewController', 
    alias: 'controller.test-controller', 

    control: { 
     '[reference=someComponent]': { 
      click: 'someComponentClick' 
     } 
    }, 

    someComponentClick: function() { 
     console.log('it worked!') 
    }, 
    someFuncOnController: function() { 
     console.log('someFuncOnController') // << This runs 
    } 
}) 


Ext.define('TestContainer', { 
    extend: 'Ext.Container', 
    xtype: 'test-container', 
    controller: 'test-controller', 
    items: [ 
     { 
      xtype: 'component', 
      reference: 'someComponent' 
      html: 'CLICK HERE TO TEST', 
      listeners: [ 
       element: 'element', 
       click: 'someFuncOnController' 
      ] 
     } 
    ] 
}) 

Answer 1

Ändern Sie Ihren Code.

Brauchen Sie so etwas?

Ext.define('TestController', { 
extend: 'Ext.app.Controller', 

init: function() { 
    this.control({ 
     'test-container': { 
      buttonClicked: this.onButtonClick 
     } 
    }); 
}, 

onButtonClick: function(button) { 
    console.log('it worked!') 
} 
}) 


Ext.define('TestContainer', { 
extend: 'Ext.Container', 
xtype: 'test-container', 
//controller: 'test-controller', //declare your controller in your app.js 
items: [ 
    { 
     xtype: 'button', 
     text: 'Click Me!' 
     listeners: { 
      tap: function (button) { 
       var container = button.up('test-container'); 
       container.fireEvent('buttonClicked', button); 
      } 
     } 
    } 
] 
}) 

Answer 2

Container haben kein Klickereignis. Sie müssen das DOM-Element als Ziel festlegen, um das Ereignis anzuhängen. Tun Sie so etwas.

 var container = Ext.create('Ext.Container', { 
     renderTo: Ext.getBody(), 
     html: 'Click Me!', 
     listeners: { 
     click: function(){ 
      Ext.Msg.alert('Success!', 'I have been clicked!') 
      } 
     } 
    }); 

    container.getEl().on('click', function(){ 
     this.fireEvent('click', container); 
    }, container);

Answer 3

In ExtJS 6.x wir nicht brauchen reference oder control wie unten Code

control: { 
     '[reference=someComponent]': { 
      click: 'someComponentClick' 
     } 
    } 

bereitzustellen, wenn ein view controller auf einen Blick, Ereignisse und andere Behandlungsroutinen, die Strings angegeben verwenden Die Werte werden automatisch mit den entsprechenden Methoden in der Klasse des Controllers verbunden.

In diesem FIDDLE, ich habe eine Demo mit view und view controller erstellt. Dies zeigt eine bessere Erklärung für Ereignisse. Ich hoffe, das wird dir helfen oder dich führen.

Code-Schnipsel

Ext.define('MyViewController', { 
    extend: 'Ext.app.ViewController', 
    alias: 'controller.myview', 

    // This method is called as a "handler" for the Add button in our view 
    onAddClick: function() { 
     Ext.Msg.alert('Success', 'Button Click'); 
    }, 
    // This method is called as a "click" for the component in our view 
    onComponentClick: function() { 
     Ext.Msg.alert('Success', 'Component Click'); 
    }, 
    // This method is called as a "click" for the label in our view 
    onLabelClick: function() { 
     Ext.Msg.alert('Success', 'Label Clcik'); 
    } 
}); 

Ext.create('Ext.Panel', { 
    controller: 'myview', 
    renderTo: Ext.getBody(), 
    items: [{ 
     xtype: 'button', 
     text: 'Add', 
     handler: 'onAddClick', // calls MyViewController's onAddClick method 
    }, { 
     xtype: 'component', 
     margin: 10, 
     style:"padding: 10px;border: 1px solid #ccc;cursor: pointer;", 
     html: 'Component->click here to test {component} click', 
     listeners: { 
      element: 'element', 
      click: 'onComponentClick' // calls MyViewController's someFuncOnController method 
     } 
    }, { 
     xtype: 'label', 
     margin: 10, 
     style:"padding: 10px;border: 1px solid #38839d;cursor: pointer;", 
     html: 'Label Component->click here to test {label} click', 
     listeners: { 
      element: 'element', 
      click: 'onLabelClick' // calls MyViewController's onLabelClick method 
     } 
    }] 
});