Results 1 to 5 of 5

Thread: Grid Editor - Show Editor without clipping?

  1. #1
    Ext JS Premium Member
    Join Date
    Feb 2008
    Posts
    53

    Default Grid Editor - Show Editor without clipping?

    I have a sticky problem - I hope someone will have some insight.

    I have an EditorGrid with a single editable column. The Editor is a custom field, the height if the editor is greater than the height of the row.

    The Grid is rendered in a page with autoHeight: true, so that the full contents of the grid are visible in the page - the height of the Grid expands as needed.

    Now, when editing a cell, and the height of the grid view is less than the height of the editor field, the editor field is clipped to the view (overflow: hidden). Clipping also occurs if the row is near the bottom of the grid. I would like the editor field to display beyond the height of the Grid's view.

    The Ext.Editor class uses a layer which sets is overflow to hidden, but I haven't been able to find a way to get this to display beyond the Grid's view.

    Screen shots of the control and the control being clipped are shown.

    Any thoughts?
    Attached Images Attached Images
    Last edited by richgoldmd; 2 Mar 2010 at 5:28 AM. Reason: Changed title - more descriptive

  2. #2
    Ext JS Premium Member
    Join Date
    Feb 2008
    Posts
    53

    Default

    This helped a little:

    Code:
                editor: new Ext.grid.GridEditor(new MyCustomField({
                            grow: true
                    }), {    
                        listeners: {
                            scope: this,
                            render: function(e) {
                                e.el.setStyle("overflow", "visible");  
                                e.el.setStyle("position", "static");   
                            }
                        }
                    })
    But this causes the overall height of the Grid to increase to accomodate the editor. Since the additional space does not go away when the editor is removed, this is a less than ideal solution. Preferably, the editor would overlap the border of the Grid.
    Attached Images Attached Images

  3. #3
    Sencha User
    Join Date
    Sep 2009
    Posts
    34

    Default

    I have exactly this issue. In the end did you find a way to float the editor over the grid?

  4. #4
    Sencha User
    Join Date
    Sep 2009
    Posts
    34

    Default

    Ok, I believe I have a better solution (it's working for me).

    The key thing is to render the editor outside the grid component.

    1. Set renderTo: Ext.getBody() in the editor config. This causes the editor to be immediately rendered off-screen, in an Ext.Layer.
    2. Set updateEl: true in the editor config. Without this, the editor doesn't update the grid cell when edit completes.
    3. Add a class or style to the editor that sets overflow: visible !important. This makes the portions of the editor that would otherwise be clipped, visible.

  5. #5
    Sencha User
    Join Date
    Sep 2009
    Posts
    34

    Default

    If you do render your editor to Ext.getBody(), see also:

    http://www.extjs.com/forum/showthread.php?98162

Posting Permissions

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