सलाह, ExtJS 4 के साथ जरूरी सहायता: ग्रिड: सेल संपादन: ऑटो संपादन सुविधा

Question

मैंने एक्स्टजेएस से संबंधित प्रश्नों की खोज की और मुझे कोई संदर्भ नहीं मिला, लेकिन अगर मुझे डुप्लिकेट प्रश्न बनाने के लिए पहले से खेद है।

मैं एक्स्टजेस 4 ग्रिड बनाने के तरीके पर कुछ सहायता पूछना चाहता हूं: सेल संपादन: ऑटो संपादन सुविधा - मेरा मतलब यह है कि, जब मैं एक कुंजी दबाता हूं तो मैं सेल संपादन मोड में प्रवेश करना चाहता हूं (उदाहरण के लिए, दबाकर हाइलाइट किए गए सेल में "123", पाठ को "123" के साथ बदल दिया गया है (यदि कोई है))। फिलहाल सेल संपादन मोड दर्ज करना ENTER दबाकर या माउस के साथ क्लिक करके किया जा सकता है।

आधार के रूप में मैं उपयोग कर रहा हूँ Sencha उदाहरण प्रदान: http://dev.sencha.com/deploy/ext-4.0.2a/examples/grid/cell-editing.html

किसी भी सुझाव, संकेत सराहना होगी।

अग्रिम धन्यवाद! :)

असल में मैंने अपनी समस्या को आंशिक रूप से हल किया। सेल प्रेस पर सेल संपादन योग्य बनाने का एक तरीका मिला, सेल में टेक्स्ट चुनने के लिए selectOnFocus कॉन्फ़िगरेशन पैराम डालें, अब मुझे सेल में पहले char (जो संपादन मोड शुरू किया गया है) डालने की आवश्यकता है।

यह सबसे सुंदर समाधान नहीं हो सकता है, लेकिन यह मेरे लिए काम करता है :) यहां तक ​​पूरा कोड है।

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

लंबे समय से देरी के लिए क्षमा करें, लेकिन सुविधा देता है तो बस कहते हैं कि मैं छुट्टी पर था, समुद्र पर बैठे और Mojitos की चुस्की लेते हुए ... जीवन, आलू और क्या मैं वास्तव में बुद्धिमान आगामी परियोजना ग्रिड के लिए की जरूरत के बारे में सोच। मैं इन बिंदुओं के बारे में निष्कर्ष निकाला:

1. क्योंकि मेरे ग्रिड में लोग संख्याएं लिखेंगे। मुझे वर्तमान सेल में संख्याओं को दबाकर संपादन मोड में प्रवेश करने पर ध्यान केंद्रित करने की आवश्यकता है।
2. मुझे दबाए गए संख्यात्मक कुंजी को केवल संपादन मोड को सक्रिय करने की आवश्यकता नहीं है, लेकिन इसे नए मान के रूप में डालें (इसलिए कीबोर्ड पर 1 दबाकर, सेल संपादन मोड में प्रवेश कर रहा है और 1 को नए मान के रूप में डालने वाला है)
3. मुझे ईएससी और एंटर को जाने की आवश्यकता है हमेशा के रूप में जादू काम करते हैं।

कुल मिलाकर मैंने Ext.core.Element (कुछ विंडोज़ पर IE9 और फ़ायरफ़ॉक्स 6.0.2 का उपयोग करके दिखाई देने वाली अजीब बग को ठीक करने के लिए कुछ और ओवरराइड किए हैं। अधिक जानकारी के लिए, कृपया कोड में टिप्पणियां देखें।), Ext.grid .plugin.Editing (संख्यात्मक कुंजी दबाकर संपादन मोड में प्रवेश करने के लिए) और Ext.Editor (नया मान सेट करने के लिए)।

कार्यसूची: जब संपादन मोड में, दबाने न केवल पूरा संपादन ENTER, लेकिन एक सेल नीचे ले जाने के अगर वहाँ एक (एक्सेल के समान)

पी एस। मेरी अंग्रेजी के लिए खेद है ... वास्तव में मेरी मूल भाषा नहीं, लेकिन उम्मीद है कि यह कम या ज्यादा समझ में आता है। इसके अलावा, इनपुट और टिप्पणियों के लिए धन्यवाद! ;)

/** 
* 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' 
    }); 
});