How to select text in the grid panel (with the mouse) to copy data

How to select text in the grid panel (with the mouse) to copy data

Following are the steps for allowing selecting text in Grid Panel:

1) First add the following css code in application:

<style type="text/css">
	.x-selectable, .x-selectable * {
		-moz-user-select: text!important;
		-khtml-user-select: text!important;
	}
</style>

2) If you want this change on only one page then use below code:

var grid = new Ext.grid.GridPanel({
   viewConfig: {
      templates: {
	cell: new Ext.Template(
	'<td class="x-grid3-col x-grid3-cell x-grid3-td-{id} x-selectable {css}" style="{style}" tabIndex="0" {cellAttr}>',
	'<div class="x-grid3-cell-inner x-grid3-col-{id}" {attr}>{value}</div>', '</td>'
	 )
	}
   },
   ...
});

   Or if we want it for the whole application then use below code

if (!Ext.grid.GridView.prototype.templates) {
   Ext.grid.GridView.prototype.templates = {};
}
Ext.grid.GridView.prototype.templates.cell = new Ext.Template(
   '<td class="x-grid3-col x-grid3-cell x-grid3-td-{id} x-selectable {css}" '+
   'style="{style}" tabIndex="0" {cellAttr}>',
   '<div class="x-grid3-cell-inner x-grid3-col-{id}" {attr}>{value}</div>',
   '</td>'
);