editable rowbody

[daddie888]

Hi, in my first ExtJs4 project i use a editable grid with the feature rowbody to have a big textfield displayed under each row.
I want it to be editable on a dblclick. I succeeded in doing so by replacing the innerHTML of the rowbody by a textarea but the special keys don't do what they are supposed to do (move the cursor). If a use the textarea in a normal field i don't have this probem. Same problem in IE7 and FF4
2779427795
above the normal and edited view,
under, the relevant code


gridInfo = Ext.create('Ext.ux.LiveSearchGridPanel', {
id: 'gridInfo',
height: '100%',
width: '100%',
store: storeInfo,
columnLines: true,
selType: 'cellmodel',
columns: [
{text: "Titel", flex: 1, dataIndex: 'titel', field:{xtype:'textfield'}},
{text: "Tags", id: "tags", flex: 1, dataIndex: 'tags', field:{xtype:'textfield'}},
{text: "Hits", dataIndex: 'hits'},
{text: "Last Updated", renderer: Ext.util.Format.dateRenderer('d/m/Y'), dataIndex: 'lastChange'}
],
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
features: [
{
ftype: 'rowbody',
getAdditionalData: function(data, idx, record, orig) {
var headerCt = this.view.headerCt,
colspan = headerCt.getColumnCount();
return {
rowBody: data.desc, //the big textfieldvalue, can't use a textarea here 8<
rowBodyCls: this.rowBodyCls,
rowBodyColspan: colspan
};
}
},
{ftype: 'rowwrap'}
]
});



me.on('rowbodydblclick', function(gridView, el, event, o) {
...
rb = td.down('.x-grid-rowbody').dom;
var value = rb.innerText?rb.innerText:rb.textContent;
rb.innerHTML = '';
Ext.create('Ext.form.field.TextArea', {
id: 'textarea1',
value : value,
renderTo: rb,
border: false,
enterIsSpecial: true,
enableKeyEvents: true,
disableKeyFilter: true,
listeners: {
'blur': function(el, o) {
rb.innerHTML = el.value;
},
'specialkey': function(field, e){
console.log(e.keyCode); //captured but nothing happens
}
}
}).show();



Is there a better way or how can i enable the specialkeys ?
Any help apreciated.
Peter

[skirtle]

Certain keys, like the arrow keys or spacebar, cause the browser to scroll its scrollbars. An Ext grid wants to use these same keys to navigate itself but it needs to stop the browser responding to them too. It does this by calling preventDefault() on the event.

As DOM events propagate up the DOM hierarchy, the events fired by the textarea will also be intercepted by the grid and their default behaviour prevented too. In the case of a textarea this doesn't stop scrolling but instead stops editing.

The way to avoid this is to stop the event propagating up to the element that prevents the default behaviour. Doing this in a specialkey listener almost works but it doesn't catch spacebar. I found adding these listeners to the textarea worked for me:


// IE, Chrome ans Safari
keydown: function(field, ev){
ev.stopPropagation();
},
// FF and Opera
keypress: function(field, ev){
ev.stopPropagation();
}

[daddie888]

Thanks Skirtle, stopPropagation is indeed the way to go, i publish the entire function here for reference, the keyNav approach worked also but return wasn't catched. This function has no problems with space or other special keys.



function editDesc(me, gridView, el, event, o) {
var width = Ext.fly(el).up('table').getWidth();
var rb = event.target;
var value = rb.innerText?rb.innerText:rb.textContent;
rb.innerHTML = ''

var txt = Ext.create('Ext.form.field.TextArea', {
value : value,
renderTo: rb,
border: false,
width: width,
height: 300,
enterIsSpecial: true,
disableKeyFilter: true,
listeners: {
'blur': function(el, o) {
var value = el.value.replace('\n','<br>')
rb.innerHTML = value;
},
'specialkey': function(field, e){
e.stopPropagation();
}
}
});

var txtTextarea = Ext.fly(rb).down('textarea');
txtTextarea.dom.style.color = 'blue';
txtTextarea.dom.style.fontSize = '11px';
//var sm = gridInfo.getSelectionModel();
//sm.keyNav.setDisabled(true);
//sm.keyNav.map.enabled = false;
//sm.keyNav.forceKeyDown = true;
}