1. #1
    Sencha User
    Join Date
    May 2007
    Location
    The Netherlands
    Posts
    187
    Vote Rating
    1
    mschering is on a distinguished road

      0  

    Default InsertAtCursort for Textarea

    InsertAtCursort for Textarea


    Here's a plugin for the textarea field that adds a function insertAtPosition(text) to add some text at the cursor position. Hopefully this is helpful to someone.

    Just add "plugins:new InsertAtCursorTextareaPlugin()" to the textarea's config object.

    PHP Code:
    /**
     * Copyright Intermesh
     *
     * This file is part of Group-Office. You should have received a copy of the
     * Group-Office license along with Group-Office. See the file /LICENSE.TXT
     *
     * If you have questions write an e-mail to info@intermesh.nl
     *
     * @version $Id: InsertAtCursorTextareaPlugin.js 2353 2009-04-15 11:05:51Z mschering $
     * @copyright Copyright Intermesh
     * @author Merijn Schering <mschering@intermesh.nl>
     */

    Ext.namespace("Ext.ux"); 
    Ext.ux.InsertAtCursorTextareaPlugin = function (){
        return {
            
    init : function(textarea){
                
    textarea.insertAtCursor = function(v) {
                    if (
    Ext.isIE) {
                        
    this.el.focus();
                        var 
    sel document.selection.createRange();
                        
    sel.text v;
                        
    sel.moveEnd('character',v.length);
                        
    sel.moveStart('character',v.length);
                    }else
                    {
                        var 
    startPos this.el.dom.selectionStart;
                        var 
    endPos this.el.dom.selectionEnd;
                        
    this.el.dom.value this.el.dom.value.substring(0startPos)
                        + 
    v
                        
    this.el.dom.value.substring(endPosthis.el.dom.value.length);

                        
    this.el.focus();                
                        
    this.el.dom.setSelectionRange(endPos+v.length,endPos+v.length);
                    }
                }
            }
        }
    }; 
    Building Group-Office (http://www.group-office.com) with ExtJS: http://http://demo.group-office.eu user: demo / pass: demo

  2. #2
    Sencha User bt_bruno's Avatar
    Join Date
    Mar 2008
    Location
    Redwood City, CA
    Posts
    154
    Vote Rating
    10
    bt_bruno will become famous soon enough

      0  

    Default


    Great! But it would be better as an override... Than we just would have to include it and the method would be avaible "automatically".

  3. #3
    Sencha User
    Join Date
    May 2007
    Location
    The Netherlands
    Posts
    187
    Vote Rating
    1
    mschering is on a distinguished road

      0  

    Post


    Yes you could also do:

    PHP Code:

    Ext
    .override(Ext.form.Textarea,{
    insertAtCursor : function(v) {
                    if (
    Ext.isIE) {
                        
    this.el.focus();
                        var 
    sel document.selection.createRange();
                        
    sel.text v;
                        
    sel.moveEnd('character',v.length);
                        
    sel.moveStart('character',v.length);
                    }else
                    {
                        var 
    startPos this.el.dom.selectionStart;
                        var 
    endPos this.el.dom.selectionEnd;
                        
    this.el.dom.value this.el.dom.value.substring(0startPos)
                        + 
    v
                        
    this.el.dom.value.substring(endPosthis.el.dom.value.length);

                        
    this.el.focus();                
                        
    this.el.dom.setSelectionRange(endPos+v.length,endPos+v.length);
                    }
                }
    }
    ); 
    Building Group-Office (http://www.group-office.com) with ExtJS: http://http://demo.group-office.eu user: demo / pass: demo

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

      0  

    Default


    hi, I'm new to ExtJs and currently is using ExtJs 4 b3.
    I've this function is not working for ExtJs 4 b3. It keeps saying that "selection" is undefined. Even I've used firebug and write it manually in the console.

    it couldn't found the
    obj.selection.
    or even
    obj.selection.createRange();
    What I actually need is to create a simple WYSIWYG widgets purely using ExtJs if possible or by some DOM help.

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

      0  

    Default


    also solved with ExtJs4. The DOM is somewhat different. So I refactor my code and access the dom element from the document, not by selecting the textArea then travers to the text/value.

    Code:
    ..........................
                var document_id = this.getFocusEl().id;
                var text_field = document.getElementById(document_id);
                var startPos = text_field.selectionStart;
                var endPos = text_field.selectionEnd;
    ............................
    thx anyway

  6. #6
    Sencha User dorgan's Avatar
    Join Date
    Dec 2007
    Location
    Cocoa, FL
    Posts
    286
    Vote Rating
    -1
    dorgan is an unknown quantity at this point

      0  

    Talking


    good job everyone....I just found this plugin/override and it has minimized some of my code by probably a couple of dozen lines or so as I use functionality like this in multiple places...

    Great work!!

  7. #7
    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, can any one please provide solution. Thanks in Advance