2017-04-07 59 views
6

Ghi chú

ExtJS phiên bản: 6.2.1.167ExtJS 6: Phát hành sử dụng nhiều biên tập viên trong một mạng lưới đơn cột

Fiddle: fiddle.sencha.com/#view/editor & fiddle/1tlt

Chức năng này hoạt động trong ExtJS 2.x và không có bất kỳ vấn đề gì.


Goal

Để có một mạng lưới (với một tính năng chỉnh sửa và tế bào nhóm plugin) mà có thể có nhiều biên tập viên khác nhau (textfieldcombo s) trong một cột duy nhất.

Lưới đã đảo ngược hệ thống bảng truyền thống để các tên trường và giá trị bản ghi được hiển thị theo chiều dọc. Ví dụ về tiêu đề bảng được hiển thị tại đây:

+-------------+-----------------+-----------------+----------------- 
- Field Names - Record 1 Values - Record 2 Values - Editable Column 
+-------------+-----------------+-----------------+----------------- 

Chúng tôi không thể sử dụng hệ thống truyền thống vì có hàng trăm trường nhưng chỉ có một số bản ghi để so sánh.


Here is the fiddle

Đây là mã chính cho phép tôi sử dụng nhiều biên tập viên:

Ext.define('MemberCellEditing', { 
 

 
    extend: 'Ext.grid.plugin.CellEditing', 
 
    xtype: 'membercellediting', 
 
    alias: 'plugin.membercellediting', 
 

 
    getCachedEditor: function(editorId, record, column) { 
 
    var me = this, 
 
     editors = me.editors, 
 
     dropDownName = record.get('dropDown'); 
 

 
    // If dropdown field, use dropdown name as editor id 
 
    if (dropDownName && dropDownName != 'N') editorId = dropDownName; 
 

 
    // Attempt to get editor 
 
    var editor = editors.getByKey(editorId); 
 

 
    if (!editor) { 
 

 
     if (dropDownName && dropDownName != 'N') { 
 
     // Retrieve combo 
 
     var combo = DropDownManager.getCombo(editorId); 
 

 
     // Create editor with combo 
 
     editor = Ext.create('Ext.grid.CellEditor', { 
 
      editorId: editorId, // Each dropdown field will have its own combo 
 
      field: combo, 
 
      floating: true 
 
     }); 
 
     } else { 
 
     // Use default editor configured for column 
 
     editor = column.getEditor(record); 
 
     } 
 

 
     if (!editor) { 
 
     return false; 
 
     } 
 

 
     // Allow them to specify a CellEditor in the Column 
 
     if (!(editor instanceof Ext.grid.CellEditor)) { 
 
     // Apply the field's editorCfg to the CellEditor config. 
 
     // See Editor#createColumnField. A Column's editor config may 
 
     // be used to specify the CellEditor config if it contains a field property. 
 
     editor = new Ext.grid.CellEditor(Ext.apply({ 
 
      floating: true, 
 
      editorId: editorId, 
 
      field: editor 
 
     }, editor.editorCfg)); 
 
     } 
 

 
     // Add the Editor as a floating child of the grid 
 
     // Prevent this field from being included in an Ext.form.Basic 
 
     // collection, if the grid happens to be used inside a form 
 
     editor.field.excludeForm = true; 
 

 
     // If the editor is new to this grid, then add it to the grid, and ensure it tells us about its life cycle. 
 
     if (editor.column !== column) { 
 
     editor.column = column; 
 
     column.on('removed', me.onColumnRemoved, me); 
 
     } 
 
     editors.add(editor); 
 
    } 
 

 
    // Inject an upward link to its owning grid even though it is not an added child. 
 
    editor.ownerCmp = me.grid.ownerGrid; 
 

 
    if (column.isTreeColumn) { 
 
     editor.isForTree = column.isTreeColumn; 
 
     editor.addCls(Ext.baseCSSPrefix + 'tree-cell-editor'); 
 
    } 
 

 
    // Set the owning grid. 
 
    // This needs to be kept up to date because in a Lockable assembly, an editor 
 
    // needs to swap sides if the column is moved across. 
 
    editor.setGrid(me.grid); 
 

 
    // Keep upward pointer correct for each use - editors are shared between locking sides 
 
    editor.editingPlugin = me; 
 
    return editor; 
 
    } 
 
});


Issue

