Extjs how to get the cursor position in a textareafield - extjs

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.

Answer 2

Use Ext.getDOM() instead of Ext.getCmp() like this:
var myTextArea = Ext.getDom('mytextarea');
var textInArea = myTextArea.value;
var caretPosition = myTextArea.selectionStart;
console.log(caretPosition);
EDIT:
Also xtype of the field must be changed to textarea. In this case your initial example should work too.