Hi Guys!

Here I am going to explain about getting selected text string from a EXTJS/HTML textarea/textinput.

We need to write two different code for IE based browsers and rest of all.

In ExtJS first we need to select dom element of textarea and that can be done using inputEl.dom.

var inputTextArea = Ext.ComponentQuery.query('main textarea')[0];
var input = inputTextArea.inputEl.dom;

It basically gives us the textarea instanse as we can get by writting

var input = document.getElementById('idname');

But generally we dont give components a id and EXTJS framework automattically assign a unique id to each and  every component by itself. So we have to do it by using inputEl.dom way.

next step is to check if document.selection && document.selection.createRange are not undefined. if they are not undefined then we are working for IE based browsers. and vise versa.

Ok! so if we have document.selection then we can get our selected text by

input.selection = document.selection.createRange();
selectedText = input.selection.text;

Let me explain what the above code exactly do.
first we get document.selection.createRange(). createRange() method creates a TextRange object from the current text selection. You can study more about createRange from microsoft website.

In second step, we simply got the selection text and assigned it into a variable.

On the other hand if we are working with a non IE browser then the way is little different and can be achieved by

selectedText = input.value.substring(input.selectionStart, input.selectionEnd);

Here input.selectionStart and input.selectionEnd return the selection start index/selection end index from the selected string and by this way we can easily get substring by putting these parameters into the substring method of input string.

The running example can be found on http://textselection.herokuapp.com/

The complete code for this example is as below

Ext.define("TextSelection.view.Main", {
    extend: 'Ext.Panel',
    requires:['Ext.form.field.TextArea','Ext.resizer.Splitter'],
    alias:'widget.main',
    title:'How to get Text Selection from a text input',
    layout:'vbox',
    initComponent:function(){
    	this.items = [
	    	{
	    		xtype:'textarea',
	    		width:'100%',
	    		emptyText:'Enter some text here, select some part of it and click on \'Get selected Text\' button at the bottom ',
	    		flex:1
	    	},
	    	{
	    		xtype:'splitter'
	    	},
	    	{
	    		xtype:'panel',
	    		border:0,
	    		flex:.5,
	    		width:'100%',
	    		layout:'fit',
	    		title:'Your text selection',
	    		fbar: [
	    			{
	    				type:'label',
	    				html:'<a href="http://www.twitter.com/goyalshubham13" target="_blank">@goyalshubham</a>',
	    				ui:'plain'
	    			},
					{
						xtype: 'button',
						text: 'Get selected text',
						listeners:{
							click:this.getSelectedText
						}
					}
				],
				items:[
					{
			    		xtype:'textarea',
			    		width:'100%',
			    		flex:1,
			    		readOnly:true,
			    		value:'Your selected text',
			    	}
				]
	    	}
	    ]
	    this.callParent(arguments);
    },
    getSelectedText:function(button, event){
    	var resultTextArea = Ext.ComponentQuery.query('main panel textarea')[0];
    	var inputTextArea = Ext.ComponentQuery.query('main textarea')[0];
    	var selectedText;
    	var input = inputTextArea.inputEl.dom;
		if (document.selection && document.selection.createRange) {
			input.selection = document.selection.createRange();
			selectedText = input.selection.text;
		} else if (typeof input.selectionStart === 'number') {
			selectedText = input.value.substring(input.selectionStart, input.selectionEnd);
		}
		inputTextArea.focus();
		resultTextArea.setValue(selectedText);
    }
});