Enter key behavior as tab key

  1. #1

    Enter key behavior as tab key

    Hello.

    I'm kind of new to EXT.

    I would like to make enter key works exactly as the TAB key does in this example:

    http://examples2.ext.net/#/GridPanel..._DirectMethod/

    I have already search the forum but can't find anything.

    Can any one help me please.
  2. #2
    Hello!

    Welcome to our forum!

    You want to change the behavior when an editor is active or when it is inactive.
  3. #3
    Hi, thank you.

    I want to change it while editor is active, I notice that if it were a regular textbox cell inside the grid, when you change cells, the text always get highlighted, But with enter key you have to press it twice to erase current value and enter a new one.
  4. #4
    What you need to do is to override onSpecialKey function in CellEditing plugin: http://docs.sencha.com/extjs/4.1.3/s...in-CellEditing
  5. #5
    Thank you for your Help.

    I can't find how to override the onSpecialKey function.

    I try with this:

     <KeyMap >
                        <Binding>
                            <ext:KeyBinding  Handler="edit2(this,#{gpDetallePedido});" >
                                <Keys>
                                    <ext:Key Code="ENTER" />
                                </Keys>
                            </ext:KeyBinding>
                        </Binding>
                    </KeyMap>
    But can't highlight next row cell value.
  6. #6
    So, you need to override the following function using the Ext.override method: http://docs.sencha.com/extjs/4.1.3/#...ethod-override

    onSpecialKey: function(ed, field, e) {
    	var me = this,
    		grid = field.up('tablepanel'),
    		sm;
    		
    	if (e.getKey() === e.TAB) {
    		e.stopEvent();
    		
    		if (ed) {
    			// Allow the field to act on tabs before onEditorTab, which ends
    			// up calling completeEdit. This is useful for picker type fields.
    			ed.onEditorTab(e);
    		}
    		
    		sm = grid.getSelectionModel();
    		if (sm.onEditorTab) {
    			return sm.onEditorTab(grid === me.grid ? me : me.lockingPartner, e);
    		}
    	}
    }
    Hopefully, if you change
    if (e.getKey() === e.TAB) {
    to
    if (e.getKey() === e.ENTER) {
    it will work.

    And one more tip, you should put your overriding after ResourceManager in order to be sure that all JS files are loaded.
  7. #7
    Thank you!!!!!

    I have to override RowModel too.

    Here is the code if some one else need it:

    
      Ext.override(Ext.grid.plugin.CellEditing, {
                 onSpecialKey: function (ed, field, e) {
                     var grid = this.grid, sm;
                     if (e.getKey() === e.TAB) {
                         e.stopEvent();
                         sm = grid.getSelectionModel();
                         if (sm.onEditorTab) sm.onEditorTab(this, e);
                     } else if (e.getKey() === e.ENTER) {
                         e.stopEvent();
                         sm = grid.getSelectionModel();
                         if (sm.onEditorEnter) sm.onEditorEnter(this, e);
                     }
                 }
             });
    
             Ext.override(Ext.selection.RowModel, {
                 lastId: null,
                 onEditorTab: function (ep, e) {
                     var me = this,
                view = me.view,
                record = ep.getActiveRecord(),
                header = ep.getActiveColumn(),
                position = view.getPosition(record, header),
                direction = e.shiftKey ? 'left' : 'right',
                newPosition = view.walkCells(position, direction, e, false),
                newId = newPosition.row,
                grid = view.up('gridpanel');
    
                     if (me.lastId != newId && me.lastId != null) {
                         deltaX = me.lastId < newId ? -Infinity : Infinity;
                         header = grid.headerCt.getHeaderAtIndex(newPosition.column);
                         if (header) {
                             while (!header.getEditor()) {
                                 newPosition = view.walkCells(newPosition, direction, e, false);
                                 header = grid.headerCt.getHeaderAtIndex(newPosition.column);
                             }
                         }
                     } else {
                         deltaX = ep.context.column.width * (direction == 'right' ? 1 : -1);
                     }
                     grid.scrollByDeltaX(deltaX);
                     me.lastId = newPosition.row;
                     Ext.defer(function () {
                         if (newPosition) ep.startEditByPosition(newPosition);
                         else ep.completeEdit();
                     }, 100);
                 },
                 onEditorEnter: function (ep, e) {
                     var me = this,
                view = me.view,
                record = ep.getActiveRecord(),
                header = ep.getActiveColumn(),
                position = view.getPosition(record, header),
                direction = e.shiftKey ? 'up' : 'down',
                newPosition = view.walkCells(position, direction, e, false),
                newId = newPosition.row,
                grid = view.up('gridpanel');
    
                     deltaY = 20 * (direction == 'down' ? 1 : -1);
                     grid.scrollByDeltaY(deltaY);
                     me.lastId = newPosition.row;
                     Ext.defer(function () {
                         if (newPosition) ep.startEditByPosition(newPosition);
                         else ep.completeEdit();
                     }, 100);
                 }
             });
    I also read this:
    http://stackoverflow.com/questions/1...-editable-grid
  8. #8
    Thank you for update and sharing your final solution!

Similar Threads

  1. [CLOSED] Override checkbox behavior
    By pawangyanwali in forum 2.x Premium Help
    Replies: 18
    Last Post: Jun 20, 2013, 7:33 AM
  2. Combobox - Change of behavior
    By IFLOW in forum 2.x Help
    Replies: 2
    Last Post: Jul 18, 2012, 10:52 AM
  3. [CLOSED] possible reason for this behavior?
    By vali1993 in forum 1.x Premium Help
    Replies: 5
    Last Post: Dec 01, 2010, 4:23 PM
  4. DateField behavior
    By Krisller in forum 1.x Help
    Replies: 1
    Last Post: Aug 23, 2010, 11:09 PM
  5. ext:Desktop Behavior
    By yaser82 in forum Open Discussions
    Replies: 3
    Last Post: Jan 01, 2009, 8:15 PM

Tags for this Thread

Posting Permissions