Asesoramiento, ayuda necesaria con ExtJS 4: grid: edición de celda: función de edición automática

Question

Busqué preguntas relacionadas con ExtJS y no encontré ninguna referencia, pero si la perdí lo siento de antemano para hacer una pregunta duplicada.

Me gustaría pedir algo de ayuda sobre cómo hacer la grilla ExtJS 4: edición de celda: función de edición automática - quiero decir, quiero ingresar al modo de edición de celda cuando presiono una tecla (por ejemplo, presionando "123" en la celda resaltada, el texto se reemplaza (si hay alguno) con "123"). En este momento, puede ingresar al modo de edición de celda presionando ENTER o haciendo clic con el mouse.

Como base de que estoy usando Sencha proporcionó ejemplo: http://dev.sencha.com/deploy/ext-4.0.2a/examples/grid/cell-editing.html

Algún consejo, punteros sería agradecido.

¡Gracias de antemano! :)

En realidad, resolví mi problema parcialmente. Encontré una manera de hacer que la celda se pueda editar al presionar una tecla, poner selectOnFocus config param para seleccionar texto en la celda, ahora necesito insertar la primera char (que inició el modo de edición) en la celda.

No puede ser la solución más hermosa, pero me funciona :) Aquí está el código completo hasta ahora.

var tStore = Ext.create('Ext.data.Store', { 
    storeId:'simpsonsStore', 
    fields:['name', 'email', 'phone'], 
    data:{'items':[ 
     {"name":"Lisa", "email":"lisa@simpsons.com", "phone":"555-111-1224"}, 
     {"name":"Bart", "email":"bart@simpsons.com", "phone":"555--222-1234"}, 
     {"name":"Homer", "email":"home@simpsons.com", "phone":"555-222-1244"}, 
     {"name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254"} 
    ]}, 
    proxy: { 
     type: 'memory', 
     reader: { 
      type: 'json', 
      root: 'items' 
     } 
    } 
}); 

var tCellEdit = Ext.create('Ext.grid.plugin.CellEditing', { 
    clicksToEdit: 1 
}); 

var tGrid = Ext.create('Ext.grid.Panel', { 
    title: 'Simpsons', 
    store: tStore, 
    columns: [ 
     {header: 'Name', dataIndex: 'name', field: 'textfield'}, 
     {header: 'Email', dataIndex: 'email', flex:1, 
      editor: { 
       xtype:'textfield', 
       allowBlank:false, 
       selectOnFocus: true 
      } 
     }, 
     {header: 'Phone', dataIndex: 'phone'} 
    ], 
    selType: 'cellmodel', 
    plugins: [tCellEdit], 
    listeners: { 
     keypress: { 
      element: 'el', 
      fn: function(iEvent, iElement) { 
       iCode = iEvent.getKey(); 
       if (iCode != undefined && iCode != iEvent.LEFT && iCode != iEvent.RIGHT && iCode != iEvent.UP && iCode != iEvent.DOWN && iCode != iEvent.ENTER && iCode != iEvent.ESC) { 
        var iView = tGrid.getView(); 
        var position = iView.selModel.position; 

        tCellEdit.startEditByPosition(position); 
       } 
      } 
     } 
    }, 
    height: 200, 
    width: 400, 
    renderTo: Ext.getBody() 
}); 

Answer 1

Lo siento por retardo largo, pero digamos que yo estaba de vacaciones, sienta en el mar y bebiendo mojitos ... pensando en la vida, las patatas y lo que realmente necesita para la próxima rejilla proyecto sabia. Llegué a la conclusión sobre estos puntos:

1. Porque en mi grilla las personas escribirán números. Necesito enfocarme en ingresar al modo de edición presionando números en la celda actual.
2. Necesito presionar la tecla numérica no solo activar el modo de edición, sino insertarlo como un nuevo valor (presionando 1 en el teclado, la celda ingresa al modo de edición y poner 1 como nuevo valor)
3. Necesito dejar ESC y ENTRAR trabajo mágico como de costumbre.

general, me hizo algunas anulaciones a Ext.core.Element (para fijar extraño error que aparece usando IE9 y Firefox 6.0.2 en Windows 7. Para obtener más detalles, véanse los comentarios en el código.), Ext.grid .plugin.Editing (para ingresar al modo de edición presionando las teclas numéricas) y Ext.Editor (para establecer un nuevo valor).

TODO: cuando se encuentra en modo de edición, presionar ENTER no sólo la edición completa, sino que se mueven una celda hacia abajo si hay uno (similar a Excel)

PS. Perdón por mi inglés ... no es mi lengua materna, pero espero que sea más o menos comprensible. Además, gracias por sus comentarios y comentarios. ;)

/** 
* Fix for bug with cursor position in editor grid textfield 
* 
* Bug description: after loading an editor grid which contains a textfield, the cursor/caret is positioned at the 
* beginning of text field the first time the editor is activated. Subsequent activations position the caret at the end 
* of the text field. 
* In my case this behavior is not observed in Opera 11.51 (Windows 7) and IE8, Firefox 6.0.2 (Windows XP), but observed in IE9 and Firefox 6.0.2 (Windows 7) 
* 
* Current fix helps with IE9 problem, but Firefox 6.0.2 (Windows 7) still putting the cursor/caret at the beginning of text field. 
* 
* Forum post for ExtJS v3 about same problem and where the fix was found: http://www.sencha.com/forum/showthread.php?88046-OPEN-3.1-Caret-Cursor-Position-in-Editor-Grid-Textfield 
*/ 
Ext.core.Element.prototype.focus = function(defer, /* private */dom) { 
    var me = this, 
     dom = dom || me.dom; 
    try { 
     if (Number(defer)) { 
      Ext.defer(me.focus, defer, null, [null, dom]); 
     } else { 
      dom.focus(); 
      // start override 
      dom.value = dom.value; 
      dom.focus(); 
      if (dom.sof) { 
       dom.select(); 
      } 
      // end override 
     } 
    } catch (e) { } 
    return me; 
}; 
/** 
* END OF ALL FIXES 
*/ 

