extjs 使用教程 EXT JS 是一个开源的 JavaScript 框架，用于快速开发高性能、响应式的网页应用。今天，就让我带你一步步走进 EXT JS 的世界，学习如何使用这个强大的框架。

1. 安装 EXT JS

我们需要将 EXT JS 集成到我们的项目中。可以通过以下几种方式获取 EXT JS：

1.1 通过官方网站下载

EXT JS 的官方网址提供了多种打包方式的下载，包括压缩包、GZ 压缩包等。你可以根据自己的需求选择合适的下载方式。

1.2 使用 npm 或 yarn 安装

如果你使用 npm 或 yarn 管理你的项目依赖，可以直接使用以下命令安装： ```bash npm install extjs # 或者 yarn add extjs ```

2. 创建 EXT JS 应用程序

在安装完 EXT JS 后，接下来我们需要创建一个 EXT JS 应用程序。

2.1 创建项目结构

在你的项目目录下，创建以下目录结构： ``` my-extjs-app/ │ ├── js/ │ ├── app.js │ ├── controllers/ │ │ └── main.js │ ├── views/ │ │ └── main.js │ ├── models/ │ │ └── main.js │ ├── stores/ │ │ └── main.js │ └── index.html ```

2.2 创建入口文件

在 `index.html` 文件中，引入 EXT JS 的核心库和你的主应用程序： ```html ```

2.3 初始化应用程序

在 `app.js` 文件中，初始化 EXT JS 应用程序： ```javascript Ext.onReady(function() { Ext.create('Ext.app.Application', { name: 'MyApp', launch: function() { // Create your view here } }); }); ```

3. 创建视图

EXT JS 中的视图主要负责展示用户界面。下面是一个简单的示例，展示如何创建一个表格视图。

3.1 创建表格模型

在 `models/main.js` 文件中，定义表格的数据模型： ```javascript Ext.define('MyApp.model.Main', { extend: 'Ext.data.Model', fields: [ {name: 'name'}, {name: 'email'} ] }); ```

3.2 创建表格存储

在 `stores/main.js` 文件中，定义表格的数据存储： ```javascript Ext.create('Ext.data.Store', { model: 'MyApp.model.Main', data: [ {name: 'Alice', email: 'alice@example.com'}, {name: 'Bob', email: 'bob@example.com'} ] }); ```

3.3 创建表格视图

在 `views/main.js` 文件中，创建表格视图： ```javascript Ext.define('MyApp.view.Main', { extend: 'Ext.grid.GridPanel', alias: 'widget.maingrid', store: 'main', columns: [ {header: 'Name', dataIndex: 'name'}, {header: 'Email', dataIndex: 'email'} ] }); ```

3.4 注册视图

在 `app.js` 文件的 `launch` 方法中，注册并渲染表格视图： ```javascript Ext.create('MyApp.view.Main', { renderTo: Ext.getBody() }); ``` 现在，你已经成功地创建了一个包含表格视图的 EXT JS 应用程序。继续探索更多功能，你可以根据需求添加更多视图、控制器、模型和存储。希望这篇教程能帮助你更好地掌握 EXT JS！