Results 1 to 7 of 7

Thread: ExtJs RowEditing on a grid with a single row !

  1. #1
    Sencha Premium Member
    Join Date
    Feb 2015
    Posts
    39
    Answers
    1

    Default ExtJs RowEditing on a grid with a single row !

    hi,
    when activating the row editing plugin on a grid with a single record , the rowEditor doesn't display properly as below !
    We can not see the "update" and "cancel" buttons of the rowEditor !
    RowEditingGrid.PNG


    Is that a bug ? and what should i do to avoid this issue without fixing the grid's height ?

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

    Default

    Yes, you'll need to leave room for the buttons to render. Were you hoping to have them displayed above the grid row?

  3. #3

    Default

    You have to set minHeight on the gridpanel (there should be room for at least 2 rows), because the roweditor is rendered in gridpanel.

    It would be better if they would be visible even on smaller grids.

  4. #4
    Sencha Premium Member
    Join Date
    Feb 2015
    Posts
    39
    Answers
    1

    Default

    Hi,

    With ExtJs 3.4 i have found the following work around and it works well but unfortunately doesn't work with ExtJs 6,

    Code:
    Ext.override(Ext.grid.GridView, {
        getEditorParent: function () {
            return document.body;
        }
    });
    you can see this post https://www.sencha.com/forum/showthread.php?82728-Hidden-Buttons-in-last-row-of-RowEditor

    Do you have an idea what could substitute this solution ?

    Thnks

  5. #5
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    The roweditor has been improved since that post, in that an editor's buttons for the last row now appear above the data (where there is room) instead of below the data as with the other rows. If you only have one single row of data and your grid is auto sized, you aren't allowing room for the buttons to render. As onestep mentioned, the roweditor is rendered in the grid panel. Perhaps this has changed since 3.x. I'm guessing you would prefer that the buttons show on top of the column header, but I think that would be fairly difficult to achieve.

  6. #6
    Sencha User
    Join Date
    Mar 2011
    Posts
    1

    Default Temporary work around

    Setting the minHeight on the grid panel did NOT work because this would be the first and last row in the grid and the buttons are still rendered above the row being edited. In normal cases and previous versions only the last record in the grid would display the buttons above the row being edited all others are below.

    After playing around trying to get the minHeight to work I found that if you override the the z-index in the .x-grid-row-editor-wrap css class and set the z-index to:
    z-index: 99 !important;

    it will display the buttons, not completely but enough so that you can read them, they will float over the columns headers but not not the grid panel title bar (if used).

    This is still NOT the desired effect, the buttons should appear below all of the rows unless editing the last record in the grid

    <EDIT>

    After digging around in the source code it appears they are using the scroll height to determine whether to place the buttons above or below the row. This would explain the why it was recommended to set the minHeight, but I went back and tried my code in IE and the button displayed below the first row, Chrome (Version 51.0.2704.63 m) , however tries to display the buttons above the row.

    <Edit 2>
    This affect happens in Chrome using Ext 5.1.1 and 6.0.1 but works as expected in 6.0.0

  7. #7
    Ext JS Premium Member
    Join Date
    Jun 2010
    Posts
    26

    Default

    This worked for me.

    Code:
    .x-grid-row-editor-wrap {
        z-index: 99 !important;
    }
    .x-grid-row-editor-buttons-top {
        clip: auto !important;
    }

Similar Threads

  1. Extjs 4.0.7 Grid RowEditing not working on IE
    By sharavanan in forum Ext: Discussion
    Replies: 1
    Last Post: 7 Jan 2014, 7:37 AM
  2. Replies: 1
    Last Post: 25 Aug 2012, 3:07 PM

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
  •