1. #1
    Ext User
    Join Date
    Mar 2007
    Posts
    26
    Vote Rating
    0
    gensisns is on a distinguished road

      0  

    Default Disabling Tab And Enter In EditorGrid

    Disabling Tab And Enter In EditorGrid


    How can the default behavior of tab and enter keys be disabled with using an editor grid. Instead of tab or enter moving to an adjacent cell, I'd like to just complete the edit and stay in the same cell.

    I tried overriding onEditComplete in EditorGrid and onEditorKey in CellSelectionModel to change the behavior, but neither worked.

    Thanks in advance,
    Michael

  2. #2
    Ext User
    Join Date
    Mar 2007
    Posts
    26
    Vote Rating
    0
    gensisns is on a distinguished road

      0  

    Default


    Anyone have any ideas?

  3. #3
    Sencha User
    Join Date
    Apr 2007
    Location
    Italy/UK
    Posts
    152
    Vote Rating
    0
    sj137 is on a distinguished road

      0  

    Default any luck?

    any luck?


    Hi I was just wondering if you had any luck trying to disable the Enter and Tab keys, fyi i read something on another post about swallowing key events and i think there is a function like that somewhere that may help you out.

    I'm try to also alter the events that happen after a Tab and Enter key are pressed during edit of a grid cell, but instead to moving across/down respectively as is the default, i want the edit field to move across/up...

    i tried over riding the onEditComplete and was about to try overriding the onEditorKey when i saw your post...

    i've gotta try but please let me know asap if i'm barking up the wrong tree. many thanks.

    SJ

  4. #4
    Ext User
    Join Date
    Jun 2007
    Posts
    26
    Vote Rating
    0
    xphilius is on a distinguished road

      0  

    Default Any response from the experienced?

    Any response from the experienced?


    I am trying to get a handle on this same problem. I have added a listener to the grid for the keydown and keypress events, and they work as expected, but I cannot seem to use "stopEvent" method of the Ext.EventObject to keep the grid from moving to the next cell when tab is pressed.

    When I hit the tab key, I see the alert, but the grid still moves to the next cell. What is the right way to do this?

    PHP Code:
    // hoping to use this to enhance the keyboard navigation
    function handleKeyDown(passedEventObject) {
        if (
    passedEventObject.getKey() == passedEventObject.TAB) {
             
    dummy passedEventObject.stopEvent();
            
    alert('huh??');
        }
    }

    // this works
    taskGrid.addListener('keydown'handleKeyDown); 
    Thanks in advance! Having too damn much fun with this library!

    Jason

  5. #5
    Ext User para's Avatar
    Join Date
    Apr 2007
    Location
    Redmond, WA
    Posts
    918
    Vote Rating
    -2
    para has a little shameless behaviour in the past

      0  

    Default


    I played with it for a little while, with no real gain.
    I think that it's the browser moving the focus at this point. I don't think any amount of overriding will fix that. However, you may be able to move it back to the cell you want. (let the browser move it forward, then you move it back).
    Let me know...

  6. #6
    Sencha User
    Join Date
    Apr 2007
    Location
    Italy/UK
    Posts
    152
    Vote Rating
    0
    sj137 is on a distinguished road

      0  

    Lightbulb a possible solution

    a possible solution


    hey guys i've found a solution that works for me and may help you out too...

    basically i first override the onEditComplete method of the EditorGrid (find in EditorGrid.js) becuase by default it only fires the validateedit and afteredit events if the 'value' of the cell is different from the 'startValue'... this is becuase in my requirements: if the user doesn't enter a value and leaves the cell blank i want the grid to delete the row, so here's a look at my code:

    in myjs.js:
    PHP Code:
        grid.onEditComplete = function(edvaluestartValue){
            
    grid.editing false;
            
    grid.activeEditor null;
            
    ed.un("specialkey"grid.selModel.onEditorKeygrid.selModel);
        if(
    String(value) != String(startValue)){
                var 
    ed.record;
                var 
    field grid.colModel.getDataIndex(ed.col);
                var 
    = {
                    
    gridgrid,
                    
    recordr,
                    
    fieldfield,
                    
    originalValuestartValue,
                    
    valuevalue,
                    
    rowed.row,
                    
    columned.col,
                    
    cancel:false
                
    };
                if(
    grid.fireEvent("validateedit"e) !== false && !e.cancel){
                    
    r.set(fieldvalue);
                    
    delete e.cancel;
                    
    grid.fireEvent("afteredit"e);
                }
            }else if(
    String(value) == String('')){
                var 
    ed.record;
                var 
    field grid.colModel.getDataIndex(ed.col);
                var 
    = {
                    
    gridgrid,
                    
    recordr,
                    
    fieldfield,
                    
    originalValuestartValue,
                    
    valuevalue,
                    
    rowed.row,
                    
    columned.col,
                    
    cancel:false
                
    };
                if(
    grid.fireEvent("validateedit"e) !== false && !e.cancel){
                    
    r.set(fieldvalue);
                    
    delete e.cancel;
                    
    grid.fireEvent("afteredit"e);
                }
        }
            
    grid.view.focusCell(ed.rowed.col);
        } 
    then i declare:
    grid.on('afteredit', AddOrRemove);

    PHP Code:
        function AddOrRemove(cell){
            if (
    cell.column == 2){
                
    addNewRow.defer(100);
            }
            if (
    cell.value == cell.originalValue){
                
    ds.remove.defer(150ds, [cell.record]);
                    
    grid.un('afteredit'AddOrRemove);
                
    grid.activeEditor.cancelEdit.defer(300);
            }
        } 
    basically if the cell cell value is "" (ie originalValue) then the row is removed from the datastore, then the listener and then the editing is cancelled, however if the focus has been moved to the right (ie cell.column == 2) then i create a new record and insert it at the top of the grid and startediting

    PHP Code:
    function addNewRow(){
    var 
    newRecord = new myRecord({
    myvalue1:-1,
    myValue2:'',
    myValue3:''
    });
    grid.stopEditing();
    ds.insert(0newRecord);
    grid.startEditing(0,1);

    but the really cool bit making the editor's focus move immediately to the right instead of moving down when the user hit's the return key

    to achieve that i override the 'onEditorKey' function of the SelectionModel which in my case is the RowSelectionModel
    so when i create my grid :

    var grid = new Ext.grid.EditorGrid('mygrid', {
    ...
    selModel: new Ext.grid.RowSelectionModel(),
    ...
    });

    then i get the model by:

    var sm = grid.getSelectionModel();

    and then override the method to 'walk' the editor's focus, ie to the right instead of down:
    (you find the original function in RowSelectionModel.js)

    myjs.js:
    PHP Code:
        sm.onEditorKey = function(fielde){
            var 
    e.getKey(), newCellsm.grided g.activeEditor;
            if(
    == e.TAB){
                
    e.stopEvent();
                
    ed.completeEdit();
                if(
    e.shiftKey){
                    
    newCell g.walkCells(ed.rowed.col-1, -1sm.acceptsNavsm);
                }else{
                    
    newCell g.walkCells(ed.rowed.col+11sm.acceptsNavsm);
                }
            }else if(
    == e.ENTER && !e.ctrlKey){
                
    e.stopEvent();
                
    ed.completeEdit();
            if (
    ed.col==1){
                if(
    e.shiftKey){
                
    newCell g.walkCells(ed.rowed.col+1, -1sm.acceptsNavsm);
                }else{
                
    newCell g.walkCells(ed.rowed.col+11sm.acceptsNavsm);
                }
            }
            }else if(
    == e.ESC){
                
    ed.cancelEdit();
            }
            if(
    newCell){
                
    g.startEditing(newCell[0], newCell[1]);
            }
        } 
    the only change i made was on the 'walkCells' lines in the if k==e.ENTER block,
    i.e. instead of ed.row+1 & ed.col, i changed it to ed.row & ed.col+1

    and that's it!

    ok i think i over elaborated, (just in case any newbies like me ar trying to do the same)
    ...the main bit to play around with is the onEditorKey function, override that to move the curser wherever you want, and it happens instantly (ie no need to let it move down and then move it back up etc... HAve FUn!!! ;-)

    ciao

    SJ

  7. #7
    Ext User evankstone's Avatar
    Join Date
    Mar 2007
    Posts
    69
    Vote Rating
    0
    evankstone is on a distinguished road

      0  

    Default


    var grid = new Ext.grid.EditorGrid('mygrid', {
    ...
    selModel: new Ext.grid.RowSelectionModel(),
    ...
    });

    then i get the model by:

    var sm = grid.getSelectionModel();
    i didn't know we could replace the selection model in an editor grid. i thought it was cell selection by default and that was that... this alone could save me some headaches, since i really want to commit changes to the datastore (and database) on (a) switching to a new row, and (b) when the focus goes away from the grid.

    Would switching to RowSelectionModel help me there?
    evan k. stone | santa rosa, ca
    ---------------------------------------------------
    Ext v1.1.1 | FF 2.0.0.x | IE 6.0 | Safari 2.x/3.x (Mac & Win) | WebKit Mac (+ Drosera)

  8. #8
    Ext User
    Join Date
    Oct 2007
    Posts
    17
    Vote Rating
    0
    GreenEyed is on a distinguished road

      0  

    Default


    After reading what sj137 had done, I just had to do this to prevent the ENTER key to move to the next row and start editing:

    Code:
        var theSelectionModel = grid.getSelectionModel();
        theSelectionModel.onEditorKey = function(field, e)
        {
          var k = e.getKey(), newCell, g = theSelectionModel.grid, ed = g.activeEditor;
          if(k == e.ENTER && !e.ctrlKey){
                e.stopEvent();
                ed.completeEdit();
          }
        };
    And so far, it works fine.

    I hope it helps someone
    D.

  9. #9
    Sencha User
    Join Date
    May 2010
    Posts
    101
    Vote Rating
    0
    paulharv is on a distinguished road

      0  

    Default


    It helped me nearly 3 years later! Thanks!

  10. #10
    Sencha User
    Join Date
    Feb 2011
    Posts
    4
    Vote Rating
    0
    yinqiaol is on a distinguished road

      0  

    Default


    Thank you very much! I can sort of hear the final i on chiisai, though it's very faint. Having the romaji makes memorizing so much easier.