Cách tốt nhất để thoát HTML trên ứng dụng ExtJS nói chung là gì?

Question

Tôi đang phát triển một ứng dụng web bằng cách sử dụng ExtJS để xây dựng GUI và giao tiếp với máy chủ thông qua dịch vụ web RESTful (dữ liệu trả về được định dạng là các đối tượng JSON).
Bây giờ tôi gặp sự cố khi xử lý dữ liệu chứa thẻ HTML, mã Javascript bên trong; bởi vì khi tôi đặt những giá trị đó thành dạng Ext, label, input fields, chúng bị ảnh hưởng bởi những cú pháp đó.
tôi đã sử dụng chức năng này để tải dữ liệu từ đối tượng mô hình mẫu:

form.loadRecord(model); 

Tôi đã tìm thấy một giải pháp để thoát khỏi HTML và JS: sử dụng

field.setValue(Ext.util.Format.htmlDecode(data)); 

nhưng tôi nghĩ đó không phải là một giải pháp tốt cho toàn bộ ứng dụng, bởi vì các nhà phát triển phải làm rất nhiều thứ: xem xét tất cả các trường nhập, nhãn và đặt đoạn mã đó vào chúng. Và sau tất cả, đó không phải là một cách hay để xây dựng một ứng dụng nhanh, mạnh mẽ và dễ bảo trì.
Vì vậy, bạn có thể vui lòng giúp tôi giải pháp để nó có thể được sửa đổi tại một nơi và ảnh hưởng đến phần còn lại hay không. Tôi có thể ghi đè setValue/setLabel của AbstractComponent không? Hoặc tôi nên mã hóa dữ liệu trước khi hiển thị chúng? Và làm thế nào để giải mã những dữ liệu đó? (P/S: Tôi sử dụng khung Grails ở phía máy chủ) Cảm ơn bạn rất nhiều.

Answer 1

Mọi thứ phụ thuộc vào trường hợp sử dụng của bạn, nhưng những gì tôi làm là - thoát tất cả mã HTML ở phía máy chủ, do đó không có các địa điểm 'bị lãng quên' do nhầm lẫn. Điều đó tất nhiên tạo ra vấn đề, khi những dữ liệu này cần phải được nạp trong các trường biểu mẫu, bởi vì chúng được thoát. Giải pháp đơn giản nhất là ghi đè setValue cho tất cả các trường biểu mẫu và sử dụng hàm Extjs htmlDecode, sẽ hoàn nguyên các giá trị này trở lại bình thường.

Ext.override(Ext.form.field.Base, { 
    setValue: function(val) { 
     val = Ext.util.Format.htmlDecode(val); 
     return this.callParent([val]); 
    } 
}); 

Answer 2

Nếu bạn đang sử dụng Ext.XTemplate, bạn có thể thoát khỏi html trong các lĩnh vực như thế này:

var tpl = new Ext.XTemplate(
    '<p>My Field: {myField:htmlEncode}</p>' 
); 

Answer 3

Tôi biết câu hỏi này là cũ, nhưng việc đăng để tham khảo trong tương lai:

sự trả lời được đăng ny Janis Coders hoạt động, nhưng có vẻ như phá vỡ bộ chọn ngày bộ chọn. Chỉ cần dành 1 giờ debbuging vấn đề này, nghĩ rằng tôi muốn đề cập đến nó ở đây.

Answer 4

Liên kết này có một câu trả lời tuyệt vời bởi jack.slocum: https://www.sencha.com/forum/showthread.php?13913

grid.on('validateedit', function(e){ 
 
    e.value = Ext.util.Format.stripTags(e.value); 
 
});

phương pháp util Ext.util.Format.stripTags() loại bỏ tất cả các thẻ html/script.