Question

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 problem. 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);
}

Answer 1

This is just to set the question answered, see solution above