Do not change CheckColumn value on rightclick

0
votes

I can't find how to open the context menu correctly in a grid with checkbox columns. Whenever the right click is performed on a checkbox cell, the checkbox is toggled. This is not what one expects for a context menu.

onAdminListCellContextMenu: function(tableview, td, cellIndex, record, tr, rowIndex, e, eOpts) {
    e.stopEvent(); // this is where the right click should have been stopped from toggling the button underneath!?
    var sample = Ext.getCmp('AdminListContextMenu') || new Admin.view.AdminListContextMenu;
    sample.showAt(e.xy);
}

Which is called from my Grid Panel:

xtype: 'gridpanel',
flex: 1,
id: 'AdminList',
store: 'AdminStore',
columns: [{
    xtype: 'gridcolumn',
    dataIndex: 'user',
    text: 'User',
    editor: {xtype: 'textfield'}
},{
    xtype: 'checkcolumn',
    dataIndex: 'admins',
    text: 'Grant admin rights'
}],
listeners: {
    cellcontextmenu: {
        fn: me.onAdminListCellContextMenu,
        scope: me
    }
}
2
extjs

2 Answers

0
votes

Try this and let me know the result.

xtype: 'gridpanel',
flex: 1,
id: 'AdminList',
store: 'AdminStore',
selModel: Ext.create('Ext.selection.CheckboxModel', {
   selType: 'checkboxmodel',
   mode: 'SIMPLE',
   checkOnly: true,
   allowDeselect: true,
   ignoreRightMouseSelection: true
},
multiSelect: true,
columns: [{
   xtype: 'gridcolumn',
   dataIndex: 'user',
   text: 'User',
   editor: {xtype: 'textfield'}
},{
   xtype: 'checkcolumn',
   dataIndex: 'admins',
   text: 'Grant admin rights'
}],
listeners: {
   beforeitemmousedown: {
       function(grid, record, item, index, e, eOpts) {
           if (e.button == 0) {
             allowSelection = true;
           } else {
              allowSelection = false;
              return false;
           }
       }
   },
   cellcontextmenu: {
      fn: me.onAdminListCellContextMenu,
      scope: me
   }
}
0
votes
Ext.define('Ext.override.CheckColumn',{
    override:'Ext.grid.column.Check',
    processEvent:function(type, view, cell, recordIndex, cellIndex, e, record, row) {
        if(type == "mousedown" && e.button > 0) return; // prevent mousedown event if mouse button not the left button.
        return this.callParent(arguments);
    }
});

Tested in ExtJS 6.0.1, use at your own risk.