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

Question

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

示例： https ： //fiddle.sencha.com/#fiddle/reg&view/editor

我尝试指定宽度，然后尝试在后渲染中添加宽度。 宽度始终与列完全一样。 textareas的同样问题。

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

我以为这应该很容易，但是我找不到实现该目标的方法。 我可以在文本区域上指定高度，但不考虑宽度。

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事件那样被设置，所以我们没有得到编辑器的实例。如果得到这个实例，我们可以应用类似的逻辑来设置编辑器的宽度。 请检查它是否可以解决您的问题。如有任何更改，请随时告诉我。 注意：我暗示。 这个东西仅用于第一列。

Answer 2

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

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

这适用于Ext版本5的文本区域和文本字段。我发现在我的小提琴中我还使用了错误的Ext版本。 似乎不适用于Ext 4。

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