嶄新的旅程

原文出處
http://www.fengfly.com/plus/view-40697-1.html
 
   ExtJS的grid的控制，預設是Enter(Shift+Enter)上下移動游標，
TAB（Shift+Tab ）左右移動游標； 但用戶希望按下Enter之後可以
左右移動，所以作此轉換。在建立grid後，直接調用以下代碼。
 
 
記得將GridPanal的名稱先丟入JavaScript中做元件控制。
 
@ *.aspx
 
   <ext:Button ID="Button1" runat="server" Text="Btn1">
        <Listeners>
            <Click Handler="xxx001(#{GridPanelName});" />
        </Listeners>
    </ext:Button>
 
@ JavaScript
 
    function xxx001(grid)
    {
         var sm = grid.getSelectionModel();
 
         sm.onEditorKey = function(field, e) {
             var k = e.getKey(), newCell, g = sm.grid, ed = g.activeEditor;
             if (k == e.ENTER) {
                 e.stopEvent();
                 ed.completeEdit();
                 if (e.shiftKey) {
                     newCell = g.walkCells(ed.row, ed.col - 1, -1,
sm.acceptsNav, sm);
                 } else {
                     newCell = g.walkCells(ed.row, ed.col + 1, 1,
sm.acceptsNav, sm);
                 }
             } else if (k == e.TAB) {
                 e.stopEvent();
                 ed.completeEdit();
                 if (e.shiftKey) {
                     newCell = g.walkCells(ed.row-1, ed.col, -1,
sm.acceptsNav, sm);
                 } else {
                     newCell = g.walkCells(ed.row+1, ed.col, 1,
sm.acceptsNav, sm);
                 }
                 if (ed.col == 1) {
                     if (e.shiftKey) {
                         newCell = g.walkCells(ed.row, ed.col + 1, -1,
sm.acceptsNav, sm);
                     } else {
                         newCell = g.walkCells(ed.row, ed.col + 1, 1,
sm.acceptsNav, sm);
                     }
                 }
             } else if (k == e.ESC) {
                 ed.cancelEdit();
             }
             if (newCell) {
                 g.startEditing(newCell[0], newCell[1]);
             }
         };
     ......
     }
 
如此一來，當使用者編輯完某欄資料後按下Enter鍵時，
就會直接開啟編輯右方欄位而非下方欄位。