Re-Enable Text Selection From An ExtJS Grid

For some reason, an ExtJS GridPanel does not allow you to highlight or select any of the text that it renders. This is extremely annoying when your Grid has some very long data strings that users may want to copy and paste between apps. For example, you might want to copy an image filename or copy a long serial number from a Grid and paste it into Excel. Well, you can't.

The reason is that Ext is defining all of the divs that contain the data with an extra 'unselectable=on' field. To fix this, I followed this post and everything seems to work. I've tested this on both Firefox 2.0 and IE6.


< IE fix, using JavaScript >

/**
* http://extjs.com/forum/showthread.php?t=22218
* For non-IE browsers, this is fixed with a CSS addition.
* @param {Ext.grid.GridPanel} grid The GridPanel to fix.
*/
var reenableTextSelection = function(grid){
if(Ext.isIE){
grid.store.on("load", function(){
var elems=Ext.DomQuery.select("div[unselectable=on]", grid.dom);
for(var i=0, len=elems.length; i<len; i++){
elems[i].unselectable = "off";
}
});
}
};


< CSS fix for Firefox and Safari >

.x-grid3-row td,
.x-grid3-summary-row td,
.x-grid3-cell-text,
.x-grid3-hd-text,
.x-grid3-hd,
.x-grid3-row {
-moz-user-select:inherit;
-khtml-user-select:text;
}



Make sure that your CSS stylesheet is loaded after the Ext stylesheet is loaded. Otherwise these overrides for Firefox and Safari won't be accessed.