Question

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

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()
});
});

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

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

扩展textarea？
扩展RowEditing插件？
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/

ExtJS - rowEditing面板中的Textarea小部件

1 个答案: