ExtJS - Textarea widget within rowEditing panel - extjs

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