var tStore = Ext.create('Ext.data.Store', { 
    storeId:'simpsonsStore', 
    fields:['name', 'email', 'phone'], 
    data:{'items':[ 
     {"name":"Lisa", "email":"lisa@simpsons.com", "phone":"555-111-1224"}, 
     {"name":"Bart", "email":"bart@simpsons.com", "phone":"555--222-1234"}, 
     {"name":"Homer", "email":"home@simpsons.com", "phone":"555-222-1244"}, 
     {"name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254"} 
    ]}, 
    proxy: { 
     type: 'memory', 
     reader: { 
      type: 'json', 
      root: 'items' 
     } 
    } 
}); 

Ext.onReady(function() { 

    var newValue = ''; 

    /** 
    * Rewriting class Ext.grid.pluging.Editing to make cell go into edit mode by pressing numeric keys. 
    * 
    * changed: requirements: Ext.util.KeyNav -> Ext.util.KeyMap 
    * changed: accordingly made changes to use Ext.util.KeyMap in initEditTriggers function 
    * added: new function onNumberKey for replacing original value with new one and entering cell in edit mode 
    * 
    * tested only for Cell selection model, too lazy for Row selection model testing :P 
    */ 
    Ext.override(Ext.grid.plugin.Editing, { 

     requires: [ 
      'Ext.grid.column.Column', 
      'Ext.util.KeyMap' 
     ], 

     initEditTriggers: function() { 
      var me = this, 
       view = me.view, 
       clickEvent = me.clicksToEdit === 1 ? 'click' : 'dblclick'; 

      // Start editing 
      me.mon(view, 'cell' + clickEvent, me.startEditByClick, me); 
      view.on('render', function() { 
       me.keyNav = Ext.create('Ext.util.KeyMap', view.el, [ 
        { 
         key: [48, 49, 50, 51, 52, 53, 54, 55, 56, 57], //
         fn: me.onNumberKey, 
         scope: me 
        }, { 
         key: 13, // ENTER 
         fn: me.onEnterKey, 
         scope: me 
        }, { 
         key: 27, // ESC 
         fn: me.onEscKey, 
         scope: me 
        } 
       ]); 
      }, me, { single: true }); 
     }, 

     onNumberKey: function(e) { 
      var me = this, 
       grid = me.grid, 
       selModel = grid.getSelectionModel(), 
       record, 
       columnHeader = grid.headerCt.getHeaderAtIndex(0); 

      // Calculate editing start position from SelectionModel 
      // CellSelectionModel 
      if (selModel.getCurrentPosition) { 
       pos = selModel.getCurrentPosition(); 
       record = grid.store.getAt(pos.row); 
       columnHeader = grid.headerCt.getHeaderAtIndex(pos.column); 
      } 
      // RowSelectionModel 
      else { 
       record = selModel.getLastSelected(); 
      } 

      // if current cell have editor, then save numeric key in global variable 
      ed = me.getEditor(record, columnHeader); 
      if (ed) { 
       newValue = String.fromCharCode(e); 
      } 

      // start cell edit mode 
      me.startEdit(record, columnHeader); 
     } 
}); 

    Ext.override(Ext.Editor, { 
     startEdit : function(el, value) { 
      var me = this, 
       field = me.field; 

      me.completeEdit(); 
      me.boundEl = Ext.get(el); 
      value = Ext.isDefined(value) ? value : me.boundEl.dom.innerHTML; 

      if (!me.rendered) { 
       me.render(me.parentEl || document.body); 
      } 

      if (me.fireEvent('beforestartedit', me, me.boundEl, value) !== false) { 
       me.startValue = value; 
       me.show(); 
       field.reset(); 
       field.setValue((newValue != '' ? newValue : value)); 
       me.realign(true); 
       field.focus(false, 10); 
       if (field.autoSize) { 
        field.autoSize(); 
       } 
       me.editing = true; 

       // reset global newValue 
       newValue = ''; 
      } 
     } 
    }); 
    /** 
    * END OF ALL OVERRIDES (thank god!) :) 
    */ 


    var tCellEdit = Ext.create('Ext.grid.plugin.CellEditing', { 
     clicksToEdit: 1 
    }); 

    var tGrid = Ext.create('Ext.grid.Panel', { 
     title: 'Simpsons', 
     store: tStore, 
     columns: [ 
      {header: 'Name', dataIndex: 'name', 
       editor: { 
        xtype: 'textfield', 
        maskRe: /[\d]/ 
       } 
      }, 
      {header: 'Email', dataIndex: 'email', flex:1, 
       editor: { 
        xtype:'textfield' 
       } 
      }, 
      {header: 'Phone', dataIndex: 'phone'} 
     ], 
     selType: 'cellmodel', 
     plugins: [tCellEdit], 
     height: 200, 
     width: 400, 
     renderTo: 'testgrid' 
    }); 
});