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

Question

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

此处演示 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/