3

This is my first question, I’ll try to be accurate.

I updated my application from ExtJS 6.2 to ExtJS 6.5 and I found a bug: in a Grid the Summary doesn’t work properly when docked.

I created a Sencha Fiddle showing that issue and I asked to official support site, they’ll try to find a solution, meanwhile I have to solve my problem autonomously.

I could downgrade to ExtJS 6.2 but there are several bugs to solve even with that version, so I prefer to use always the latest.

So, the question is: do anyone had the same problem? I heard that it is a regression, since it was solved in version 4.5 or something like that, but I’m pretty new to this framework (i.e. I started using ExtJS just a month ago).

Can you suggest me a workaround, anything useful, a starting point to debug?

I do not have much time to complete the application and any suggestion will be appreciated (e.g. should I try to debug Summary or start to develop a custom component?)

Amir
  • 1,328
  • 2
  • 13
  • 27
DanieleAlessandra
  • 1,380
  • 1
  • 12
  • 21
  • " in a Grid the Summary doesn’t work properly when docked" can you be more specific? – Gabri T Jun 12 '17 at 10:09
  • 2
    Hi, I have a grid with a Summary. When I set the property “docked” to true the whole thing stops to work: the values of the sums are wrong and the cells does not show/hide together to their columns. If you take a look at the fiddle (https://fiddle.sencha.com/#fiddle/214s) you’ll see immediately what’s wrong, in fact the code for the two grids in the example are identical, except for the “dock” flag on summary feature. – DanieleAlessandra Jun 12 '17 at 10:13

2 Answers2

0

Same issue here, it appears that the datachange event is not being fired after grid reconfigure event.

Add this to your grid to confirm:

listeners: {
    reconfigure: function(grid, store) {
          store.fireEvent('datachanged', store);
    }
},
bulforce
  • 991
  • 1
  • 6
  • 11
0

Try this override.

Ext.define('Ext.grid.feature.Summary', {
override: 'Ext.grid.feature.Summary',
afterHeaderCtLayout: function (headerCt) {
    var me = this,
        view = me.view,
        columns = view.getVisibleColumnManager().getColumns(),
        column,
        len = columns.length, i,
        summaryEl,
        el, width, innerCt;

    if (me.showSummaryRow && view.refreshCounter) {
        if (me.dock) {
            summaryEl = me.summaryBar.el;
            width = headerCt.getTableWidth();
            innerCt = me.summaryBar.innerCt;
            //if summary is docked item getAll available columns.
            columns = view.getColumnManager().getColumns();
            len = columns.length;
            // Stretch the innerCt of the summary bar upon headerCt layout
            me.summaryBar.item.setWidth(width-1);

            // headerCt's tooNarrow flag is set by its layout if the columns overflow.
            // Must not measure+set in after layout phase, this is a write phase.
            if (headerCt.tooNarrow) {
                width += Ext.getScrollbarSize().width;
            }
            innerCt.setWidth(width-1);
        } else {
            summaryEl = Ext.fly(Ext.fly(view.getNodeContainer()).down('.' + me.summaryItemCls, true));
        }
        // If the layout was in response to a clearView, there'll be no summary element
        if (summaryEl) {
            for (i = 0; i < len; i++) {
                column = columns[i];
                el = summaryEl.down(view.getCellSelector(column), true);
                var colWidth = column.getWidth(),
                    display = column.hidden ? "none" : 'table-cell';
                if (el) {
                    Ext.fly(el).setWidth(colWidth||column.width || (column.lastBox ? column.lastBox.width : 100));
                } else if (me.dock) {
                    //if docked summary and cell does not exists in docked summaryBar then create new cell for that column
                    var row = me.summaryBar.item.dom.rows[0];
                    if (row) {
                        row.insertCell(i);
                        var newCell = row.cells[i];
                        if (newCell) {
                            //apply cell class and columnId attributes for newly added cells.
                            var columnId = column.id;
                            newCell.setAttribute('class', 'x-grid-cell x-grid-td x-grid-cell-' + columnId + ' x-unselectable');
                            newCell.setAttribute('data-columnid', columnId);
                            el = summaryEl.down(view.getCellSelector(column), true);
                            if (el) {
                                //set the column width to cell.
                                Ext.fly(el).setWidth(colWidth || column.width || (column.lastBox ? column.lastBox.width : 100));
                            }
                        }
                    }
                }
                if (me.dock&&el) {
                    //show/hide summary cells based on column status.
                    el.style.display = display;
                }
            }
        }
    }
}

});

user9022644
  • 1