What is the best way to escape HTML on ExtJS application generally?

Question

I am developing a web application using ExtJS to build GUI and communicate with server via RESTful web-service (the returned data is formatted as JSON objects).
Now I am having problems when processing with data which contains HTML tags, Javascript codes inside; because when I set those values to Ext forms, labels, input fields, they are affected by those syntaxes.
I used this function to load data from model object to form:

form.loadRecord(model);

I have found a solution to escape HTML and JS: using

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

but I think that is not a good solution for whole application, because the developers must do so much things: review all input fields, labels, and put that snippet to them. And after all, that is not a beautiful way to build a fast, robust and maintainable application.
So, could you please help me solution so that it can be modified at one place, and affects to the rest. Can I override the setValue/ setLabel of AbstractComponent? Or should I encode the data before rendering them? And how to decode those data? (P/S: I uses Grails framework on the server-side) Thank you so much.

Answer 1

If you're using Ext.XTemplate, you can escape html in fields like this:

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

Answer 2

This link has a excellent answer by jack.slocum : https://www.sencha.com/forum/showthread.php?13913

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

Util method Ext.util.Format.stripTags() removes all the html/script tags.