Question

在我的第一个ExtJs4项目中，我使用带有特征行体的可编辑网格，在每行下面显示一个大文本字段。我希望它可以在dblclick上编辑。我成功地通过用textarea替换rowbody的innerHTML来实现这一点，但是特殊键没有做他们应该做的事情（移动光标）。如果在正常字段中使用textarea我没有这个问题。 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';
}

Hi Molecule Man，作为上述方法的替代方案，我尝试了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

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

Extjs4：可编辑的rowbody

1 个答案: