ext.js 网格中的 Itemtap 侦听器不起作用答案

【问题标题】：Itemtap listener in grid in ext.js not workext.js 网格中的 Itemtap 侦听器不起作用
【发布时间】：2018-01-10 23:05:35
【问题描述】：

我是ext.js 的新手，我想弄清楚为什么我从http://docs.sencha.com/extjs/6.5.1/guides/quick_start/handling_events.html 的教程中借用了这个示例对我不起作用。

我在代码中添加了两个侦听器：itemmouseenter - 工作正常，itemtap - 不工作。

Ext.create('Ext.tab.Panel', {
    renderTo: Ext.getBody(),
    xtype: 'tabpanel',
    items: [{
  title: 'Employee Directory',
  xtype: 'grid',
  iconCls: 'x-fa fa-users',
  listeners: {
    itemmouseenter: function() {
      console.log( 'Mouse Enter');
    },
    itemtap: function(view, index, item, e) {
        console.log("item tap")
    }
  },
  store: {
      data: [{
          "firstName": "Jean",
          "lastName": "Grey",
          "officeLocation": "Lawrence, KS",
          "phoneNumber": "(372) 792-6728"
      }, {
          "firstName": "Phillip",
          "lastName": "Fry",
          "officeLocation": "Lawrence, KS",
          "phoneNumber": "(318) 224-8644"
      }, {
          "firstName": "Peter",
          "lastName": "Quill",
          "officeLocation": "Redwood City, CA",
          "phoneNumber": "(718) 480-8560"
      }]
  },
  columns: [{
      text: 'First Name',
      dataIndex: 'firstName',
      flex: 1
  }, {
      text: 'Last Name',
      dataIndex: 'lastName',
      flex: 1
  }, {
      text: 'Phone Number',
      dataIndex: 'phoneNumber',
      flex: 1
  }]
  }, {
     title: 'About Sencha',
     iconCls: 'x-fa fa-info-circle'
 }]
});

【问题讨论】：

您使用的是现代工具包还是经典工具包？
我用的是经典的。

标签： javascript events extjs listeners

【解决方案1】：

正如我在 sencha fiddle 中检查的那样，itemtap 在现代版中运行良好，但对于经典版，您必须使用 itemlick。我在我的小提琴中使用了相同的代码，您可以通过以下链接进行检查：-

EXTJS GRID ITEM TAP

Ext.application({
    name : 'Fiddle',

    launch : function() {
        var panel = Ext.create('Ext.window.Window', {
            width:'100%',
            height:'100%',
            layout:'fit',
            items:[{
                xtype: 'tabpanel',
                items: [{
                    title: 'Employee Directory',
                    xtype: 'grid',
                    layout:'fit',
                    iconCls: 'x-fa fa-users',
                    listeners: {
                        itemmouseenter: function() {
                            console.log('Mouse Enter');
                        },
                        itemclick: function(grid, record, item, index, e, eOpts) {
                            Ext.Msg.alert('Info',`You have tapped on ${index+1} item`);
                        }
                    },
                    store: {
                        data: [{
                            "firstName": "Jean",
                            "lastName": "Grey",
                            "officeLocation": "Lawrence, KS",
                            "phoneNumber": "(372) 792-6728"
                        }, {
                            "firstName": "Phillip",
                            "lastName": "Fry",
                            "officeLocation": "Lawrence, KS",
                            "phoneNumber": "(318) 224-8644"
                        }, {
                            "firstName": "Peter",
                            "lastName": "Quill",
                            "officeLocation": "Redwood City, CA",
                            "phoneNumber": "(718) 480-8560"
                        }]
                    },
                    columns: [{
                        text: 'First Name',
                        dataIndex: 'firstName',
                        flex: 1
                    }, {
                        text: 'Last Name',
                        dataIndex: 'lastName',
                        flex: 1
                    }, {
                        text: 'Phone Number',
                        dataIndex: 'phoneNumber',
                        flex: 1
                    }]
                }, {
                    title: 'About Sencha',
                    iconCls: 'x-fa fa-info-circle'
                }]
            }]
        });
        panel.show()
    }
});

【讨论】：

【解决方案2】：

经典事件是itemclick。您正在查看的示例是现代的。

【讨论】：