如何使cellediting细胞比实际的柱宽？

Question

非常简单的场景：我希望有一个小网格以获得良好的概述。但是当单击一个单元格时，编辑器应该具有比实际列更高的宽度。

实施例：

我试图指定宽度，我试图在Afterrender中添加它。宽度始终与列完全一样宽。与textareas相同的问题。

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

我认为这应该很容易，但我无法找到实现这一目标的方法。我可以在textarea上指定高度，但不考虑宽度。

Answer 1

检查以下小提琴。 https://fiddle.sencha.com/#fiddle/27bv&view/editor 在这里，我已经完成了设置表节点宽度的更改，其中单元格编辑器由Ext.get(Ext.get(Ext.query('div.x-grid-editor')[0]).dom.childNodes[0]).setWidth(300)呈现。

这种方法有一个限制 - 第一次宽度未设置，因为在beforeedit事件中我们没有得到编辑器的实例。如果我们得到这个实例，我们可以应用类似的逻辑来设置编辑器＆ ＃39;的宽度。 请检查它是否可以解决您的问题。如有任何变更，请告知我们。 注意：我有impl。这只是第一列的事情。

Answer 2

好的，我找到了一个非常接近我的解决方案。

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

这适用于带有Ext版本5的textareas和textfields。我发现在我的小提琴中我也使用了错误的Ext版本。似乎不适用于Ext 4。

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