Tư vấn, trợ giúp cần thiết với ExtJS 4: lưới: chỉnh sửa ô: tính năng chỉnh sửa tự động

Question

Tôi đã tìm kiếm các câu hỏi liên quan đến ExtJS và không tìm thấy bất kỳ tham chiếu nào, nhưng nếu tôi bỏ lỡ trước khi tạo câu hỏi trùng lặp.

Tôi muốn hỏi một số trợ giúp về cách tạo lưới ExtJS 4: chỉnh sửa ô: tính năng chỉnh sửa tự động - ý tôi là, tôi muốn vào chế độ chỉnh sửa ô khi tôi nhấn phím (ví dụ: bằng cách nhấn “123” trong ô được đánh dấu, văn bản được thay thế (nếu có) bằng “123”). Tại thời điểm vào chế độ chỉnh sửa ô có thể được thực hiện bằng cách nhấn ENTER hoặc nhấp chuột.

Khi nền tảng của tôi đang sử dụng Sencha cung cấp ví dụ: http://dev.sencha.com/deploy/ext-4.0.2a/examples/grid/cell-editing.html

Bất cứ lời khuyên, gợi ý sẽ được đánh giá cao.

Cảm ơn trước! :)

Thực ra tôi đã giải quyết được vấn đề của mình một phần. Tìm thấy một cách để làm cho tế bào có thể chỉnh sửa trên báo chí chính, đặt selectOnFocus cấu hình param cho văn bản lựa chọn trong tế bào, bây giờ tôi cần chèn char đầu tiên (mà bắt đầu chế độ chỉnh sửa) trong tế bào.

Nó có thể không phải là giải pháp đẹp nhất, nhưng nó làm việc cho tôi :) Đây là mã đầy đủ cho đến bây giờ.

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

Xin lỗi vì chậm trễ lâu, nhưng cho phép chỉ nói rằng tôi đã đi nghỉ, ngồi trên biển và nhấm nháp Mojitos ... suy nghĩ về cuộc sống, khoai tây và những gì tôi thực sự cần cho lưới dự án sắp tới khôn ngoan. Tôi đã đi đến kết luận về những điểm này:

1. Vì trong lưới của tôi, mọi người sẽ viết số. Tôi cần tập trung vào chế độ chỉnh sửa bằng cách nhấn số trong ô hiện tại.
2. Tôi cần nhấn phím số không chỉ kích hoạt chế độ chỉnh sửa, nhưng chèn nó làm giá trị mới (do đó bằng cách nhấn 1 trên bàn phím, ô đang nhập chế độ chỉnh sửa và đặt 1 làm giá trị mới)
3. Tôi cần để ESC và ENTER ma thuật hoạt động như thường lệ.

Nói chung tôi đã thực hiện một số ghi đè đối với Ext.core.Element (để khắc phục lỗi lạ xuất hiện khi sử dụng IE9 và Firefox 6.0.2 trên Windows 7. Để biết thêm chi tiết, vui lòng xem chú thích trong mã.), Ext.grid .plugin.Editing (để vào chế độ chỉnh sửa bằng cách nhấn các phím số) và Ext.Editor (để đặt giá trị mới).

TODO: khi trong chế độ chỉnh sửa, nhấn ENTER không chỉ chỉnh sửa hoàn chỉnh, nhưng di chuyển xuống một ô nếu có một (tương tự như Excel)

PS. Xin lỗi vì tiếng Anh của tôi ... không thực sự là ngôn ngữ mẹ đẻ của tôi, nhưng hy vọng nó ít nhiều dễ hiểu. Ngoài ra, cảm ơn cho đầu vào và ý kiến! ;)

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