ExtJS 6.x ViewControllerのカスタムクリックイベントをコンポーネントに追加

Question

ExtJS 6.5+では、コンポーネントにクリックイベントを追加して、ビューコントローラでそのコンポーネントにアクセスできるようにします。

以下の例は機能しません。また、サブ要素に直接リスナーを追加しようとしました。

例テンプレート：priyadarshi回答に基づいて

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' 
     } 
    ] 
}) 

更新

、要素に以下は、コントローラ内の関数を呼び出します。しかし、私は、単にイベントをクリックすることを好むだろうコントローラを正常にクリックイベントを聞いて。とにかく、コントローラーからdomにイベントリスナーをアタッチするか、少なくともコントローラーで（コントローラー上の関数を明示的に呼び出すことなく）それを拾うことができるように、要素からのイベントを発生させますか？

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

コードを変更する。

このようなものが必要ですか？ ExtJSの6.xで

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

コンテナにはクリックイベントがありません。イベントを添付するには、DOM要素をターゲットにする必要があります。このようなことをしてください。

 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

view controllerは、ビュー、イベントや文字列を使用する他のハンドラに指定されている場合、我々は、コード

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

以下のようなreferenceまたはcontrolを提供する必要はありません。値がコントローラのクラスの適切なメソッドに自動的に接続されるためです。このFIDDLEで

、私はviewとview controllerを使用してデモを作成しました。これはイベントのより良い説明を示しています。これがあなたを助けたり、あなたを導くことを願っています。

コードスニペット

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