ExtJS的使用方法汇总--doc文档

ExtJS 是一个强大的JavaScript库，专门用于构建富互联网应用程序（RIA）。它提供了丰富的用户界面组件，包括表格、表单、树形结构、弹出窗口等，使得开发者可以创建功能丰富的Web应用，而无需深入HTML、CSS和JavaScript的底层细节。 在配置ExtJS时，首先需要从官方站点（www.extjs.com）下载所需版本。最新版本可能已经更新，但教程中提到的是2.2版。下载后，需要将资源文件夹配置到项目中，例如创建一个名为"MyExample"的目录，用于存放自定义代码。在HTML文件中，需要引入`ext-all.css`、`ext-base.js`和`ext-all.js`，它们分别负责样式、基础库和全部功能。`Ext.onReady`函数用于确保在页面加载完成后执行指定的JavaScript代码，例如弹出一个提示框验证配置是否成功。 表格控件（Grid）是ExtJS的核心组件之一，其功能强大，包括列排序、数据缓存、拖放操作、列隐藏、行号显示、列汇总和单元格编辑等。创建一个基本的Grid，需要定义列模型（ColumnModel），其中包含了每一列的标题和数据索引。例如： ```javascript var cm = new Ext.grid.ColumnModel([ {header: '编号', dataIndex: 'id'}, {header: '名称', dataIndex: 'name'}, {header: '描述', dataIndex: 'desn'} ]); ``` 接下来，需要提供数据源，通常是一个二维数组，每一行代表一条数据，每列对应数组中的元素： ```javascript var data = [ ['1', 'name1', 'desn1'], ['2', 'name2', 'desn2'] ]; ``` 然后创建一个Store对象来存储这些数据，并实例化Grid面板： ```javascript var store = new Ext.data.Store({ data: data, reader: new Ext.data.ArrayReader({idIndex: 0}, [ // idIndex 指定主键列 {name: 'id'}, {name: 'name'}, {name: 'desn'} ]) }); var grid = new Ext.grid.GridPanel({ store: store, cm: cm, renderTo: Ext.getBody() // 渲染到body元素 }); ``` 通过调用`grid.render()`方法或直接指定渲染位置（如`renderTo: Ext.getBody()`）将Grid展示在页面上。 除了表格控件，ExtJS还提供了表单（Form）和输入控件，用于创建交互式的用户界面。表单组件包括文本框、下拉列表、复选框等，可以方便地进行数据验证和提交。树形结构（TreePanel）则用于展示层次结构的数据，支持展开、折叠、拖放等功能。弹出窗口（Window）则是用于显示临时信息或交互操作的浮动组件，可自定义大小、内容和行为。 ExtJS提供了全面的UI解决方案，适合开发复杂的Web应用。但需要注意，由于其功能强大，文件体积较大，可能对加载速度和浏览器兼容性有一定影响。因此，在选择使用ExtJS时，需要权衡性能和功能需求。