PDA

View Full Version : [CLASSIC] Grid Summary row includes invalid (empty) role attribute.



maciej.zabielski
11 Jul 2019, 2:28 AM
When using Ext.grid.feature.Summary a row that is added contains role presentation on the main element.
The row is built based on template:



me.summaryBar = grid.addDocked({ childEls: ['innerCt', 'item'],
/* eslint-disable indent, max-len */
renderTpl: [
'<div id="{id}-innerCt" data-ref="innerCt" role="presentation">',
'<table id="{id}-item" data-ref="item" cellPadding="0" cellSpacing="0" class="' + tableCls.join(' ') + '">',
'<tr class="' + me.summaryRowCls + '"></tr>',
'</table>',
'</div>'
],


But.... the Table Row visible there gets updated somewhere on the way, when the columns are added.
When outputted to DOM, it will have this shape:


<tr class="x-grid-row-summary x-grid-row-total x-grid-row-summary-item " role=""></tr>

Empty role attribute should not be emitted.
Can anyone spot the location where the columns are added to this row and where the row gets updated with extra classes and this empty role attribute?

Regards,
Maciej

rakumar
8 Aug 2019, 9:27 AM
Hello Maciej,

An Ext.view.Table uses its rowTpl to emit a <tr> HTML tag to its output stream. To render cells, it invokes Ext.view.Table#renderCell
passing the rows member of its data object. A Feature may inject its own tpl or rowTpl or cellTpl into the Ext.view.Table's rendering by
calling Ext.view.Table#addTpl or Ext.view.Table#addRowTpl or Ext.view.Table#addCellTpl.


You can get all details from Ext.grid.feature.Feature API.


you will get that code inside Ext.view.Table class where "ROLE" attributes is added, please check it.





rowTpl: [
'{%',
'var dataRowCls = values.recordIndex === -1 ? "" : " ' + Ext.baseCSSPrefix + 'grid-row";',
'%}',
'<tr class="{[values.rowClasses.join(" ")]} {[dataRowCls]}"',
' role="{rowRole}" {rowAttr:attributes}>',
'<tpl for="columns">' +
'{%',
'parent.view.renderCell(values, parent.record, parent.recordIndex, parent.rowIndex, xindex - 1, out, parent)',
'%}',
'</tpl>',
'</tr>',
{
priority: 0
}
],

cellTpl: [
'<td class="{tdCls}" {tdAttr} {cellAttr:attributes}',
' style="width:{column.cellWidth}px;',
'{% if(values.tdStyle){out.push(values.tdStyle);}%}"',
'{% if (values.column.cellFocusable === false) {%}',
' role="presentation"',
'{% } else { %}',
' role="{cellRole}" tabindex="-1"',
'{% } %}',
' data-columnid="{[values.column.getItemId()]}">',
'<div {unselectableAttr} class="' + Ext.baseCSSPrefix + 'grid-cell-inner {innerCls}" ',
'style="text-align:{align};',
'{% if (values.style) {out.push(values.style);} %}" ',
'{cellInnerAttr:attributes}>{value}</div>',
'</td>',
{
priority: 0
}






Regards,
Kumar
Sencha Support.