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

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

damn, can't publish my own solution, looks like somebody else has to answer, anyway, here is the function that works

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';

}

Hi Molecule Man, as an alternative to the approach above i tried the Ext.Editor. It works but i want it inline but when i render it to the rowbody, the field blanks and i have no editor, any ideas ?

  gridInfo = Ext.create('Ext.grid.Panel', {
    id: 'gridInfo',
    height: '100%',
    width: '100%',
    store: storeInfo,
    columnLines: true,
    selType: 'cellmodel',
    viewConfig: {stripeRows: false, trackOver: true},
    columns: [
      {text: "Titel", flex: 1, dataIndex: 'titel', field:{xtype:'textfield'}},
      ...
      {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,
            rowBodyCls: this.rowBodyCls,
            rowBodyColspan: colspan
          };
        }
      }
    ],
    listeners:{
      rowbodyclick: function(gridView, el, event) { //werkt
        editDesc(this, gridView, el, event);
      }
    }
  });

  function editDesc(me, gridView, el, event, o) {
    var rb = event.target;
    me.txt = new Ext.Editor({
      field: {xtype: 'textarea'},
      updateEl: true,
      cancelOnEsc: true,
      floating: true,
      renderTo: rb //when i do this, the field becomes empty and i don't get the editor
    });
    me.txt.startEdit(el);
  }