Results 1 to 10 of 10

Thread: Hidden Buttons in last row of RowEditor

  1. #1
    Sencha Premium Member
    Join Date
    Nov 2007
    Posts
    22

    Default Hidden Buttons in last row of RowEditor

    Hello,

    I am using the RowEditor from the ExtJS 3.0 and noticed a small problem. If the user edits the last row in the grid, the Update and Cancel buttons render in the non-viewable part of the grid. While the user can scroll down to see the buttons, new users may not know this and may have trouble figuring out how to save their changes.

    The problem can be reproduce with the RowEditor example here:
    https://www.extjs.com/deploy/dev/exa...ow-editor.html

    Also, I have attached a screenshot that shows what I am talking about.

    Ideally I would like to be able to scroll the grid up a little when the user edits the last row. However I am not sure how to accomplish this reliably.

    Any ideas on how to solve this problem are great appreciated.

    Thanks.
    Attached Images Attached Images

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364

    Default

    I use the mouse wheel to finish the scrolling. I'm guessing you want this to happen automatically?

  3. #3
    Sencha Premium User
    Join Date
    Sep 2008
    Location
    Huntsville, AL
    Posts
    38

    Default

    I think it should happen automatically. My users almost panicked when they encountered this. They didn't know what to do.

  4. #4
    Ext JS Premium Member
    Join Date
    Apr 2007
    Posts
    24

    Default

    If the grid is configured with "autoHeight: true" (i.e. there are no scroll bars) then, when editing the last row in the grid, the row editor is partially obscured and cannot be made visible by scrolling (see first screen shot). The correct behavior would be either:

    1. The grid panel automatically resizes to make room for the row editor. I tried calling syncSize() on the grid panel when the row editor was rendered. But I couldn't get it to work. I assume this is because the row editor is rendered with "position: absolute"

    2. The row editor overflows out of the grid panel. I added the following CSS to the page with the grid panel / row editor
    Code:
    /* allow row editor & buttons to overflow out of the bottom of the grid panel */
    .x-panel-bwrap {
        overflow: visible;
    }
    .x-grid-panel .x-panel-body {
        overflow: visible !important;
    }
    .x-grid3 {
        overflow: visible;
    }
    .x-grid3-viewport {
        overflow: visible;
    }
    
    /* to prevent column header from overflowing grid panel to the right */
    .x-grid3-header-offset { 
        width:auto !important;
    }
    
    /* fix for z-index quirk in IE */
    .x-grid-panel .x-panel-mc .x-panel-body {
        z-index: 1;
    }
    This produced the desired behavior (see second screen shot). But there are some limitations: The columns have to be sized correctly as they can now overflow out of the right side of the grid. The CSS changes apply to all grids/panels on the page and may have some undesired side-effects (in my page I have no problems)
    Attached Images Attached Images

  5. #5
    Ext JS Premium Member
    Join Date
    Apr 2007
    Posts
    24

    Default

    To address cheema's original problem, add the following code to the end of startEditing() in RowEditor.js (This can be done by editing RowEditor.js directly or overriding the RowEditor class with Ext.override)

    Code:
    // scroll row editor buttons into view if they are not already visible
    var scroller = this.grid.getGridEl().child('.x-grid3-scroller');
    var buttons = this.btns.getEl();
    buttons.scrollIntoView.defer(200, buttons, [scroller]);
    The grid scroller will now automatically scroll the RowEditor back into view if the RowEditor extends beyond the bottom of the grid view. The defer() is needed because the RowEditor is animated and slides down into place.

  6. #6
    Ext JS Premium Member
    Join Date
    Apr 2007
    Posts
    24

    Default

    I found a very simple solution that allows the row editor to overflow out of the bottom of the grid view with none of the side effects my CSS solution had. (See pictures in earlier post to see how it will look.) This works whether or not the grid has a scrollbar so it seems to be the best all-around solution. Thanks to Condor for the idea.

    Code:
    // --- Override grid so that editors are rendered into document body instead of grid scroller
    // --- This allows the textarea editors and row editors to expand outside of the bottom of the
    // --- grid if needed
    Ext.override(Ext.grid.GridView, {
        getEditorParent: function() {
            return document.body;
        }
    });

  7. #7
    Sencha User
    Join Date
    Sep 2007
    Posts
    14

    Wink UI Suggestion

    A better approach would be if the Update/Cancel button could be displayed on the top of the row when it is not possible to fit it at the bottom.
    Similar behavior to combobox dropdown.

  8. #8
    Ext JS Premium Member
    Join Date
    Nov 2008
    Posts
    134

    Default

    Quote Originally Posted by wck555 View Post
    I found a very simple solution that allows the row editor to overflow out of the bottom of the grid view with none of the side effects my CSS solution had. (See pictures in earlier post to see how it will look.) This works whether or not the grid has a scrollbar so it seems to be the best all-around solution. Thanks to Condor for the idea.

    Code:
    // --- Override grid so that editors are rendered into document body instead of grid scroller
    // --- This allows the textarea editors and row editors to expand outside of the bottom of the
    // --- grid if needed
    Ext.override(Ext.grid.GridView, {
        getEditorParent: function() {
            return document.body;
        }
    });
    Good soln.. Except that it expands outside of the vertical scrollbar as well (expands sideways) and not just bottom of the grid. Is there a way to control this.

  9. #9
    Sencha User
    Join Date
    Jan 2011
    Location
    Scottsdale, AZ
    Posts
    2

    Default

    Quote Originally Posted by wck555 View Post
    To address cheema's original problem, add the following code to the end of startEditing() in RowEditor.js (This can be done by editing RowEditor.js directly or overriding the RowEditor class with Ext.override)

    Code:
    // scroll row editor buttons into view if they are not already visible
    var scroller = this.grid.getGridEl().child('.x-grid3-scroller');
    var buttons = this.btns.getEl();
    buttons.scrollIntoView.defer(200, buttons, [scroller]);
    The grid scroller will now automatically scroll the RowEditor back into view if the RowEditor extends beyond the bottom of the grid view. The defer() is needed because the RowEditor is animated and slides down into place.
    I know this is old, but I'm having the same problem, and the above solution doesn't seem to work for me...any other thoughts?

  10. #10
    Sencha User
    Join Date
    Jan 2011
    Location
    Scottsdale, AZ
    Posts
    2

    Default

    Aha! Not sure why this was the case, but calling this.grid.getView().scrollToTop() before scrolling the buttons into view solved my problem:

    Code:
    /* at end of startEditing() */
    this.doFocusButtons.defer(100, this);
    
    doFocusButtons: function() {
      var gv = this.grid.getView();
      var scroller = gv.scroller;
      var buttons = this.btns.el;
      gv.scrollToTop();
      buttons.scrollIntoView(scroller);
    }

Posting Permissions

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