ExtJS - Textarea widget within rowEditing panel

Question

The ExtJS RowEditing plugin does not seem to handle textarea inputs unless they are squashed to the height of the row, which renders them unusable.

Demo here http://jsfiddle.net/8SA34/

Ext.onReady(function () {
Ext.create('Ext.data.Store', {
    storeId: 'simpsonsStore',
    fields: ['name', 'email', 'phone'],
    data: [{
        "name": "Lisa",
            "email": "[email protected]",
            "phone": "555-111-1224"
    }, {
        "name": "Bart",
            "email": "[email protected]",
            "phone": "555-222-1234"
    }, {
        "name": "Homer",
            "email": "[email protected]",
            "phone": "555-222-1244"
    }, {
        "name": "Marge",
            "email": "[email protected]",
            "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()
});
});

Is there a config fix for this, or an existing plugin?

Failing that, what's the best approach to create a textarea that spills out of the row on focus?

• Extend textarea?
• Extend RowEditing plugin?
• CSS?

Answer 1

You can do that simply with 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;
}

Now you can paste text in the field which has more than a single row, but if you want wrap by enter, then you have to overwrite the onEnterKey method.

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