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

Question

I'm a new in ext.js and I'm trying to figure why this example I borrowed from tutorial on http://docs.sencha.com/extjs/6.5.1/guides/quick_start/handling_events.html doesn't work for me.

I added two listeners to code: itemmouseenter - it's work correctly, and itemtap - it's not working.

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

Answer 1

In classic the event is itemclick . The sample you're looking at is for modern.

Answer 2

As I have checked in sencha fiddle itemtap is working fine for modern but for Classic you have to user itemlick . I am using your same code in my fiddle you can check by given below link:-

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