PDA

View Full Version : Error Grid in Grid Ext.ux.RowExpander in Colspan calculation



il Sergio
15 May 2013, 7:26 AM
Hi,
today i fall in an error with a Grid inside a Grid in render.

here my definition:



Ext.define('PerarHome.view.PanelGridProject' ,{
extend: 'Ext.grid.GridPanel',
title: 'My Project List',
xtype : 'gridProject',
alias : 'widget.gridProject',
id : 'gridProject',
store: Ext.create('PerarHome.store.Project'),
plugins: [{
ptype: 'rowexpander',
pluginId: 'rowexpander',
rowBodyTpl: new Ext.XTemplate('<div id="facilities-{id}" style="background-color:green;"></div>')
}],
columns: [
{id:'id', header: 'Project ID', sortable: true, dataIndex: 'id'},
{header: 'Nome', dataIndex: 'nome'},
{header: 'Created On', dataIndex: 'created_on'},
{header: 'Created By', dataIndex: 'created_by'},
{header: 'Location', dataIndex: 'location'},
{header: 'Nr Facilities', dataIndex: 'num_facilities'},
{header: 'Note', dataIndex: 'note'},
{
xtype: 'actioncolumn',
header: 'Op',
width: 50,
items: [{
icon : './PERAR-Portlets/img/icons/ico_modifica_18.gif',
tooltip: 'Edit',
handler: function(grid, rowIndex, colIndex, node, e, record, rowNode) {
this.fireEvent('itemclick', this, 'edit-project', grid, rowIndex, colIndex, record, node);
}
},{
icon : './PERAR-Portlets/img/icons/ico_eliminaDoc_18.gif',
tooltip: 'Delete',
handler: function(grid, rowIndex, colIndex, node, e, record, rowNode) {
this.fireEvent('itemclick', this, 'delete-project', grid, rowIndex, colIndex, record, node);
}
}]
}
],
stripeRows: true,
overflowY: 'auto',
overflowX: 'hidden',
autoHeight: true,
autoSizeGrid: true,
manageHeight: true,
autoSizeColumns: true,
minHeight: 400,
minWeight: 500,
viewConfig: {
forceFit: true,
listeners:{
expandbody:function(rowNode, record, expandRow){
var innerEl = Ext.DomQuery.select('#facilities-'+record.data.id,expandRow)[0];
var innerGrid = Ext.create('PerarHome.view.PanelGridFacility',{
renderTo: innerEl,
id: 'InnerGridFacility-'+record.data.id,
});
},
collapsebody:function(rowNode, record, expandRow){
alert('collapsebody');
var innerEl = Ext.DomQuery.select('#facilities-'+record.data.id,expandRow)[0];
innerEl.innerHTML = '';
}
}
}
});


When i render it i have a correct outer grid correct with my 9 columns, the first column with [+] and the other list in definition.
When i click over [+] its open the sub-grid create PerarHome.view.PanelGridFacility with 8 columns.
When i click over [-] the sub-grid its blank.

The problem is in the open of all collapsed [+] sub-grid, because the extjs render the sub-grids with MINUS 1 column every time that i open a new sub-grid.

I analyzed that there is a colspan propriety on tag: <td class="x-grid-cell-rowbody" colspan="9">, my subgrid its render inside it with my div '<div id="facilities-{id}" style="background-color:green;"></div>'

start correct from 9 and go to 1 any time that i open new sub-grid.

I found this on ext-all-debug.js this code -->

getRowBodyFeatureData: function(record, idx, rowValues) {
var me = this
me.self.prototype.setupRowData.apply(me, arguments);

if (!me.grid.ownerLockable) {
rowValues.rowBodyColspan = rowValues.rowBodyColspan -1;
}
rowValues.rowBody = me.getRowBodyContents(record);
rowValues.rowBodyCls = me.recordsExpanded[record.internalId] ? '' : me.rowBodyHiddenCls;
},

i change the operation to:

rowValues.rowBodyColspan = rowValues.rowBodyColspan ;

so the colspan its always like "9" like my parents columns number, and its always render correct like picture attach.
43801




Is it a possible EXTJS bug? :-?

evant
15 May 2013, 7:11 PM
Yes, you're correct it's a bug in the framework. It will be fixed in the 4.2.1 release. Thanks for the post.

il Sergio
15 May 2013, 10:09 PM
thanks