Page 1 of 2 12 LastLast
Results 1 to 10 of 12

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

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1

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

    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 ?

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985

    Default

    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.

  3. #3

    Default

    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 ?

  4. #4
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985

    Default

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

  5. #5
    Sencha User
    Join Date
    Apr 2013
    Posts
    10

    Default

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

  6. #6
    Sencha User
    Join Date
    Jan 2016
    Location
    Brazil
    Posts
    144

    Default

    Quote Originally Posted by Gary Schlosberg View Post
    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.

  7. #7
    Sencha Premium User
    Join Date
    Jun 2011
    Location
    Seattle, WA
    Posts
    33

    Default

    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
    Last edited by ithompson; 15 Jun 2017 at 12:55 PM. Reason: Better repro steps

  8. #8
    Sencha User
    Join Date
    Jan 2016
    Location
    Brazil
    Posts
    144

    Default

    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.

  9. #9
    Sencha Premium User
    Join Date
    Jun 2011
    Location
    Seattle, WA
    Posts
    33

    Default

    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.

  10. #10
    Sencha Premium User
    Join Date
    Jun 2011
    Location
    Seattle, WA
    Posts
    33

    Default

    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.

Page 1 of 2 12 LastLast

Similar Threads

  1. Column header align independent from column value align
    By ExDev in forum Sencha Ext JS Q&A
    Replies: 5
    Last Post: 3 Jun 2015, 11:57 PM
  2. How can I align the column header cell to center without...
    By andresdavidortiz in forum Ext: Discussion
    Replies: 1
    Last Post: 11 Jan 2013, 5:41 AM
  3. Replies: 3
    Last Post: 27 Sep 2012, 2:47 AM
  4. Grid header align different than column alignment?
    By billp in forum Sencha Ext JS Q&A
    Replies: 4
    Last Post: 21 Jun 2012, 6:08 AM
  5. grid column header align right question
    By euchiyama in forum Sencha Ext JS Q&A
    Replies: 1
    Last Post: 6 Jun 2008, 9:29 AM

Tags for this Thread

Posting Permissions

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