Append text to TextArea in the currentcursor position

I've a question, about howto append text to the TextArea, I need to create WYSIWYG texteditor which is created with ExtJs 4. Currently what I only can useis the

TextArea.setValue("new value");

which it'll replace all the value, and what I need is that,example: I click an icon it'll write the icon after the currentcursor position.

I've already googled about this issue and also found severalsolutions which is not working:
even only to get the cursor position, in:
http://www.sencha.com/forum/showthre...l=1#post451800
or, it is also fail:
http://www.sencha.com/forum/showthre...348#post593348
and also this one:
http://hutten.org/bill/extjs/2010/11...-in-a-tex.html

it keeps saying either:
component.selectionundefined
or even:
component.selection.createRange(); undefined
or
component.el.dom.createTextRange() is not afunction, (createTextRange)

I don't know why it is not working in mine, or is there a commonmistake which a person usually do?

insertAtCursor: function(v) {            var document_id = this.getFocusEl().id; var text_field = document.getElementByIdx_x(document_id);            var startPos = text_field.selectionStart;            var endPos = text_field.selectionEnd;            text_field.value = text_field.value.substring(0, startPos)            + v            +text_field.value.substring(endPos, text_field.value.length);            this.el.focus();            text_field.setSelectionRange(endPos+v.length,endPos+v.length);}