How to make cellediting cells wider than the actual column?

Question

Very simple scenario: I want to have a small grid for a good overview. But when clicking in a cell the editor should have a higher width than the actual column.

Example: https://fiddle.sencha.com/#fiddle/reg&view/editor

I tried to specify the width and I tried to add it in the afterrender. Width is always exactly as wide as the column. Same problem with textareas.

editor: {
    xtype: 'textfield',
    enableKeyEvents: true,
    selectOnFocus: true,
    width: 500,
    listeners: {
        afterrender: function (field) {
            field.setWidth(500);
        }
    }
}

I thought this should be easy but I couldn't find a way to accomplish that. I can specify the height on a textarea but the width isn't considered.

Answer 1

Check below fiddle. https://fiddle.sencha.com/#fiddle/27bv&view/editor Here I have done change for setting width of table node in which cell editor is rendered by Ext.get(Ext.get(Ext.query('div.x-grid-editor')[0]).dom.childNodes[0]).setWidth(300) .

This approach is having one limitation - for first time width is not getting set as in beforeedit event we do not get instance of editor.If we get this instance we can apply similar logic for setting editor's width. please check if it could solve your issue or not.Also let me know for any changes. Note: I have impl. this thing for first column only.

Answer 2

Okay, I figured out a solution which is pretty close to mine.

afterrender: function (field) {
  field.bodyEl.setWidth(500);
}

This works for textareas and textfields with Ext version 5. I found out that in my fiddle I also used the wrong Ext version. Seems not to work with Ext 4.

https://fiddle.sencha.com/#fiddle/27cc&view/editor