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

Ext.grid.rownumberer顯示錯亂的問題

小弟發現造成錯亂是因為自己沒有將view做refresh，應該在新增刪除後執行grid.view.refresh()。

-- 舊文章 --
在ext-js中的Ext.grid.rownumberer()常常會因為store的新增刪除造成數字錯亂，可以在grid中執行新增刪除的地方(如insertRows()/removeRow())，修改成每次執行後都要refresh()即可解決。
不過小弟也不知道這算不算是正解。
將

insertRows : function(dm, firstRow, lastRow, isUpdate){
    if(!isUpdate && firstRow === 0 && lastRow >= dm.getCount()-1){
        this.refresh();
    }else{
        if(!isUpdate){
            this.fireEvent("beforerowsinserted", this, firstRow, lastRow);
        }
        var html = this.renderRows(firstRow, lastRow);
        var before = this.getRow(firstRow);
        if(before){
            Ext.DomHelper.insertHtml('beforeBegin', before, html);
        }else{
            Ext.DomHelper.insertHtml('beforeEnd', this.mainBody.dom, html);
        }
        if(!isUpdate){
            this.fireEvent("rowsinserted", this, firstRow, lastRow);
            this.processRows(firstRow);
        }
    }
    this.syncFocusEl(firstRow);
},

改成

insertRows : function(dm, firstRow, lastRow, isUpdate){
    if(!(!isUpdate && firstRow === 0 && lastRow >= dm.getCount()-1)) {
        if(!isUpdate){
            this.fireEvent("beforerowsinserted", this, firstRow, lastRow);
        }
        var html = this.renderRows(firstRow, lastRow);
        var before = this.getRow(firstRow);
        if(before){
            Ext.DomHelper.insertHtml('beforeBegin', before, html);
        }else{
            Ext.DomHelper.insertHtml('beforeEnd', this.mainBody.dom, html);
        }
        if(!isUpdate){
            this.fireEvent("rowsinserted", this, firstRow, lastRow);
            this.processRows(firstRow);
        }
    }
    this.refresh();
    this.syncFocusEl(firstRow);
},

關於美食

小弟我沒啥嗜好，就是愛吃台灣美食，所以決定將台灣的美食記錄下來，並且分類，分等主要以路邊攤，與一般店面為主(至於連鎖餐廳大家隨時隨地都可以找到，在寫也沒意義了)，文章命名以 '縣市 - 食物類別 - 店名'為主，路邊攤的評等只評好吃的程度與價格(裝潢和服務路邊攤好像不適合)，店面的評等除了包含好吃的程度與價格，還有裝潢也會描述一下，如果有加收服務費，這項肯定要加以評等的。 標題上的☆就是小弟我個人的感覺， 每個人口味都可能不同，所以也許我覺得好吃，別人不覺得，不過應該還是不至於差太多啦，☆的多寡描述如下：

☆：路過可以吃吃看 ☆☆：在附近可以吃吃看 ☆☆☆：有機會要去吃吃看 ☆☆☆☆：一定要去吃吃看 ☆☆☆☆☆：今生一定要吃過 至於分類，目前只想到日式料理、簡餐、火鍋、小吃、糕點飲料、海鮮快炒、麵食、牛排館等，剩下的往後再補充嚕。