well, after one afternoon of diving into the source code.
I found a way to let user select(enable copy/paste) text in the grid.
EXT JS control the text selection ability from CSS.
These is the key CSS style need to change to enable text selection
From:
x-grid3-hd {... "-moz-user-select:none"}
x-grid3-hd-inner {... "overflow:hidden"}
x-grid3-cell-inner {... "overflow:hidden"}
x-grid3-row { ..."-moz-user-select:none"}
To:
x-grid3-hd {... "-moz-user-select:all"}
x-grid3-hd-inner {... "overflow:visible"}
x-grid3-cell-inner {... "overflow:visible"}
x-grid3-row {..."-moz-user-select:all"}
The Javascript code to do that
Code:
function enableTextSelection(grid)
{
//enable text selection in IE
if (Ext.isIE)
{
var elms=Ext.DomQuery.select("div[unselectable=on]",grid.dom);
for (i=0; i<elms.length;i++)
{
elms[i].unselectable="off";
}
}
else //any other browser, prmiary Firefox
{
var elms_h=Ext.DomQuery.select("div[class*=x-grid3-hd-inner]{overflow=hidden}",grid.dom)
var elms_1=Ext.DomQuery.select("div[class*=x-grid3-cell-inner]{overflow=hidden}",grid.dom)
var elms_2=Ext.DomQuery.select("*{-moz-user-select=none}",grid.dom)
for (i=0; i<elms_h.length;i++)
{
elms_h[i].style.overflow="visible";
}
for (i=0; i<elms_1.length;i++)
{
elms_1[i].style.overflow="visible";
}
for (i=0; i<elms_2.length;i++)
{
elms_2[i].style["MozUserSelect"]="all";
}
}
}
Hope it will help people who need to copy data from the grid