如何使單元格編輯單元格比實際列寬？

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