Extjs 如何使单元格编辑单元格比实际列宽？

非常简单的场景：我想要一个小的网格来提供一个良好的概述。但是，当在单元格中单击时，编辑器的宽度应大于实际列的宽度

例如：

我尝试指定宽度，并尝试将其添加到afterrender中。宽度始终与列的宽度完全相同。文本区域也有同样的问题

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

我认为这应该很容易，但我找不到一个方法来实现这一点。我可以在文本区域上指定高度，但不考虑宽度。

检查下面的fiddle。 在这里，我更改了表格节点的宽度设置，其中单元格编辑器由

Ext.get（Ext.get（Ext.query（'div.x-grid-editor'）[0]）.dom.childNodes[0]）.setWidth（300）

呈现

此方法有一个限制-首次没有像beforeedit事件中那样设置宽度，我们没有获得编辑器实例。如果我们获得此实例，我们可以应用类似的逻辑来设置编辑器宽度。 请检查它是否能解决您的问题。如果有任何更改，请告诉我。

---

注：我有impl。这只适用于第一列。

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

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

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

---

嘿，你能不能准确地告诉我，在编辑器显示后，该列的外观如何。请发布一些图片。如果你在公司单元格中单击，我希望编辑器文本字段会更大。它将重叠右侧的价格列，以便我可以输入更多文本。现在，该公司的列宽度为：160。例如，我希望textfield editor单元格为240。我已经解决了这个问题，除了第一次，因为文本字段最初没有呈现。呈现之后，我在beforeedit事件中设置了它的宽度。如果您想要解决方案，我可以粘贴在这里。如果您有解决方案，请随意发布。如果能看到一种方法那就太好了。理论上这应该很容易，但框架似乎有一些限制，使得这些事情无缘无故地变得困难..谢谢你的建议-它帮助我弄清楚它将如何工作。我使用我的afterrender方法-我只是使用了错误的元素。。我必须得到确切的dom元素，而不是使用“field”。Ext.get（field.el.dom.childNodes[1]）.setWidth（500）-索引是1，因为0是标签..更简单的是：field.bodyEl.setWidth（500）；在后渲染器内。。哦，顺便说一句。这只适用于文本区域字段。当我找到简单文本字段的完整解决方案时，我会添加一个答案，但这应该不是什么大问题。我们的两个解决方案结合在一起会得到完整的结果。