Ext JS网格面板事件

我正在开发我的第一个Ext JS MVC应用程序。我在控制器类中将事件侦听器添加到我的电网面板中时有一个问题。

我的问题是，为什么使用以下代码

在" 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 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);
    }
});

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＆amp; fiddle/1qvu

定义控制器时，您似乎还将通过第三个参数传递额外的函数 - 您应该删除此功能。

*您使用了与xtype:'userlist'

相同的alias:'widget.userlist'

ext.componentquery上的查询方法返回组件数组。因此，您需要提供一个索引，例如：

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

相关内容

最新更新

热门标签：