Extjs4:可编辑的行体

Question

在我的第一个ExtJs4项目中，我使用带有rowbody功能的可编辑网格，在每行下显示一个大的文本字段。我想让它在点击时可编辑。我成功地做到了这一点，用一个文本区域替换行体的innerHTML，但特殊的键不做他们应该做的事情(移动光标)。如果我在普通字段中使用文本区，我就不会有这个问题。同样的问题在IE7和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();
    //...
});

该死，不能发表我自己的解决方案，看起来别人必须回答，无论如何，这是工作的函数

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

嗨，Molecule Man，作为上述方法的替代方法，我尝试了Ext.Editor。它的工作原理，但我希望它内联，但当我渲染它到行体，字段空白，我没有编辑器，有什么想法吗?

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

这只是设置回答的问题，参见上面的解决方案