Results 1 to 2 of 2

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

  1. #1

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

    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:

    Code:
    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:

    Code:
    <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

  2. #2
    Ext Support Team
    Join Date
    Jan 2018
    Posts
    569

    Default

    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.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •