Question

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

我的问题是，为什么我在通过＆＃39; on＆＃39;添加事件处理程序时遇到错误。使用以下代码的方法

错误：

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

相关守则：

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

我可以通过不同的方法添加处理程序，但我想弄清楚添加通过＆＃39; on＆＃39;网格面板参考的方法。任何帮助表示赞赏。

由于

这是我完整的控制器类

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

注意添加到控制器的alias配置，以及视图上相应的controller配置。

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

    listeners:{
        itemdblclick:'editUser'
    }

您可能还注意到我已将列和存储配置移出initComponent方法 - 您使用initComponent会起作用，但此方法更清晰。

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

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

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

<小时/> *您使用的alias:'widget.userlist'与xtype:'userlist'

相同

Answer 2

Ext.ComponentQuery上的query method返回一个组件数组。所以你需要提供一个索引，如：

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

Ext JS网格面板事件

2 个答案: