ExtJS 4> Row Editor Grid> Cách thay đổi "Cập nhật" Nút Text

Question

Có cách nào thay đổi văn bản của nút "Cập nhật" trong ExtJS-4 Row Editor Grid không?

Answer 1

Tốt câu hỏi, tôi đã có một cái nhìn thông qua mã nguồn và khi không có gì bên trong các plugin RowEditing, trong lớp là nó kéo dài 'RowEditor.js' có như sau:

Ext.define('Ext.grid.RowEditor', { 
    extend: 'Ext.form.Panel', 
    requires: [ 
     'Ext.tip.ToolTip', 
     'Ext.util.HashMap', 
     'Ext.util.KeyNav' 
    ], 

    saveBtnText : 'Update', 
    cancelBtnText: 'Cancel', 
    ... 
}); 

Vì vậy, tôi d giả sử bạn muốn chỉ cần ghi đè lên 'saveBtnText' trong trường hợp của bạn của 'Ext.grid.plugin.RowEditing' vì nó gọi constructor mẹ với callParent (arguments) trong lớp RowEditing

Answer 2

không phải là dễ dàng và không phải không có hack trong khu vực không có giấy tờ. Vấn đề là, các Ext.grid.plugin.RowEditing trực tiếp instantiates các Ext.grid.RowEditor mà không cho phép bạn vượt qua trong tùy chọn cấu hình. Vì vậy, nói chung bạn cần phải ghi đè lên các phương pháp initEditor() trong các plugin và nhanh chóng biên tập hàng của riêng bạn:

// ... 
plugins: [{ 
    ptype: 'rowediting', 
    clicksToEdit: 2, 
    initEditor: function() { 
     var me = this, 
      grid = me.grid, 
      view = me.view, 
      headerCt = grid.headerCt; 

     return Ext.create('Ext.grid.RowEditor', { 
      autoCancel: me.autoCancel, 
      errorSummary: me.errorSummary, 
      fields: headerCt.getGridColumns(), 
      hidden: true, 

      // keep a reference.. 
      editingPlugin: me, 
      renderTo: view.el, 
      saveBtnText: 'This is my save button text', // <<--- 
      cancelBtnText: 'This is my cancel button text' // <<--- 
     }); 
    }, 
}], 
// ... 

Answer 3

Đối ExtJS 4

Ext.grid.RowEditor.prototype.cancelBtnText = "This is cancel"; 
Ext.grid.RowEditor.prototype.saveBtnText = "This is update"; 

Answer 4

Giải pháp này là để xác định nguyên mẫu của rowEditors. điều đó có nghĩa là cấu hình này là tổng quát hơn. Nếu bạn muốn thay đổi nó chỉ cho một trình soạn thảo, hoặc nếu bạn muốn nhận được cấu hình khác nhau, nguyên mẫu chắc chắn không phải là giải pháp.

nhìn vào mã nguồn:

initEditorConfig: function(){ 
     var me  = this, 
      grid  = me.grid, 
      view  = me.view, 
      headerCt = grid.headerCt, 
      btns  = ['saveBtnText', 'cancelBtnText', 'errorsText', 'dirtyText'], 
      b, 
      bLen  = btns.length, 
      cfg  = { 
       autoCancel: me.autoCancel, 
       errorSummary: me.errorSummary, 
       fields: headerCt.getGridColumns(), 
       hidden: true, 
       view: view, 
       // keep a reference.. 
       editingPlugin: me 
      }, 
      item; 
    for (b = 0; b < bLen; b++) { 
     item = btns[b]; 

     if (Ext.isDefined(me[item])) { 
      cfg[item] = me[item]; 
     } 
    } 
    return cfg; 
}` 

phương pháp này trong tệp các rowEditor, và có một vòng lặp trên btns Array:

btns Array:

btns = ['saveBtnText', 'cancelBtnText', 'errorsText', 'dirtyText']  

for (b = 0; b < bLen; b++) { 
     item = btns[b]; 

     if (Ext.isDefined(me[item])) { 
      cfg[item] = me[item]; 
     } 
    } 

Trong chuỗi vòng lặp foreach này trong btnArray nó được tìm kiếm nếu tồn tại trong cfg cùng một thuộc tính chuỗi, nếu nó được tìm thấy nó được thêm vào cấu hình. Bạn chỉ phải quản lý rằng vòng lặp này tìm thấy những gì bạn muốn thay đổi:

Ví dụ: chúng ta muốn thay đổi nội dung của nút tiết kiệm:

tài sản saveBtnText đó là mục đầu tiên của btns mảng phải tồn tại trong cfg :

if (Ext.isDefined(me[item])) { 
cfg[item] = me[item]; 
} 

tìm kiếm này nếu tài sản tồn tại: if (Ext.isDefined(me[item]))

nếu saveBtnText đã tồn tại trong tính rowEditor thì:

cfg[item] = me[item]; 

và thuộc tính cấu hình bổ sung sẽ được đặt !!