ExtJS 2.2入门教程：配置与表格控件实战

需积分: 0 50 浏览量更新于2024-07-28 收藏 928KB DOC 举报

“本文详细介绍了ExtJS的使用方法，包括配置和表格控件的使用，适合在开发中需要使用到这些功能的人员参考。” 在Web开发领域，ExtJS是一款强大的JavaScript库，提供了丰富的用户界面组件和AJAX交互功能。它以其优雅的API和美观的界面设计而备受推崇。本文将详细介绍如何开始使用ExtJS，特别是对于配置和表格控件的运用。首先，我们需要了解ExtJS的基本结构。ExtJS包含一系列的JavaScript文件和CSS样式表，用于构建富互联网应用程序（RIA）。其核心库分为ext-base.js和ext-all.js，前者包含了基础的类和功能，后者则包含所有组件和功能，文件较大，适用于开发阶段。在生产环境中，为了优化性能，通常会使用压缩合并后的文件。下载ExtJS可以从官方网站www.extjs.com获取，选择适合自己项目的版本。本文以2.2版本为例进行讲解。下载后，创建一个自己的工作目录，例如"MyExample"，并在此目录下编写HTML页面。配置ExtJS的步骤如下： 1. 创建一个新的HTML文件，如`Helloworld.html`。 2. 在`<head>`标签内引入必要的资源文件。首先引用CSS样式表`ext-all.css`，确保UI样式正确显示；接着引入适配器文件`ext-base.js`，它是ExtJS的基础；最后引入包含所有组件的`ext-all.js`文件。 ```html <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" /> <script type="text/javascript" src="../adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../ext-all.js"></script> ``` 3. 接下来，在`<script>`标签内编写JavaScript代码。当页面加载完毕后，通过`Ext.onReady`函数执行初始化代码。在这个例子中，展示了如何使用`Ext.MessageBox`弹出一个警告框显示“HelloWorld”。 ```javascript <script type="text/javascript"> Ext.onReady(function() { Ext.MessageBox.alert('HelloWorld', 'HelloWorld'); }); </script> ``` 关于表格控件的使用，ExtJS提供了一个强大的`Ext.grid.GridPanel`组件，可以用于展示和编辑数据。创建表格控件通常涉及以下几个步骤： 1. 定义数据模型（`Ext.data.Store`），包含数据源和字段定义。 2. 创建列模型（`Ext.grid.ColumnModel`），定义列的显示方式和行为。 3. 创建表格面板（`Ext.grid.GridPanel`），关联数据源和列模型，并设置其他配置项，如分页、排序等。示例代码可能如下： ```javascript var store = new Ext.data.JsonStore({ url: 'get_data.php', // 数据来源 root: 'rows', fields: ['name', 'email', 'phone'] }); var cm = new Ext.grid.ColumnModel([ {header: 'Name', width: 100, dataIndex: 'name'}, {header: 'Email', width: 150, dataIndex: 'email'}, {header: 'Phone', width: 120, dataIndex: 'phone'} ]); var grid = new Ext.grid.GridPanel({ store: store, cm: cm, renderTo: 'grid-div', // 渲染到的DOM元素 bbar: new Ext.PagingToolbar({store: store, displayInfo: true}) // 分页栏 }); ``` 以上只是ExtJS使用的一个简单概述，实际开发中还可以利用其丰富的组件库，如窗口（Window）、表单（FormPanel）、树形视图（TreePanel）等，构建复杂的交互式应用。同时，ExtJS提供了强大的布局管理机制，可以根据需求灵活布局页面元素。不过，由于文件大小和对客户端性能的要求，需权衡是否在特定项目中使用ExtJS。 ExtJS是一个功能强大且易于上手的前端框架，对于希望提升Web应用用户体验的开发者来说，值得深入学习和使用。

江南等风起

粉丝: 1
资源: 21

ExtJS 2.2入门教程：配置与表格控件实战

extjs属性方法大全

Extjs+Gride使用方法

Extjs4使用要点个人整理

extjs中actioncolumn的使用方法

extjs不使用表单提交

extjs+页面刷新

Extjs的代码提示 vscode

extjs中的 metachange 方法怎样才能调用

extjs1.1的版本可以使用setwidth吗

extjs6视频教学

最新资源