RowExpander and selectable grid cells

[yolk]

I need for my project both the possibility to select grid cells and the RowExpander, in the thread http://www.sencha.com/forum/showthread.php?22218-Text-Selections-in-Grid-cell has been told that "you also need to override the row in the GridView".
The same idea is suggested in http://www.sencha.com/forum/showthread.php?106451-RowExpander-Enable-copy&highlight=prototype.templates+rowExpander

But this isn't clear to me what I have to do to make RowExpander and grid cell selection work together.

With the following 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>'
);

I have the default behaviour for cell selection. Anyway the RowExpander gives the following error:



body is undefined
http://dev.eolia.eolo.it/yolk/eolia-web/branches/schedasiti/ux/RowExpander.js
Line 253
I tried also with http://www.sencha.com/forum/showthread.php?74450-Problem-with-RowExpander.js&highlight=body+undefined+rowexpander to no avail.

I'm using Ext-Js 3.2.1 and upgraded RowExpander as per http://www.sencha.com/forum/showthread.php?96245-3.x-3.2.0-RowExpander-plugin-UPDATED-April-5-2010

Please point me to some examples :)

[yolk]

I was able to solve my problem, to make a long story short:

I copied the row template definition from ext-all-debug.js (about row 43550)



if(!ts.row){
ts.row = new Ext.Template(
'<div class="x-grid3-row {alt}" style="{tstyle}"><table class="x-grid3-row-table" border="0" cellspacing="0" cellpadding="0" style="{tstyle}">',
'<tbody><tr>{cells}</tr>',
(this.enableRowBody ? '<tr class="x-grid3-row-body-tr" style="{bodyStyle}"><td colspan="{cols}" class="x-grid3-body-cell" tabIndex="0" hidefocus="on"><div class="x-grid3-row-body">{body}</div></td></tr>' : ''),
'</tbody></table></div>'
);
}


And with a little editing the final (and working!) result is:


if (!Ext.grid.GridView.prototype.templates) {
Ext.grid.GridView.prototype.templates = {};
}

Ext.grid.GridView.prototype.templates.row = new Ext.Template(
'<div class="x-grid3-row {alt}" style="{tstyle}"><table class="x-grid3-row-table" border="0" cellspacing="0" cellpadding="0" style="{tstyle}">',
'<tbody><tr>{cells}</tr>',
'<tr class="x-grid3-row-body-tr" style="{bodyStyle}"><td colspan="{cols}" class="x-grid3-body-cell" tabIndex="0" hidefocus="on"><div class="x-grid3-row-body">{body}</div></td></tr>',
'</tbody></table></div>'
);

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


Hoping to provide a helpful example for the community...