PDA

View Full Version : Grid Editor - Show Editor without clipping?



richgoldmd
2 Mar 2010, 4:59 AM
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?

richgoldmd
2 Mar 2010, 6:28 AM
This helped a little:


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.

sacha
25 Apr 2010, 6:10 AM
I have exactly this issue. In the end did you find a way to float the editor over the grid?

sacha
26 Apr 2010, 4:46 AM
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.

sacha
30 Apr 2010, 1:28 AM
If you do render your editor to Ext.getBody(), see also:

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