Extjs4：可编辑行体

Question

在我的第一个 ExtJs4 项目中，我使用带有 rowbody 功能的可编辑网格，在每行下方显示一个大文本字段。 我希望它可以在 dblclick 上编辑。我通过用文本区域替换 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();
    //...
});

该死，无法发布我自己的解决方案，看起来像其他人必须回答，无论如何，这是可以使用 Hi Molecule Man 的功能

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

，作为上面方法的替代方法，我尝试了 Ext.Editor。 它有效，但我希望它内联，但是当我将其渲染到 rowbody 时，该字段为空白，并且我没有编辑器，有什么想法吗？

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

这只是为了设置回答的问题，请参阅上面的解决方案