extjs - Ext JS 网格面板事件

Question

我正在开发我的第一个 EXT js mvc 应用程序。我在从 Controller 类向我的网格面板添加事件监听器时遇到问题。

我的问题是为什么我在使用下面的代码通过“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”方法添加有什么问题。感谢您的帮助。

谢谢

---

这是我完整的 Controller 类

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

    }
});

Answer 1

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

注意添加到 Controller 的 alias 配置，以及 View 上相应的 controller 配置。

这意味着您只需在 Controller 上提供方法名称即可指定监听器。

    listeners:{
        itemdblclick:'editUser'
    }

您可能还注意到我已将您的列和存储配置移出 initComponent 方法 - 您可以使用 initComponent，但此方法更简洁。

我创建了一个 fiddle 来演示这个更新后的代码:

https://fiddle.sencha.com/#view/editor&fiddle/1qvu

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

---

* 你使用了 alias:'widget.userlist' 与 xtype:'userlist'

相同