Trong khi mã hiện tại của tôi thành công sẽ cho phép bạn sử dụng nhiều biên tập viên trong một cột duy nhất, đó là "ngẫu nhiên" ném lỗi. Tôi nói ngẫu nhiên bởi vì tôi đã không thể theo dõi nguyên nhân thực sự của các lỗi.

Lỗi # 1 Không thể để có được tài sản style tham chiếu không xác định hoặc null

screenshot

enter image description here

Lỗi # 2 Không thể để có được tài sản parentNode tham chiếu không xác định hoặc null

screenshot

enter image description here

Nguyên nhân của cả những sai sót này là do el tài sản trên trình biên tập nó hiện đang tham khảo đã bị phá hủy, có nghĩa là không có tài sản dom.


Làm thế nào để tạo lại

Đây là một phần lý do tại sao tôi đã không thể giải quyết này. Tôi đã không thể tìm ra một phương pháp cụ thể để sao chép vấn đề. Thật không may là cách tôi có thể gặp lỗi là sự kết hợp ngẫu nhiên của việc nhấp/tab vào các ô, nhập dữ liệu, chuyển sang các ô khác, chuyển đổi nhóm, v.v ... Phương pháp hiện tại của tôi thường hoạt động liên quan đến việc nhập một số dữ liệu ngẫu nhiên để thay thế trọng tâm giữa hai ô lân cận. Hầu hết thời gian mất ít hơn 30 giây để có lỗi.

Lý thuyết hiện tại của tôi là có sự kiện bị sa thải gọi một số chức năng, vì lý do gì đó, phá hủy thuộc tính el của trình soạn thảo. Tôi đã thử nhìn vào giá trị ở trên cùng của ngăn xếp cuộc gọi của lỗi và nó xuất hiện rằng các tài sản el đã bị phá hủy tại thời điểm đó.


Bottom Line

Tôi đang tìm gợi ý về cách để theo dõi nguyên nhân thực sự của vấn đề.


Cập nhật

Nó chỉ ra rằng đây có là một lỗi xoay quanh sử dụng combo trong các biên tập viên di động vào lúc này. Dưới đây là một người khác với một vấn đề rất giống nhau:

https://www.sencha.com/forum/showthread.php?330959-ExtJs-6-2-CellEditing-plugin-editor-el-dom-is-null

đây là lỗi id: ExtJS-23.330

Theo Sencha Hỗ trợ, hiện nay chưa có cách giải quyết có sẵn và lỗi này là vẫn còn mở.


Update # 2

lỗi này tồn tại trong 6.0.2 và 6.5.

May mắn thay, tôi đã tìm thấy một cách để nhất quán hơn tái tạo các lỗi:

  1. Hover trên nhóm A trong 5 giây. Mở rộng nhóm A.
  2. Di chuột qua (Trường 1, Cột giá trị) trong 5 giây.
  3. Nhấp vào (Trường 1, Cột giá trị).
  4. Đợi 5 giây, sau đó thu gọn Nhóm A.
  5. Đợi 3 giây, sau đó di chuột qua tiêu đề Nhóm B.
  6. Đợi 10 giây, sau đó di chuột qua tiêu đề Nhóm A.
  7. Đợi 3 giây, sau đó mở rộng Nhóm A.
  8. Di chuột qua (Trường 1, Cột giá trị) trong 3 giây.
  9. Di chuột qua (Trường 1, Giá trị 2 Cột) trong 3 giây.
  10. Nhấp vào (Trường 1, Giá trị 2 Cột).

Nếu lỗi không xảy ra (dường như không xảy ra nhưng trong 6.5):

  1. Đợi 3 giây, sau đó nhấp vào (Field 1, giá trị gia tăng Cột).
  2. Đợi 1 giây, sau đó nhấp lại (Trường 1, cột giá trị) một lần nữa.

Nó không phải là 100%, nhưng đáng tin cậy hơn nhiều so với nhấp chuột ngẫu nhiên xung quanh.

Trả lời

0

Thật khó để nói mà không có thêm một chút ngữ cảnh trong mã và ngăn xếp cuộc gọi, nhưng nếu lỗi # 2 ở trên vẫn là một ví dụ tốt về các vấn đề trong tầm tay, bạn sẽ có thể thay đổi kiểm tra! Editor.rendered để đọc else if (!editor.destroyed), ngay phía trên điểm ngắt trong ảnh chụp màn hình.

Các vấn đề liên quan