如何使用Ext修改GridPanel的数据与字体颜色及CSS属性等

在前端开发工作中，表格数据的动态操作是常见需求。当需要实时修改 Ext GridPanel 表格内的数据、样式或字体颜色时，该组件提供了一套灵活的实现方案。本文梳理了这些实用技巧，便于开发者快速查阅与参考。

整个修改流程可分解为几个清晰步骤。第一步通常是获取目标行对象，这是后续所有更改的基础。

获取选中行，只需调用 GridPanel 的 SelectionModel 的 getSelected 方法即可：

复制代码 代码如下:

var selectedRow = grid.getSelectionModel().getSelected();

获得行引用后，修改具体字段的数据变得非常简单。直接调用 set 方法，传入字段名和新值即可：

复制代码 代码如下:

selectedRow.set("key","value");

若需求更高级，例如让某行或某单元格的文字变为红色，或修改其背景色，该如何实现？这需要操作 DOM 元素。

修改样式前，需获取该行对应的视图对象。先通过 store 的 indexOf 方法获取选中行的索引（行号），再通过 GridPanel 的 view 对象的 getRow 方法获取对应的 DOM 元素：

复制代码 代码如下:

var selectedIdx = grid.store.indexOf(selectedRow); var selectedView = grid.getView().getRow(selectedIdx);

获得原生行 DOM 元素后，后续操作与常规 DOM 操作无异。修改其 CSS 属性，例如将字体颜色设为红色：

复制代码 代码如下:

selectedView.style.color="#FF0000";

由此可见，整个流程清晰连贯：从获取数据对象、更新数据值，到定位视图并修改样式。掌握这些核心方法后，在 GridPanel 中进行各种动态调整将得心应手。实际开发中，这些技巧在表单联动、状态标记或错误提示等场景中非常实用。