ExtJS 4: Làm thế nào để biết khi nào bất kỳ trường nào trong biểu mẫu (Ext.form.Panel) thay đổi?

Question

Tôi muốn một người nghe sự kiện duy nhất kích hoạt bất cứ khi nào trường bất kỳ nào có dạng (ví dụ: Ext.form.Panel) thay đổi. Tuy nhiên, lớp Ext.form.Panel không kích hoạt một sự kiện cho chính nó.

Cách tốt nhất để nghe sự kiện 'thay đổi' cho tất cả các trường trong biểu mẫu là gì?

Answer 1

Cập nhật: (! Nhờ @innerJL) Thêm một lựa chọn thứ 3 dựa trên mũi trong ý kiến ​​

Ok, có vẻ như có ít nhất hai cách khá đơn giản để làm điều đó.

Lựa chọn 1) Thêm một 'thay đổi' người nghe với từng lĩnh vực được thêm vào biểu mẫu:

Ext.define('myapp.MyFormPanel', { 
    extend: 'Ext.form.Panel', 
    alias: 'myapp.MyFormPanel', 
    ... 

    handleFieldChanged: function() { 
    // Do something 
    }, 

    listeners: { 
    add: function(me, component, index) { 
     if(component.isFormField) { 
     component.on('change', me.handleFieldChanged, me); 
     } 
    } 
    } 
}); 

này có ít nhất một nhược điểm lớn; nếu bạn "bọc" một số trường trong các vùng chứa khác và sau đó thêm các vùng chứa đó vào biểu mẫu, nó sẽ không nhận ra các trường lồng nhau. Nói cách khác, nó không thực hiện tìm kiếm "sâu" thông qua thành phần để xem nó có chứa trường biểu mẫu cần trình lắng nghe 'thay đổi' hay không.

Tùy chọn 2) Sử dụng truy vấn thành phần để nghe tất cả các sự kiện 'thay đổi' được kích hoạt từ các trường trong vùng chứa.

Ext.define('myapp.MyController', { 
    extend: 'Ext.app.Controller', 
    ... 

    init: function(application) { 
    me.control({ 

     '[xtype="myapp.MyFormPanel"] field': { 
      change: function() { 
       // Do something 
      } 
     } 
    }); 
    } 
}); 

Lựa chọn 3) Nghe cho 'dirtychange' sa thải khỏi cơ bản hình thức 'cơ bản' dưới dạng bảng của (Ext.form.Basic). Quan trọng: Bạn cần đảm bảo bạn phải bật 'trackResetOnLoad' bằng cách đảm bảo rằng {trackResetOnLoad: true} được truyền cho hàm tạo bảng biểu mẫu của bạn.

Ext.define('myapp.MyFormPanel', { 
    extend: 'Ext.form.Panel', 
    alias: 'myapp.MyFormPanel', 
    constructor: function(config) { 
    config = config || {}; 
    config.trackResetOnLoad = true; 
    me.callParent([config]); 

    me.getForm().on('dirtychange', function(form, isDirty) { 
     if(isDirty) { 
      // Unsaved changes exist 
     } 
     else { 
      // NO unsaved changes exist 
     } 
    }); 
    } 
}); 

Cách tiếp cận này là "thông minh nhất"; nó cho phép bạn biết khi nào biểu mẫu đã được sửa đổi, nhưng cũng nếu người dùng sửa đổi nó trở lại trạng thái ban đầu của nó. Ví dụ: nếu họ thay đổi trường văn bản từ "Foo" thành "Bar", sự kiện 'dirtychange' sẽ kích hoạt 'true' cho tham số isDirty. Nhưng nếu người dùng sau đó thay đổi trường trở lại thành "Foo", sự kiện 'dirtychange' sẽ kích hoạt lần nữa và isDirty sẽ là false.

Answer 2

Tôi muốn bổ sung cho câu trả lời của Clint. Có một cách tiếp cận khác (và tôi nghĩ đó là cách tốt nhất cho vấn đề của bạn). Chỉ cần thêm change nghe để hình thành giá trị mặc định của cấu hình:

Ext.create('Ext.form.Panel', { 
    // ... 
    defaults: { 
     listeners: { 
      change: function(field, newVal, oldVal) { 
       //alert(newVal); 
      } 
     } 
    }, 
    // ... 
});