ExtJS GridPanel 动态生成列实现解析

"这篇内容主要讨论了如何在ExtJS中实现GridPanel的动态列生成，特别是在有固定列和根据选择的树节点动态变化其他列的情况下。通过Ajax请求从服务器获取动态列的信息，并根据这些信息更新ColumnModel的配置，从而达到动态调整GridPanel列的目的。" 在ExtJS中，GridPanel是一个常用的组件，用于展示二维数据表格。通常，GridPanel的列是在创建时静态定义的，但是有时候我们可能需要根据用户的操作或者不同的数据源动态改变列的数量和内容。本篇内容就是针对这种需求提供解决方案。 首先，GridPanel的列是通过`Ext.grid.ColumnModel`对象创建的，它接收一个JavaScript数组作为参数，这个数组包含了每一列的配置信息，如列头文字、数据绑定、宽度等。例如： ```javascript var cm = [ { header: "编号", mapping: "id", dataIndex: "id", width: 65, menuDisabled: true }, { header: "名称", mapping: "name", dataIndex: "name", width: 65, menuDisabled: true }, { header: "路径", mapping: "url", dataIndex: "url", width: 65, menuDisabled: true } ]; ``` 在上述代码中，我们定义了三列固定的列，包括"编号"、"名称"和"路径"，并且设置了相应的数据映射和禁用右键菜单。 然而，如果需要在固定的列后面动态添加列，我们可以监听树节点的点击事件（`onTreeNodeClick`），在事件处理函数中根据选择的树节点ID发送Ajax请求到服务器获取动态列的配置。例如： ```javascript Ext.Ajax.request({ url: "sample.cfc?method=getDynColumn", params: { node: n.id }, success: function(response, option) { // 解析服务器返回的动态列信息 var res = Ext.util.JSON.decode(response.responseText); var columns = res.columns; var fields = res.fields; var types = res.types; } }); ``` 服务器返回的数据可能包含动态列的配置、字段名和数据类型等信息。接收到这些信息后，我们需要将它们与固定列合并，更新`ColumnModel`的配置，并重新设置GridPanel的列。如果动态列涉及到数据编辑，可能还需要处理数据类型，例如`input`或`checkbox`。 动态生成ExtJS GridPanel的列涉及以下几个关键步骤： 1. 定义固定列的配置。 2. 监听触发动态列更新的事件（如树节点点击）。 3. 发送Ajax请求获取动态列的配置信息。 4. 解析服务器返回的数据，生成动态列的配置。 5. 将固定列与动态列合并，更新`ColumnModel`。 6. 重新设置GridPanel的列模型，使变化生效。 这样的实现方式允许我们根据用户交互或数据变化灵活地调整GridPanel的显示，提高了应用的可扩展性和用户体验。