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
    43
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi