Firing itemcontextmenu and itemdblclick events on grid with controller

[Zura]

REQUIRED INFORMATION




Ext version tested:

• Ext 4.0.7
• Ext 4.1.1

Browser versions tested against:

• Chrome 24.0.1312.52
• FF18 (firebug 1.11.1 installed)

Description:

• When use itemdblclick and itemcontextmenu events on grid, itemcontextmenu is firing, but itemdblclick stops working. when I deleted itemcontextmenu event itemdblclick starts working again

Steps to reproduce the problem:

• create simple grid with store
• create controller with events itemcontextmenu and itemdblclick

The result that was expected:

• both events must fire

The result that occurs instead:

• Only itemcontextmenu is firing

Test Case:


Grid

Ext.define('MyApp.view.MyGridPanel', {
    extend: 'Ext.grid.Panel',
    id: 'mainGrid',
    title: 'Test Grid Panel',
    store: 'MyStore',
    initComponent: function() {
    var me = this;
        Ext.applyIf(me, {
            columns: [
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'id',
                    text: 'ID'
                },
                {
                    xtype: 'booleancolumn',
                    dataIndex: 'name',
                    text: 'Value'
                }
            ]
        });
        me.callParent(arguments);
    }
});

Store

xt.define('MyApp.store.MyStore', {
    extend: 'Ext.data.Store',
    constructor: function(cfg) {
        cfg = cfg || {};
        me.callParent([Ext.apply({
            storeId: 'MyStore',
            data: [
                {
                    id: 1,
                    name: 'true'
                },
                {
                    id: 2,
                    name: 'false'
                }
            ],
            fields: [
                {
                    name: 'id'
                },
                {
                    name: 'name'
                }
            ]
        }, cfg)]);
    }
});

Controller

    extend: 'Ext.app.Controller',
    init: function(application) {
        this.control({
            "#mainGrid": {
                itemdblclick: this.griditemdbclick
            },
            "#mainGrid": {
                itemcontextmenu: this.onrightclick
            }
        });
    },
        griditemdbclick: function(target) {
        alert("Fired itemDBlclick Event");
    },
    onrightclick: function(target) {
        alert('Fired itemcontextmenu Event');
    }
});

HELPFUL INFORMATION




Debugging already done:

• none

Possible fix:

• well, it's not a fix but if both or for example "itemcontextmenu" event is written in view instead of controller everything works.
  
  
  Grid
  

  Ext.define('MyApp.view.MyGridPanel', {
      extend: 'Ext.grid.Panel',
      id: 'mainGrid',
      title: 'Test Grid Panel',
      store: 'MyStore',
      initComponent: function() {
          var me = this;
          Ext.applyIf(me, {
              columns: [
                  {
                      xtype: 'gridcolumn',
                      dataIndex: 'id',
                      text: 'ID'
                  },
                  {
                      xtype: 'booleancolumn',
                      dataIndex: 'name',
                      text: 'Value'
                  }
              ],
              listeners: {
                  containercontextmenu: {
                      fn: me.onMainGridContainerContextMenu,
                      scope: me
                  }
              }
          });
          me.callParent(arguments);
      },
      onMainGridContainerContextMenu: function(tablepanel, e, options) {
          alert('Fired itemcontextmenu Event');
      }
  });

Additional CSS used:

• only default ext-all.css
• custom css (include details)

Operating System:

• Win 8

[mitchellsimoens]

Take a look at this (from your code):

this.control({
    "#mainGrid" : {
        itemdblclick : this.griditemdbclick
    },
    "#mainGrid" : {
        itemcontextmenu : this.onrightclick
    }
});

You cannot have the same properties ("#mainGrid") in an object, JavaScript will use the last one but not the ones before it. Try this:

this.control({
    "#mainGrid" : {
        itemdblclick : this.griditemdbclick,
        itemcontextmenu : this.onrightclick
    }
});