[CLASSIC] Grid Summary row includes invalid (empty) role attribute.

[maciej.zabielski]

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]

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.