1. #1
    Sencha User
    Join Date
    Mar 2011
    Location
    Munich, Germany
    Posts
    37
    Vote Rating
    2
    baboen is on a distinguished road

      0  

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

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


    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?

  2. #2
    Touch Premium Member
    Join Date
    Jun 2008
    Posts
    48
    Vote Rating
    0
    bhutten is on a distinguished road

      0  

    Default


    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.

  3. #3
    Sencha User
    Join Date
    Mar 2011
    Location
    Munich, Germany
    Posts
    37
    Vote Rating
    2
    baboen is on a distinguished road

      0  

    Default


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

    Thx for your help really appreciate that.

  4. #4
    Sencha User
    Join Date
    Mar 2011
    Location
    Munich, Germany
    Posts
    37
    Vote Rating
    2
    baboen is on a distinguished road

      0  

    Default


    SOLVED:
    Code:
    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);
    }

  5. #5
    Sencha User
    Join Date
    Mar 2012
    Posts
    3
    Vote Rating
    0
    ganesh.gk31 is on a distinguished road

      0  

    Default


    Not working for IE 8.

  6. #6
    Sencha User
    Join Date
    Jul 2011
    Posts
    1
    Vote Rating
    0
    chispa is on a distinguished road

      0  

    Default


    Hi guys,

    Anyone managed to get this working in IE 8

  7. #7
    Sencha User sanjoyroy's Avatar
    Join Date
    Dec 2007
    Location
    Melbourne
    Posts
    9
    Vote Rating
    0
    sanjoyroy is on a distinguished road

      0  

    Default Extending TextArea Class

    Extending TextArea Class


    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.
    Sanjoy Roy
    Senior Programmer
    Melbourne, Australia.

Similar Threads

  1. TextArea cursor position get and set
    By mtdave in forum Ext 3.x: Help & Discussion
    Replies: 4
    Last Post: 1 Mar 2011, 9:20 AM
  2. How to get Textarea Absolute left and top CURSOR position
    By edfimasa in forum Ext GWT: Help & Discussion (1.x)
    Replies: 1
    Last Post: 24 Jul 2009, 8:15 AM
  3. Append text to textarea field (or panel body, etc)
    By keckeroo in forum Ext 2.x: Help & Discussion
    Replies: 8
    Last Post: 22 Jul 2009, 10:46 PM
  4. Textarea cursor position
    By fernando in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 16 Dec 2008, 3:37 AM

Thread Participants: 4