Displaying JS Code inside ExtJS TextArea

Hi guys,

Well, in this post I would like to talk about how to display a code snippet inside ExtJS. Say you want to create a panel where you can see a code snippet, copy/paste of whatever, but you want this code snippet to come from an actual file, in our case - JS file, and be loaded at runtime.
So, how do you do that?
It's pretty simple in the end, but finding and assembling the solution is not as trivial as you might think (and so I wish this post will turn future searches to be much faster than mine).
We're going to use a config property of the TextArea called "loader", which helps us in loading remote content to the TextArea. This loader can receive a URL to tell it from where to load the content and it has several predefined renderers that can be applied on the content and, well, render it accordingly.
Since we don't have a JS code renderer predefined, we can use a function instead of a String defining the renderer type, and in that function declare how we want the code to be rendered, which is mainly some indentations, at this point.
I used the code snippet from here to create the RegExp needed to render the code nicely (BTW, please find the ones who invented RegExp and electrocute them somewhere, ok?).
So with out further a due, here is the code for displaying a JS code inside an ExtJS TestArea.

xtype: 'textareafield',
autoScroll: 'auto',
width: '100%',
height: '100%',
loader: {
url: 'https://localhost/springapp/js/app/view/component/codesnippet.js',
autoLoad: true,
renderer: function(loader, response, active) {
var text = new String(response.responseText);
text = text.replace(/&/mg, '&');
text = text.replace(//mg, '>');
text = text.replace(/\"/mg, '"');
text = text.replace(/\t/g, ' ');
text = text.replace(/\r?\n/g, '
');
text = text.replace(/

/g, '
');
text = text.replace(/ /g, ' ');
loader.getTarget().update(text);
return true;
}
}

Cheers