Wednesday, July 9, 2014

Enable the text selection in grid panels of EXtjs3.4

Enabling the text selection in grid panels in extJS3.4

Step 1:   Include the following scripts into the js files.

/**
 * to enable the text selection in grid panels
 */   
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>'
);


Step 2: Include the following styles into your style sheet or the page


Style sheet:

.x-selectable, .x-selectable * {
-moz-user-select: text!important;
-khtml-user-select: text!important;
}   

or jsp page

<style>

.x-selectable, .x-selectable * {
-moz-user-select: text!important;
-khtml-user-select: text!important;
}   


</style>

1 comment: