Ext表格开发全解析：功能汇总与实例

Ext是一个强大的JavaScript库，专为构建富互联网应用程序（RIA）而设计，特别是在Web浏览器中。本文档是对Ext常用功能的全面总结，涵盖了表格的各个方面，从基础设置到高级特性。 1. 表格使用基础： - **画表格**: 使用`Ext.grid.GridPanel`构建，初始化时设置renderTo属性指定显示区域，例如`vargrid = new Ext.grid.GridPanel({ renderTo: 'grid' })`。表格高度可以动态调整，如`autoHeight: true`以适应数据变化。 2. **表格数据构造**： - 数据源定义：通过`Ext.data.Store`，如`vards = new Ext.data.Store({ url: url, reader: extReader })`。`extReader`通常使用`Ext.data.JsonReader`来解析JSON数据，设置总记录数属性(totalProperty)和数据结构(root和fields)。 3. **列定义**： - `columns:`属性用于定义表格的列，包括列标题、数据类型等，是表格展示的核心配置。 4. **样式和布局**： - `bodyStyle`, `frame: true`等属性用于设置表格的外观样式，如宽度、边框等。`stripeRows`启用行间隔样式。 5. **交互元素**： - **复选框**：表格中的复选框可以通过`Ext.grid.CheckboxModel`实现。默认选中可以通过配置`checkOnInsert`或在创建时设置`checkboxes`选项。 6. **工具栏**： - 表格上方和下方的工具条(`bbar`)可以添加自定义操作按钮，提供额外的功能。 7. **数据加载与查询**： - `loadMask`用于显示加载指示器，确保用户知道数据正在加载。表格支持通过Ajax查询数据。 8. **事件处理**： - 单击事件：表格的每一行可以绑定单击事件，以便响应用户的交互。 9. **列封装**： - 可以通过包装表格中的特定列，定制列的行为或内容。 10. **可编辑表格**： - 通过`Ext.grid.EditorGridPanel`实现表格的单元格可编辑，用户可以直接在表格中修改数据。 11. **对话框和弹出窗口**： - 对话框(`Ext.window.Window`)和弹出窗口提供了一种在应用程序中展示临时或确认信息的方式。 12. **可伸缩的Panel**： - `Ext.Panel`的灵活性允许组件大小调整，如设置`layout`属性为`fit`以适应内容。 13. **EditGridPanel**： - 结构包括网格本身、编辑器和数据提交/接收逻辑。数据提交通常涉及Ajax请求到后端服务器。 14. **Ajax代码参考**： - 提供了使用Ext进行数据异步请求的代码示例，便于开发者理解和实现。 15. **Button的使用**： - 最后介绍了如何创建和配置按钮，可能涉及到表单提交、导航或其他操作。 本文档详尽地介绍了如何在Ext框架下构建功能丰富的表格组件，以及如何利用其提供的其他交互元素和高级特性，有助于开发者高效地构建复杂的Web应用界面。