Extjs how to get the cursor position in a textareafield

Question

I'm new to Extjs, I need to know how to get te position of the cursor in a textareafield.

I've been googleing an I found these links:

EXTJS 5: Get the current cursor position in a textfield or lookupfield and In ExtJs, how to insert a fixed string at caret position in a TextArea?

From there I got this:

Ext.application({
    name: 'Fiddle',

    launch: function() {
        Ext.define({
            xtype: 'container',
            renderTo: Ext.getBody(),
            layout: 'vbox',
            padding: 20,
            defaults: {
                xtype: 'button',
                margin: '0 0 12 0'
            },

            items: [
                {
                    xtype: 'textareafield',
                    grow: false,
                    width: 545,
                    height: 120,
                    name: 'message',
                    fieldLabel: '',
                    id: 'mytextarea',
                    anchor: '100%'
                },
                {
                    xtype: 'button',
                    text: 'Go',
                    scale: 'medium',
                    id: 'mybutton',
                    listeners: {
                        click: function() {
                            var zone = Ext.getCmp('mytextarea');
                            var text = zone.getValue();
                            var posic = zone.el.dom.selectionStart;

                            console.log(posic); // undefined
                        }
                    }
                }
            ]
        });
    }
});

this fiddle

Oh, and I'm using Ext 6.x, Linux Mint, Firefox and Chromium.

But always posic will return undefined... How can I solve this?

Answer 1

You may try with the following approach:

Ext.application({
    name : 'Fiddle',

    launch : function() {

    Ext.define('Trnd.TestWindow', {
        extend: 'Ext.window.Window',

        closeAction: 'destroy',
        border: false,
        width: 400,
        height: 500,
        modal: true,
        closable: true,
        resizable: true,
        layout: 'fit',
        title: 'Close window to see the position',

        getCaretPos: function() {
            var me = this;

            var el = me.myTextArea.inputEl.dom;
            if (typeof(el.selectionStart) === "number") {
                return el.selectionStart;
            } else if (document.selection && el.createTextRange){
                var range = document.selection.createRange();
                range.collapse(true);
                range.moveStart("character", -el.value.length);
                return range.text.length;
            } else {
                throw 'getCaretPosition() not supported';
            }
        },      

        initComponent: function() {
            var me = this;
            me.callParent(arguments);

            me.myTextArea = Ext.create('Ext.form.field.TextArea', {
                width: 500,
                height: 500,
                editable: true,
                selectOnFocus: false,
                listeners: {
                    afterrender: function() {
                        this.focus(true);
                        var cursorPos = this.getValue().length;
                        this.selectText(cursorPos, cursorPos);
                    }
                }
            });     

            me.panel = Ext.create('Ext.panel.Panel', {
                items: [
                    me.myTextArea
                ]
            });

            me.add(me.panel);
        },

        listeners: {
            'close': function() {
                var me = this;

                alert(me.getCaretPos());
            }   
        }       
    }); 
    var win = new Trnd.TestWindow({
    });
    win.show();
    }
});

Test example with this fiddle.