TextField: Manipulating the selection and getting the selected text in ExtJS 2

[lajosd]

Lately I needed to change the case of the selected text in a TextArea programmatically (e.g. buttons like "Convert to capitals", etc). Since I needed the text surrounding the selection as well, I wrote a small extension to TextField (which will be inherited in TextArea too):



Ext.form.TextField.prototype.getSelection = function() {
var domElement = this.getEl().dom;
if (Ext.isIE){
var sel = document.selection;
var range = sel.createRange();
if (range.parentElement()!=domElement) return null;
var bookmark = range.getBookmark();
var selection = domElement.createTextRange();
selection.moveToBookmark(bookmark);
var before = domElement.createTextRange();
before.collapse(true);
before.setEndPoint("EndToStart", selection);
var after = domElement.createTextRange();
after.setEndPoint("StartToEnd", selection);
return {
selectionStart: before.text.length,
selectionEnd: before.text.length + selection.text.length,
beforeText: before.text,
text: selection.text,
afterText: after.text
}
} else {
if (domElement.selectionEnd && domElement.selectionStart) {
if (domElement.selectionEnd > domElement.selectionStart){
return {
selectionStart : domElement.selectionStart,
selectionEnd : domElement.selectionEnd,
beforeText : domElement.value.substr(0, domElement.selectionStart),
text : domElement.value.substr(domElement.selectionStart, domElement.selectionEnd - domElement.selectionStart),
afterText : domElement.value.substr(domElement.selectionEnd)
};
}
}
}
return null;
}
Ext.form.TextField.prototype.getSelectedText = function() {
var selection = this.getSelection();
return selection==null?null:selection.text;
}


I hope someone finds it useful. The original article is on my blog: http://lajosd.blogspot.com/2009/10/extjs-getting-selection-from-textfield.html

[aconran]

Nice work, this is a worthwhile addition to the Ext.form.TextField's

[lugreen]

if (domElement.selectionEnd && domElement.selectionStart) {

need change to :



if (domElement.selectionEnd>0 && domElement.selectionStart>=0) {