ExtJS - 行编辑面板中的 Textarea 小部件

Question

ExtJS RowEditing plugin 似乎不处理 textarea 输入，除非它们被压缩到行的高度，这使得它们无法使用。

在这里演示http://jsfiddle.net/8SA34/

Ext.onReady(function () {
Ext.create('Ext.data.Store', {
    storeId: 'simpsonsStore',
    fields: ['name', 'email', 'phone'],
    data: [{
        "name": "Lisa",
            "email": "lisa@simpsons.com",
            "phone": "555-111-1224"
    }, {
        "name": "Bart",
            "email": "bart@simpsons.com",
            "phone": "555-222-1234"
    }, {
        "name": "Homer",
            "email": "home@simpsons.com",
            "phone": "555-222-1244"
    }, {
        "name": "Marge",
            "email": "marge@simpsons.com",
            "phone": "555-222-1254"
    }]
});

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [{
        header: 'Name',
        dataIndex: 'name',
        editor: {
         xtype: 'textarea',
         allowBlank: false,
         height:100
        }
    }, {
        header: 'Email',
        dataIndex: 'email',
        flex: 1,
        editor: {
            xtype: 'textarea',
            allowBlank: false
        }
    }, {
        header: 'Phone',
        dataIndex: 'phone'
    }],
    selType: 'rowmodel',
    plugins: [
    Ext.create('Ext.grid.plugin.RowEditing', {
        clicksToEdit: 1
    })],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});
});

是否有对此的配置修复或现有插件？

如果做不到这一点，那么创建一个在焦点上溢出的文本区域的最佳方法是什么？

• 扩展文本区域？
• 扩展行编辑插件？
• CSS?

Answer 1

您可以使用 CSS 简单地做到这一点：

.x-grid-row-editor .x-panel-body{
    height: 68px !important;
}

.x-grid-editor .x-form-text,
.x-panel-body .x-box-inner{
    height: 60px !important;
}

.x-grid-row-editor-buttons-default-bottom{
    top: 69px !important;
}

.x-grid-row-editor-buttons-default-top{
    bottom: 69px !important;
}

现在您可以在多行的字段中粘贴文本，但如果您想通过回车换行，则必须覆盖onEnterKey 方法。

http://jsfiddle.net/8SA34/9/