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 hav

Answer 1

Everything depends on your use case, but what I do is - escape all HTML code on server side, so that there are no 'forgotten' places by mistake. That of course creates problems, when these data need to be loaded in form fields, because they are escaped. The easiest solution is to override setValue for all form fields and use Extjs htmlDecode function, which will revert these values back to normal.

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

Answer 2

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 3

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.