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

Posted 2023-02-22

【中文标题】ext.js 网格中的 Itemtap 侦听器不起作用

【英文标题】：Itemtap listener in grid in ext.js not work

【发布时间】：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": "[phone]"
      , 
          "firstName": "Phillip",
          "lastName": "Fry",
          "officeLocation": "Lawrence, KS",
          "phoneNumber": "[phone]"
      , 
          "firstName": "Peter",
          "lastName": "Quill",
          "officeLocation": "Redwood City, CA",
          "phoneNumber": "[phone]"
      ]
  ,
  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'
 ]
);

【问题讨论】：

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

我用的是经典的。

【参考方案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": "[phone]"
                        , 
                            "firstName": "Phillip",
                            "lastName": "Fry",
                            "officeLocation": "Lawrence, KS",
                            "phoneNumber": "[phone]"
                        , 
                            "firstName": "Peter",
                            "lastName": "Quill",
                            "officeLocation": "Redwood City, CA",
                            "phoneNumber": "[phone]"
                        ]
                    ,
                    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。您正在查看的示例是现代的。