ext.gird的右鍵功能簡介

Grid提供了四個與右鍵功能有關的event，包含contextmenu、cellcontextmenu、以及headercontextmenu，說明分別如下：
由於Browser本身就具有右鍵功能，所以在自訂右鍵功能時，必須使用preventDefault防止發生Browser的預設事件動作。
contextmenu(Ext.ExentObject e)
The raw contextmenu event for the entire grid.

cellcontextmenu(Grid this, Number rowIndex, Number cellIndex, Ext.EventObject e)
Fires when a cell is right clicked。
範例為顯示使用者對哪個cell按下右鍵。

var headerMenu = new Ext.menu.Menu({
    items: [{
        text: 'show index(row, col)',
        handler: function(item, event) {
            alert(headerMenu.cellSelected.row + 
                  ' ' + headerMenu.cellSelected.column);
        }
    }]
});
grid.on('cellcontextmenu', function(grid, rowIndex, columnIndex, e) {
    e.preventDefault();
    // 將點選的cell資訊存放於此
    headerMenu.cellSelected = {'row': rowIndex, 'column': columnIndex}; 
    headerMenu.showAt(e.getXY());
});

rowcontextmenu(Grid this, Number rowIndex, Ext.EventObject e)
Fires when a row is right clicked。
我將舉刪除某列為範例說明。由於menu的handler並不能直接得知目前選到的row index，所以必須在rowcontextmenu event中，先將row index存起來，在menu的handler中讀取，才能得知目前選到的row。

var rowMenu = new Ext.menu.Menu(
  items: [{
    text: 'delete',
    handler: function(item, event) {
      var rec = store.getAt(grid.rowContextIndex);
      store.remove(rec);
    }
  }]
});
grid.on('rowcontextmenu', function(grid, rowIndex, e) {
    e.preventDefault();
    grid.getSelectionModel().selectRow(rowIndex);
    grid.rowContextIndex = rowIndex; // 將點選的row資訊存放於此
    rowMenu.showAt(e.getXY());
});

headercontextmenu(Grid this, Number columnIndex, Ext.EventObject e)
Fires when a header is right clicked。
例子為顯示使用者對哪個header按下右鍵。

var headerMenu = new Ext.menu.Menu({
    items: [{
        text: 'show column index',
        handler: function(item, event) {
            alert(grid.headerContextId);
        }
    }]
});
grid.on('headercontextmenu', function(grid, columnIndex, e) {
    e.preventDefault();
    var cm = grid.getColumnModel();
    // 將點選的column資訊存放於此
    grid.headerContextId = cm.getDataIndex(columnIndex); 
    headerMenu.showAt(e.getXY());
});