Showing posts with label EXT JS 2.x. Show all posts
Showing posts with label EXT JS 2.x. Show all posts

September 20, 2011

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>'
);