隐藏Widget Column时Grid无法添加行的问题求助

问题描述 #

Panel容器内的Grid包含两个WidgetColumn，正常状态下点击“添加新行”按钮可正常新增行；但隐藏其中一个WidgetColumn后，点击按钮无视觉反馈——调试发现Store已成功新增数据，但Grid视图未同步刷新。将容器替换为TabPanel时功能完全正常。

解决方案 #

可以在添加行的逻辑中，手动触发Grid视图的刷新操作，强制视图同步Store数据：

// 示例添加按钮点击事件逻辑
addRowBtn.on('click', function() {
    var store = grid.getStore();
    store.add({/* 填入新增行的对应数据 */});
    // 新增行后手动触发视图刷新
    grid.getView().refresh();
});

也可以通过监听Store的add事件统一处理，避免重复编写刷新代码：

grid.getStore().on('add', function() {
    grid.getView().refresh();
});

原因分析 #

Panel与TabPanel的布局更新机制存在差异：TabPanel在内容变更时会自动触发子组件的视图重绘，而Panel在WidgetColumn隐藏后，Grid的视图未收到强制刷新的触发信号，导致Store数据更新后视图未同步。手动调用refresh()可以强制Grid视图重新渲染所有行，从而显示新增的数据。

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