如何在JavaScript/Sencha(ExtJs)中实现点击网格行填充文本域？

原代码存在的问题 #

• 变量引用错误：定义了grid_2却使用未定义的grid_1获取选中行
• 缺少事件绑定：没有为Grid添加行选中/点击事件，textFill函数从未被触发
• TextArea操作错误：ExtJS的TextArea组件没有getStore()方法，不能用loadData填充内容，应该直接使用setValue
• 未处理空选中情况：当没有选中行时，getSelection()[0]会导致报错
• 全局变量风险：textFill未用var/let/const声明，会成为全局变量

修复后的实现代码 #

// 确保在组件的初始化或合适的生命周期函数中执行
try {
    var XThis = this;
    // 获取Grid组件（修正变量名，统一使用grid_1）
    var grid_1 = XThis.down("#grd_1");
    // 获取TextArea组件
    var textArea_1 = XThis.down("#tb_3 #textarea_1");

    // 绑定Grid的selectionchange事件（选中行变化时触发）
    grid_1.on('selectionchange', function(grid, selectedRecords) {
        // 处理空选中情况
        if (selectedRecords.length === 0) {
            textArea_1.setValue('');
            return;
        }
        // 获取选中行的数据
        var selectedData = selectedRecords[0].data;
        // 将数据转为文本格式填充到TextArea（这里根据需求调整格式，比如JSON字符串或自定义拼接）
        var fillText = JSON.stringify(selectedData, null, 2); // 格式化JSON便于阅读
        // 或者自定义拼接字段：fillText = `名称：${selectedData.name}，ID：${selectedData.id}`;
        textArea_1.setValue(fillText);
    });

    // 可选：绑定itemclick事件（点击行时触发，和selectionchange二选一即可）
    // grid_1.on('itemclick', function(grid, record) {
    //     var selectedData = record.data;
    //     var fillText = JSON.stringify(selectedData, null, 2);
    //     textArea_1.setValue(fillText);
    // });

} catch (e) {
    console.error('初始化Grid事件失败:', e);
}

关键说明 #

• 事件选择：selectionchange在选中行变化时触发（包括取消选中），itemclick在点击行时触发，根据需求选择其一
• 文本格式：可以根据实际需求将行数据转为任意文本格式，比如拼接指定字段、JSON格式化等
• 错误处理：添加了空选中判断和控制台错误输出，便于调试

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