insertAtCursor equallent method for textarea, or a plug in for textarea

Hi i am a great fan of Extjs
Am developing an application using extjs.
In one my page, am using an html editor and text area to insert data.
My aim is to insert a text box’s value in the current cursor position of the html editor and text area,
I got a built-in method for html editor (insertAtCursor) and I succeeded in inserting the value of textfield inside html editor , but I haven’t find any method for the same functionality in the textarea .
Please help to solve my problem
Am using extjs4.1 , developing application in MVC architecture,

My view file am using a checkbox,button,text area,textfield,htmleditor
Check box is used to change the visibility of html editor and text area,
Text field is used to insert data , and on the click event of botton takes the textfields value and inserts in to html editor or text area according to the selection made by the checkbox

This is the method I wrote in the controller

Code:

---

addDataToEditor:function() {
    try{
        var  valueofTextbox = Ext.getCmp('insertvariablekeyword').getValue();
        // This 'insertvariablekeyword'  is the text field
        console.log("New Data"+ valueofTextbox);
        var valueofhtmlEditor = Ext.getCmp('templateHtmlEditor').getValue();
        Ext.getCmp('templateHtmlEditor').insertAtCursor(valueofTextbox);
        // this    'templateHtmlEditor' is the id of html editor   
    }catch(e){
        console.log("Error "+e);
    }
    try{   
        console.log(" This is inside templatePlainTextArea ");
        Ext.getCmp('templatePlainTextArea').getInsertPosition('TEST');
        // This 'templatePlainTextArea' is the id of text area
    }catch(e){
        console.log("Error is "+e);
    }
       
},

---

The above code works well for html editor, it inserts data in the correct cursor position .
Please help me to complete my task I googled a lot to find a method, and I tried some codes but I failed, the result I saw in the console is undefined , Help me please

Is there any plug in available to insert data into the cursor position of text area ?


Thanks in advance

I guess ExtJs doesn't support this for textareas...

How I see you already tried it with ".getInsertPosition('TEST'". But this does the wrong thing ^^

One solution would be to check how the htmlEditor does it:

Code:

---


    insertAtCursor : function(text){        var me = this,            range;        if (me.activated) {            me.win.focus();            if (Ext.isIE) {                range = me.getDoc().selection.createRange();                if (range) {                    range.pasteHTML(text);                    me.syncValue();                    me.deferFocus();                }            }else{                me.execCmd('InsertHTML', text);                me.deferFocus();            }        }    },

---

And we see something strange in there... it uses the Midas Editor -.-
So forget about it xD

How about some native JavaScript:

Code:

---


function insertTextAtCursor(el, text) {    var val = el.value, endIndex, range, doc = el.ownerDocument;    if (typeof el.selectionStart == "number"            && typeof el.selectionEnd == "number") {        endIndex = el.selectionEnd;        el.value = val.slice(0, endIndex) + text + val.slice(endIndex);        el.selectionStart = el.selectionEnd = endIndex + text.length;    } else if (doc.selection != "undefined" && doc.selection.createRange) {        el.focus();        range = doc.selection.createRange();        range.collapse(false);        range.text = text;        range.select();    }}

---

Sure you would have to change the code a lil bit, to make it work with ExtJs, but this would be the best solution I guess ^^

You could also write it as plugin =D

Source: Stackoverflow

@Arg0n

Thank you dear, let me check with this code, If i find a good solution i will post the answer here .
Once again Thank you dear for your support . And Sencha Team , please include a method for textarea in the next version.