Ext JS 网格面板事件

Posted 2023-02-26

【中文标题】Ext JS 网格面板事件

【英文标题】：Ext JS grid panel events

【发布时间】：2017-02-25 00:48:17

【问题描述】：

我正在开发我的第一个 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”方法添加的问题。任何帮助表示赞赏。

谢谢

---

这是我完整的控制器类

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: '[e-mail]',
                    name: 'Tommy', email: '[e-mail]'
                ]
            ;

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

        this.callParent(arguments);

    
);

【问题讨论】：

这里有问题吗？

【参考方案1】：

Ext.ComponentQuery.query('userlist') 返回一个找到的组件数组 - 因此您需要选择数组中的第一项才能实际获取您的组件： Ext.ComponentQuery.query('userlist')[0]

Ext.first('userlist') 简写使这更简单。 （正如@sceborati 在 cmets 中提到的）

当您使用组件查询时，您通过其 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: '[e-mail]'
        , 
            name: 'Tommy',
            email: '[e-mail]'
        ]
    ,
    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' 相同

【讨论】：

这解决了我的问题。这也是我不知道的 View Controller 的最佳解释，感谢您指导我。

太好了 - 乐于助人 - 记得接受我的回答；）

【参考方案2】：

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

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

【讨论】：

对于 ExtJS 6 有 Ext.first 短地。所以你可以使用 Ext.first('userlist').

谢谢，我以前没见过。