ExtJS 6.x 将自定义点击事件添加到 ViewController 的组件

Question

对于 ExtJS 6.5+ Modern，如何向组件添加点击事件以便您可以在视图控制器中访问它。

下面的例子不成立。我也试过直接向子元素添加一个监听器。

示例模板：

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

更新

根据 priyadarshi 的回答，以下元素调用控制器中的函数。但是，我更愿意通过仅收听点击事件来在控制器中正常接收事件。无论如何，是否可以将事件侦听器从控制器附加到 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

容器没有点击事件。您需要定位 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 2

正在更改您的代码。

你需要这样的东西吗？

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 3

在 ExtJS 6.x 中我们不需要提供 reference 或 control 像下面的代码

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

当在视图上指定 view controller 时，使用字符串作为值的事件和其他处理程序将自动与控制器 class.

在此FIDDLE中，我使用view[创建了一个演示=37=] 和 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
        }
    }]
});

ExtJS 6.x 将自定义点击事件添加到 ViewController 的组件

ExtJS 6.x Add Custom Click Event To Component For ViewController

javascript

extjs

extjs6

extjs6-modern