ExtJS网格面板事件

我正在开发我的第一个ExtJSMVC应用程序。从控制器类向网格面板添加事件侦听器时出现问题

我的问题是，为什么在使用下面的代码通过“on”方法添加事件处理程序时出现下面的错误

错误：

Uncaught TypeError: 
    gridPanel.on is not a function
    at constructor.init 

相关代码：

var gridPanel = Ext.ComponentQuery.query('userlist');
gridPanel.on('itemdblclick', this.editUser, gridPanel);

虽然我能够通过不同的方法添加处理程序，但我正在试图找出通过网格面板引用上的“on”方法添加处理程序的错误。感谢您的帮助

谢谢

---

这是我完整的控制器类

Ext.define('AM.controller.Users', {
        extend: 'Ext.app.Controller',

        views: ['user.List'],

        init: function() {

            var gridPanel = Ext.ComponentQuery.query('userlist');
            gridPanel.on('itemdblclick', this.editUser, gridPanel);
        },

        editUser: function() {
            console.log('User edit has begun..');
        }
}, function() {

}); 

和我的网格面板类：

Ext.define('AM.view.user.List', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.userlist',   
    title: 'All Users',
    id: 'usergrid',

    initComponent: function() {

            this.store = {
                fields: ['name', 'email'],
                data  : [
                    {name: 'Ed',    email: 'ed@sencha.com'},
                    {name: 'Tommy', email: 'tommy@sencha.com'}
                ]
            };

            this.columns = [
                {header: 'Name',  dataIndex: 'name',  flex: 1},
                {header: 'Email', dataIndex: 'email', flex: 1}
            ],

        this.callParent(arguments);

    }
});

on Ext.ComponentQuery返回一个组件数组。因此，您需要提供一个索引，如：

var gridPanel = Ext.ComponentQuery.query('userlist')[0];

---

Ext.ComponentQuery.query（'userlist'）

返回找到的组件数组-因此您需要选择数组中的第一项以实际获取组件：

Ext.ComponentQuery.query（'userlist'）[0]

Ext.first（'userlist'）

速记让这更简单。（如评论中提到的@sceborati）

当您使用组件查询时，您是按其xtype进行查询的*

您还在组件中指定了一个id，如果您在一个页面上只有一个实例，这是可以的（只要您有多个实例，就不应该使用id） 使用

Ext.getCmp（'componentid'）

可以更快地找到组件，因此

Ext.getCmp（'userlist'）

也适用于您

综上所述，为了更好地利用ExtJs MVC功能，您可以切换到使用ViewController，然后根本不需要查找组件：

Ext.define('AM.controller.Users', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.userlist',
    editUser: function () {
        console.log('User edit has begun..');
    }
});

Ext.define('AM.view.user.List', {
    extend: 'Ext.grid.Panel',
    xtype: 'userlist',
    title: 'All Users',
    id: 'usergrid',
    controller: 'userlist',
    store: {
        fields: ['name', 'email'],
        data: [{
            name: 'Ed',
            email: 'ed@sencha.com'
        }, {
            name: 'Tommy',
            email: 'tommy@sencha.com'
        }]
    },
    columns: [{
        header: 'Name',
        dataIndex: 'name',
        flex: 1
    }, {
        header: 'Email',
        dataIndex: 'email',
        flex: 1
    }],
    listeners:{
        itemdblclick:'editUser'
    }
});

请注意添加到控制器的

别名

配置，以及视图上相应的

控制器

配置

这意味着您可以仅通过在控制器上提供方法名来指定侦听器

    listeners:{
        itemdblclick:'editUser'
    }

您可能还注意到我已经将您的列和存储配置移出了initComponent方法——您可以使用initComponent，但是这个方法要干净得多

我创建了一个小提琴来演示这个更新的代码：

在定义控制器时，您似乎还传递了一个额外的函数作为第三个参数-您应该删除它

---

---

*您使用了与

xtype:'userlist'

相同的

alias:'widget.userlist'

，

这里有问题吗？对于ExtJS 6，这里有一个缩写。所以你可以使用Ext.first（'userlist'）。谢谢，我以前没见过。这解决了我的问题。这也是我不知道的视图控制器的最佳解释，谢谢你指导我。很好-很乐意帮助-记住接受我的答案；）