Ext JS，项目单击侦听器似乎不起作用

Ext JS, item click listener does't seem to work

本文关键字：不起作用 侦听器 单击 JS 项目 Ext      更新时间：2023-09-26

我有一个网格面板，显示我的数据库中的所有用户。我希望我的网格项（行）是可点击的，因为当我点击它们时会发生一些事情，但似乎侦听器没问题。

    Ext.define('PRJ.view.Home', {
     extend: 'Ext.panel.Panel',
     alias: 'widget.home',
     title: 'Home',
     layout: 'fit',
     items: [
        {
            xtype: 'gridpanel',
            store: 'Users',
            title: 'Users grid',
            columns: [
                {text: 'Id', dataIndex: 'id' },
                {text: 'Name', dataIndex: 'name', width : 200 }
            ]
        }
    ]
    });

    Ext.define('PRJ.controller.Menu', {
     extend: 'Ext.app.Controller',
     refs: [
         {
            ref: 'centerPanel',
            selector: '#center-panel'
        }
     ],
     stores: ["Users"
     ],

     init: function() {
         this.control({
             'gridpanel': {
                 itemdblclick: this.editUser
             }
         });
     },
     editUser: function() {
         alert('User double clicked');
     },
});

这可能就像将itemdblclick更改为rowdblclick一样简单。

我在这里创建了一个小提琴，显示了略有不同的方法（通过在配置中添加侦听器）。代码如下：

Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: [{
            text: 'Name',
            dataIndex: 'name'
        }, {
            text: 'Email',
            dataIndex: 'email',
            flex: 1
        }, {
            text: 'Phone',
            dataIndex: 'phone'
        }],
        listeners: {
            rowdblclick: function(grid, record, tr, rowIndex, e, eOpts) {
                alert(record.get("name"));
            }
        },
        height: 200,
        width: 400,
        renderTo: Ext.getBody()
    });

您还应该查看选择模型和行编辑。

您可以使用单元格编辑插件使单元格在单击时可编辑。在你的网格会议中包含这样的东西：插件：[ Ext.create（'Ext.grid.plugin.CellEdit'， { 点击编辑： 1， pluginId： 'cellEditor' }) ]

我发现了问题所在。我得到的答案没有帮助，因为我需要将听众保留在控制器中，而不是将其移动到视图中。

问题是我需要把听众放在home gridpanel喜欢

init: function() {
     this.control({
         'home gridpanel': {
             itemdblclick: this.editUser
         }
     });
 },

现在它就像魅力一样工作。

相关文章：