如何在通過Ext網格切換時跳過特定單元格？

我有一個網格面板，其中一些單元格是可編輯的，而其他單元格不是。我希望這樣做，以便當您用鍵盤選中網格時，不可編輯的單元格將被跳過，即永遠不會被選中。如何在通過Ext網格切換時跳過特定單元格？

這裏是到目前爲止，我簡單的網格：

var store = Ext.create('Ext.data.Store', { 
    fields:['name', 'age', 'country'], 
    data:[ 
     {name:'Lisa', age:13, country: 'USA'}, 
     {name:'Bart', age:75, country: 'France'}, 
     {name:'Homer', age:32, country: 'Germany'}, 
     {name:'Marge', age:56, country: 'Australia'} 
    ] 
}); 

var grid = Ext.create('Ext.grid.Panel', { 
    title: 'People', 
    store: store, 
    columns: [ 
     {header: 'Name', dataIndex: 'name', flex: 1}, 
     {header: 'Age', dataIndex: 'age', flex: 1, editor: 'numberfield'}, 
     {header: 'Country', dataIndex: 'country', flex: 1, editor: 'textfield'}, 
    ], 
    selType: 'cellmodel', 
    plugins: [{ 
     ptype: 'cellediting', 
     clicksToEdit: 2 
    }], 
    height: 150, 
    width: 200, 
    renderTo: Ext.getBody() 
});

正如你可以看到，第一列（名稱）是不可編輯的，其中作爲第二（年齡）和第三（國家）已經定義編輯器。我希望只要您用鍵盤選中網格，即可跳過名稱列。換句話說，我的意思是這種標籤順序：

COL1 | COL2 | COL3 | 
----------------------------- 
    SKIP | 1 | 2 | 
----------------------------- 
    SKIP | 3 | 4 | 
----------------------------- 
    SKIP | 5 | 6 | 
-----------------------------

我不知道我在哪裏可以注射這種定製的黏合行爲，但我無法想象這是不可能的事情。

這裏是我的代碼JS提琴：http://jsfiddle.net/qnXrp/

來源

2013-04-15 XåpplI' -I0llwlg' I -

由於客戶想要跳過某些列，因此我現在有同樣的關注。你有沒有找到合適的解決方案？如果你找到一個，請分享它。謝謝。 – firnnauriel

單從配置中刪除selType: "cellmodel"。它將默認爲rowmodel，並且該行中唯一可以選擇的是可編輯的單元格。

來源

2013-04-15 13:32:56 Reimius

對不起，但我需要直觀地顯示每次單獨選擇的單元格。不過謝謝你的回答。 –

在網格視圖中查看重寫walkCells。

這裏是通過網格單元按Tab鍵時跳過第一列一個真正哈克的方式：

Ext.ComponentManager.create({ 
    viewConfig: { 
     xhooks: { 
      walkCells: function(pos, direction, e, preventWrap, verifierFn, scope) { 
       return this.callParent([pos, direction, e, preventWrap, function(newPos) { 
        var newerPos = false; 
        if (newPos.column !== 0) { 
         return true; 
        } 
        newerPos = this.walkCells(newPos, direction, e, preventWrap); 
        if (newerPos) { 
         Ext.apply(newPos, newerPos); 
         return true; 
        } 
        return false; 
       }, this]); 
      } 
     } 
    } 
}, 'grid');

來源

2013-04-15 17:59:35 wantok

我發現了一個解決我的問題，所以我在這裏分享。嘗試在您當前的網格中將其用作配置：

var grid = Ext.create('Ext.grid.Panel', { 
    ... 
    selModel: Ext.create('selection.cellmodel', { 
     onEditorTab: function(editingPlugin, e) { 
      var me = this, 
       direction = e.shiftKey ? 'left' : 'right', 
       position = me.move(direction, e); 

      if (position) { 
       while(!editingPlugin.startEdit(position.row, position.column)){ 
        position = me.move(direction, e); 

        // go to first editable cell 
        if(!position) editingPlugin.startEdit(0, 1); // TODO: make this dynamic 
       } 
       me.wasEditing = false; 

      } else { 
       // go to first editable cell 
       if (editingPlugin.startEdit(0, 1)) { // TODO: make this dynamic 
        me.wasEditing = false; 
       } 
      } 
     }, 
    }), 
    //selType: 'cellmodel', // remove selType 
    ... 
})

來源

2016-06-07 13:24:55 firnnauriel

如何在通過Ext網格切換時跳過特定單元格？

回答

相關問題