[SOLVED]Append text to TextArea in the current cursor position

[baboen]

I've a question, about how to append text to the TextArea, I need to create WYSIWYG text editor which is created with ExtJs 4. Currently what I only can use is 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 current cursor position.

I've already googled about this issue and also found several solutions 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 a function, (createTextRange)

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

[bhutten]

The solution posted on my blog (http://hutten.org/bill/extjs/2010/11...-in-a-tex.html) definitely works in Ext 3.3. I've not tested it in Ext 4 - but I'm not surprised that it doesn't work - forms in Ext 4 are quite different, especially with regard to the DOM.

I'm in the process of converting an app to Ext 4 that will require this functionality - if I figure out the solution I'll update the blog post.

[baboen]

yes, my friend told me if it's working fine in ext3.

Thx for your help really appreciate that.

[baboen]

SOLVED:

insertAtCursor: function(v) {
            var document_id = this.getFocusEl().id;
            var text_field = document.getElementById(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);
}

[ganesh.gk31]

Not working for IE 8.

[chispa]

Hi guys,

Anyone managed to get this working in IE 8

[sanjoyroy]

Thanks to baboen, I am just extending the TextArea class.
Code:
Ext.onReady(function(){
Ext.form.TextAreaMailText = Ext.extend(Ext.form.TextArea, {
insertAtCursor: function(v) {
var document_id = this.getEl().id;
var text_field = document.getElementById(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);
}
});
Ext.reg('textareamailtext', Ext.form.TextAreaMailText);
});


Usage:


{
fieldLabel: '<span class="task_fp_label_col">Mail Text: </span>',
width: 400,
xtype: 'textareamailtext',
hidden: false,
height:100,
name: 'mail_text',
emptyText: 'Enter Mail Content',
id: 'mail_text',
value: ''
}
e.g
Ext.getCmp('mail_text').insertAtCursor('many thanks');

Hope this will help someone to implement.