Search code examples
javascriptdatagridprogress-barcustomizationextjs6-classic

ExtJS 6.0.2: How do I force a custom progress bar grid column to update on sorting


In the code that I'm working in, there is a grid that has one column that represents the data from two of the store's fields using a customized progressBar. The progress is calculated from those two other fields and shown as text on the progress bar in a format like 'x / y'.

My problem is, when the grid is resorted, and the values of the x and y values are equal (i.e., the progress is 100%) for some or all of the rows, the progress column doesn't get updated properly; the progress bars that are at 100% don't move with their respective rows, and/or progress bars appear to be duplicated or go missing after the sort. Note that this would also happen where the progress is 0 for one or more rows or any other scenarios where the progress of 2 or more rows is the same, but the values used to calculate the progress for the respective rows are different.

Here is a fiddle that illustrates the problem: https://fiddle.sencha.com/#view/editor&fiddle/35c5

Is there some way that I can force the entire progress column to rerender whenever the grid is sorted, and not just the ones where the calculated progress value has changed, so that all of the progress bars always appear correct?


Solution

  • I managed to solve this issue by subtracting a small random amount (in the range 0, exclusive, to 10e-8, inclusive) from each of the calculated values (or adding it where the value is 0). (Where the value is set to 0 due to both contributing values being 0, no random value is added, as it is unnecessary in that case.) This ensures that every value in the grid will be different and will, therefore, follow its respective row when the order of the rows changes due to sorting or updating.