ExtJS入门教程：配置与表格控件Grid基础使用

PDF文件

下载需积分: 0 | 86KB | 更新于2024-08-30 | 164 浏览量 | 举报收藏

立即下载

"ExtJS配置和表格控件使用教程" ExtJS是一个强大的JavaScript组件库，专为构建富互联网应用程序（RIA）而设计。它提供了一系列美观且功能丰富的AJAX控件，使得开发者能够创建复杂的Web应用界面。由于其全面的功能，ExtJS的库文件可能较大，例如ext-all.js超过400KB，这可能会对老旧或性能较低的客户端造成压力，特别是不支持IE6及以下版本的浏览器。因此，在选择ExtJS作为开发工具时，需要考虑项目的性能需求和目标用户群体。本文将详细介绍如何下载和配置ExtJS，以及如何使用表格控件Grid。首先，你可以从ExtJS的官方网站www.extjs.com下载所需版本。目前文章提及的是2.2版本，但请注意，最新的版本可能是3.0或更高。配置步骤如下： 1. 下载ExtJS后，解压到一个名为"Ext"的目录，并在该目录下创建一个名为"MyExample"的新目录，用于存放你的项目代码。 2. 创建一个新的HTML文件，如"Helloworld.html"，在文件的`<head>`标签内引入必要的CSS和JavaScript文件。这包括ExtJS的基础样式表`ext-all.css`，适配器文件`ext-base.js`，以及核心库文件`ext-all.js`。确保引用顺序正确，不要使用`</script>`来结束JavaScript引用。 3. 在`<script>`标签内，编写一个简单的ExtJS脚本，如`Ext.onReady`函数，当页面加载完成后执行，例如弹出一个"HelloWorld"的对话框。如果成功运行，意味着配置已完成。接下来，我们将讨论ExtJS的表格控件——Grid。Grid是ExtJS中非常重要的一个组件，提供了丰富的功能，包括但不限于排序、分页、数据缓存、列的隐藏与显示、行号自动显示、列总计、单元格编辑等。创建一个基本的Grid，你需要： 1. 定义数据模型（Model），通常使用`Ext.data.Model`定义字段和数据结构。 2. 创建数据存储（Store），使用`Ext.data.Store`，并配置数据源，如JSON或XML。 3. 定义列配置（Column Model），使用`Ext.grid.ColumnModel`来指定每列的显示方式、宽度、可编辑性等。 4. 实例化Grid Panel，使用`Ext.grid.GridPanel`，并将数据存储和列模型作为参数传入。 5. 将Grid Panel添加到页面布局中。例如，一个简单的Grid创建示例可能如下： ```javascript var store = new Ext.data.Store({ data: [ {name: 'John', age: 35}, {name: 'Jane', age: 28} ], fields: ['name', 'age'] }); var cm = new Ext.grid.ColumnModel([ {header: 'Name', width: 100, dataIndex: 'name'}, {header: 'Age', width: 70, dataIndex: 'age'} ]); var grid = new Ext.grid.GridPanel({ store: store, cm: cm, renderTo: document.body }); ``` 这个例子中，我们创建了一个包含姓名和年龄两个字段的数据存储，然后定义了对应的列模型，最后创建了一个Grid Panel并将其渲染到页面上。这只是ExtJS配置和表格控件Grid使用的基本介绍。实际上，ExtJS提供了大量高级特性，如自定义渲染、行编辑、树形Grid、组合框（ComboBox）等，这些都需要通过深入学习和实践来掌握。通过熟悉这些工具，开发者可以构建出交互性强、用户体验优秀的Web应用程序。