Grid EnableLocking and CellEditing : bug -> columns are not align with their header

[VyTre]

Hello,

Ext version : 6.2.1

I've a grid panel with enableLocking: true and with cellEditing.
When I click on a cell to enter in editing mode, columns data are automatically scrolled on the right side of the window.
And after few editing, columns are no more aligned with their own header.

Here a simple example :
https://fiddle.sencha.com/#view/editor&fiddle/1u8r

* You scroll to show 'column 14'
* But when you start editing of a cell of 'column 10',
* Bug 1 : this column is automatically scrolled to the right of screen
* Bug 2 : columns are no more align with their own header (see following screenshot). If a use scrollbar to move gridpanel, headers and columns are aligned again.

Capture.PNG

If I remove locking columns (enableLocking: false), these problems disappear.

Is there a workaround to have in the same time a grid with locking columns and editing cell without theses 2 alignments bugs ?

[Gary Schlosberg]

Thanks for the report. I see the behavior, but it looks like it's been fixed. I'm not able to recreate using nightlies of 6.2.2 or 6.5.0.

[VyTre]

Hello Gary,

Thank you for your response.
Could you let me known when version 6.2.2 (or 6.5) of ExtJs framework will be available ?

[Gary Schlosberg]

6.5 is the next release due. It's been delayed a bit but I expect it in the coming weeks.

[awooden]

Ext.override(Ext.scroll.Scroller, {
    scrollIntoView: function(el, hscroll, animate, highlight) {
        var me = this,
            position = me.getPosition(),
            newPosition;
        if (el) {
            newPosition = me.getScrollIntoViewXY(el, hscroll);
            if (newPosition.y !== position.y || newPosition.x !== position.x) {
                if (highlight) {
                    me.on({
                        scrollend: 'doHighlight',
                        scope: me,
                        single: true,
                        args: [
                            el,
                            highlight
                        ]
                    });
                }
                // Disabled this, but not sure what effect this is going to have.
                // This prevents the grid from scrolling the cell you are editing to the far right of the screen
                // me.doScrollTo(newPosition.x, newPosition.y, animate); me.doScrollTo(newPosition.x, newPosition.y, animate);
            }
            else if (highlight) {
                me.doHighlight(el, highlight);
            }
        }
    }
});

This fixed the same problem for me

[fabricio.object]

6.5 is the next release due. It's been delayed a bit but I expect it in the coming weeks.

Hello! The issue can no longer be reproduced in ExtJS 6.5.0 on the same fiddle pointed by the user... So it is pretty much fixed (should, maybe update this thread's status and title?)

The issue basically happened because the 'doEnsureVisible' method didn't get an agreement between a normal selection (by point-clicking) or cell-editing. Cell editing event provided the column it wanted to focus, but doEnsureVisible ignored it, doing just an view.getNode(record), instead of something similar to view.getCell(record, options.column).dom. Thus it was trying to bring to view the whole row, so it moved the view first.

In the case where it moved the view back to top when vertical scrolling exists (the fiddle above can reproduce this in 6.2.1 by giving the panel a fixed height), it was selecting as the "dom" to put into view the whole grid unlocked view. So it moved back to top.

I believe 6.5.0 fixed this by accident.
Now doEnsureVisible() specified to scrollIntoView() that when fiddling with the vertical scroller (the outer grid scroller if locking is enabled), do not scroll horizontally, and then calls again scroll to the specific (normal/locked) view scroller for the horizontal scrolling which now correctly syncs up as the cell DOM is passed to the call (if it exists).

Anyway, it works now, fine.

[ithompson]

Almost there! The above override helped a lot with this issue for me in v6.2.1, but it doesn't seem to cover all the cases.

Focus any cell, then Focus any other cell - no issues!
Edit any cell, then Focus only partially visible cells - headers are misaligned!

With 2 clicks to edit:
* Scroll the unlocked-half (right side) of the grid so that cells are only partially visible on the left or right
* Double-click to Edit any FULLY visible cell
* Single-click to Focus any PARTIALLY visible cell
* Headers no longer align!

With 1 click to edit:
* Same steps apply, but you only need to Single-click

[fabricio.object]

Maybe you should provide the fiddle where the steps you described above could be reproduced. On the fiddle provided in this thread I don't think the locked view is scrollable at all (it fits the locked columns' width so that they are all visible). The steps above do not reproduce misalignment issues in the non-locked view of the fiddle provided on the first post.

[ithompson]

A) I mistyped above, I meant the unlocked (right-hand) side.
B) I mistyped in my Fiddle and wasn't actually applying the override - DOH! I'm not able to reproduce the issue I see in my code in that Fiddle w/ the override correctly applied.

There must be another intersecting bug I'm hitting. Maybe the grouper... I'll keep digging.

[ithompson]

Found it! The above override doesn't play nicely with another override that replaces the Ext.grid.locking.View's relayFn() method that fixes a bug in 6.2.1 (which was resolved in 6.2.2) where locked widgetcolumns disappear when you sort the grid.