RowExpander行体内TextAreaField无法编辑问题求助

问题原因 #

你当前的实现只是生成了TextArea的HTML结构，但没有完成Ext组件的完整渲染初始化流程——组件没有被Ext框架实例化并绑定交互事件，因此无法进行编辑操作。

修复方案 #

利用expandbody事件，在行展开时动态创建并渲染TextArea组件，确保组件被正确初始化并挂载到DOM中：

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create('Ext.data.Store', {
            storeId: 'simpsonsStore',
            fields: ['name', 'email', 'phone', 'remark'], // 新增字段存储输入内容
            data: {
                'items': [{
                    'name': 'Lisa Simpson',
                    "email": "lisa@simpsons.com",
                    "phone": "555-111-1224"
                }, {
                    'name': 'Bart Simpson',
                    "email": "bart@simpsons.com",
                    "phone": "555-222-1234"
                }, {
                    'name': 'Homer Simpson',
                    "email": "homer@simpsons.com",
                    "phone": "555-222-1244"
                }, {
                    'name': 'Marge Simpson',
                    "email": "marge@simpsons.com",
                    "phone": "555-222-1254"
                }]
            },
            proxy: {
                type: 'memory',
                reader: {
                    type: 'json',
                    rootProperty: 'items'
                }
            }
        });

        Ext.create('Ext.grid.Panel', {
            title: 'Simpsons',
            store: Ext.data.StoreManager.lookup('simpsonsStore'),
            viewConfig: {
                listeners: {
                    expandbody: function (rowNode, record, expandRow) {
                        // 避免重复创建组件
                        if (!expandRow.querySelector('.remark-textarea')) {
                            Ext.create('Ext.form.field.TextArea', {
                                fieldLabel: 'Remark',
                                width: '100%',
                                minHeight: 75,
                                grow: true,
                                cls: 'remark-textarea',
                                value: record.get('remark') || '',
                                renderTo: expandRow,
                                listeners: {
                                    change: function (field, newValue) {
                                        // 同步输入内容到数据记录
                                        record.set('remark', newValue);
                                    }
                                }
                            });
                        }
                    },
                    collapsebody: function (rowNode, record, expandRow) {
                        // 行折叠时销毁组件，防止内存泄漏
                        var textAreaCmp = Ext.ComponentQuery.query('.remark-textarea')[0];
                        if (textAreaCmp) textAreaCmp.destroy();
                    }
                }
            },
            columns: [{
                text: 'Name',
                dataIndex: 'name',
                flex: 1
            }],
            plugins: [{
                ptype: 'rowexpander',
                rowBodyTpl: '<div class="remark-wrap"></div>' // 预留渲染容器
            }],
            height: 600,
            width: 400,
            renderTo: Ext.getBody()
        });
    }
});

关键改动说明 #

• 给Store新增remark字段，实现输入内容与数据记录的双向绑定。
• rowBodyTpl仅预留空容器，不再直接生成静态HTML标记。
• 在expandbody事件中动态创建并渲染组件，确保Ext完成组件初始化与事件绑定。
• 新增collapsebody事件处理，销毁组件避免内存泄漏和重复创建。

内容的提问来源于stack exchange，提问作者Arno Voerman