Summary row column width

[lufton]

ExtJS 4.2.0-4.2.1:
I have a GridPanel with summary feature enabled. All columns defined like so:

xtype: 'gridcolumn', //or some other type
dataIndex: 'blah', //some dataIndex
text: 'Blah-blah-blah', //some header text
flex: 1, //some other values also, but every column has its flex option
summaryType: 'sum' //or count, some columns has no summary feature enabled

The GridView displays data as expected, but summary row expands some columns and all following columns are shifted right. Here is an example (I colored all td tags of summary row tr tag, so you can easily see the bug. All columns are not hidden. Chrome 27):
bug.jpg

Here is a demo jsfiddle (in editor it looks good, but in full screen you could see bugs with column size).

[slemmon]

Thanks for the bug report! Looks like this has been reported and is being worked on.

[Daniil]

The issue seems to be reproducible only if a Summary's dock config option is used.

With 4.2.1.744 the issue is not reproducible, but reproducible with 4.2.1.883.

Comparing its sources I discovered that this CSS rule (appeared in 883 since 744) causes the problem.

.x-docked-summary .x-grid-table {
    width: 100%;
}

So, adding this CSS rule to the page appears to fix the problem.

.x-docked-summary .x-grid-table {
    width: auto;
}

It doesn't pretend to be a permanent fix, but looks to be a suitable workaround for now until it is fixed in ExtJS.

Hope this helps someone.

[slemmon]

Thanks for volunteering a workaround to the community!

[worthlutz]

Thanks for volunteering a workaround to the community!

This workaround does not appear to work for me. Has this been fixed? Does anyone else have a workaround?

Worth

[worthlutz]

This workaround does not appear to work for me. Has this been fixed? Does anyone else have a workaround?

Worth

My mistake! Architect overwrote my changes to index.html during my test. I've got to figure out how that works.....

Sorry for the noise...

Worth

[ryan0322]

Try removing the width config on the columns that you are also setting the flex config for, or remove the flex config and leave the width.

It looks like the summary row does not flex with the column when a width is defined, but instead uses the defined width.

I removed all of the width configs in your fiddle and it looks to have fixed the issue. However, if you resize the columns it does appear that the summary's row's column widths don't resized with the column exactly and you start to get the same issue you had originally - although not as drastic.

I also tried removing all of the flex configs and just leaving the widths defined. This seems to fix all the problems - the summary lines up with the rest of the data, and there are no issues with resizing the columns. The obvious issue being that you now lost your flexing columns.

[dnoizet]

Unfortunately, this 5 years old bug is still around in 2018 using the latest ExtJS (6.5.2). Sencha Architect and Sencha Cmd should emit warnings when both the width and flex are set in a column properties, because that is the source of that annoying bug.