ExtJS 5.0教程怎么学？入门到精通？-杰瑞科技汇

第一部分：Ext JS 5.0 基础入门

什么是 Ext JS？

Ext JS 是一个使用 JavaScript 构建富互联网应用程序的跨浏览器前端框架，它基于 Sencha Cmd 和现代 Web 技术（如 HTML5, CSS3, JavaScript），特别适合开发数据密集型的企业级应用，如管理后台、数据分析平台等。

（图片来源网络，侵删）

Ext JS 5.0 的核心特性：

组件化架构： 一切皆组件，从按钮到整个窗口,都是组件。
数据绑定： 这是 Ext JS 5 最重要的特性之一，它允许你将 UI 组件与数据模型自动同步，当数据改变时，UI 会自动更新，反之亦然,这大大简化了开发。
MVVM 架构： Model-View-ViewModel，它将 UI（View）与业务逻辑和数据（ViewModel）分离,使代码更易于维护和测试。
响应式布局： 内置了对响应式设计的支持，可以更好地适应不同尺寸的屏幕（桌面、平板）。
丰富的主题： 提供了多种主题（如 Neptune、Crisp）和可自定义的样式,可以轻松改变应用的外观。

环境搭建

在开始之前,你需要准备好开发环境。

a. 安装 Node.js 和 npm Ext JS 的构建工具 Sencha Cmd 依赖于 Node.js 和 npm，请从 Node.js 官网下载并安装 LTS 版本。

b. 安装 Sencha Cmd Sencha Cmd 是 Ext JS 的命令行工具，用于创建项目、生成代码、编译应用等。

（图片来源网络，侵删）

Windows: 下载 .exe 安装包并运行。
Mac/Linux: 使用 Homebrew 或下载 .pkg/.sh 文件安装。

安装完成后，打开终端（或命令提示符）,输入以下命令验证安装：

sencha -version

你应该能看到 Sencha Cmd 的版本号。

c. 下载 Ext JS 5.0 SDK 你需要 Ext JS 的软件开发工具包，你可以从 Sencha 的官方社区下载（可能需要注册账号）。

下载后，将其解压到一个固定的目录，C:\dev\ext-5.0.0。

你的第一个 Ext JS 应用 (Hello World)

我们将使用 Sencha Cmd 创建一个标准的 MVC 应用。

a. 创建应用 打开终端，进入你想要创建项目的目录,然后运行以下命令：

sencha -sdk /path/to/your/ext-5.0.0 generate app MyFirstApp ./my-first-app

-sdk: 指向你的 Ext JS 5.0 SDK 路径。
generate app: 生成一个新应用的命令。
MyFirstApp: 应用的名称（类名）。
./my-first-app: 应用将被创建的目录名。

b. 理解项目结构 创建完成后，进入 my-first-app 目录,你会看到以下主要结构：

my-first-app/
├── app/              # 你的应用代码
│   ├── controller/   # 控制器
│   ├── model/       # 数据模型
│   ├── store/       # 数据存储
│   ├── view/        # 视图（UI组件）
│   └── Application.js # 应用主入口
├── index.html       # 应用的入口 HTML 文件
├── app.json         # 应用的配置文件
└── sencha.cfg       # Sencha Cmd 的全局配置

c. 编译并运行应用 在终端中，确保你位于 my-first-app 目录下,然后运行：

sencha app build

这个命令会编译你的应用，生成 build 目录，并将所有资源文件合并、压缩。

用浏览器打开 index.html 文件，你应该能看到一个默认的 Ext JS 欢迎界面。

d. 修改代码，显示 "Hello, Ext JS 5!" 让我们修改代码,让它显示我们自己的消息。

创建一个视图: 在 app/view 目录下，创建一个新文件 Viewport.js。

// app/view/Viewport.js
Ext.define('MyFirstApp.view.Viewport', {
    extend: 'Ext.container.Viewport', // 继承自 Viewport，它会自动填充整个浏览器窗口
    requires: [ // 声明依赖
        'MyFirstApp.view.HelloPanel'
    ],
    layout: 'fit', // 布局方式：自适应填充
    items: [
        {
            xtype: 'hellopanel' // 使用我们下面定义的 HelloPanel
        }
    ]
});

创建另一个视图（面板）: 在 app/view 目录下，创建 HelloPanel.js。

// app/view/HelloPanel.js
Ext.define('MyFirstApp.view.HelloPanel', {
    extend: 'Ext.panel.Panel', // 继承自面板
    xtype: 'hellopanel', // 注册一个 xtype，方便在其他地方使用
    title: '我的第一个面板',
    html: 'Hello, Ext JS 5! 欢迎来到你的第一个应用。', // 面板内显示的 HTML 内容
    width: 400,
    height: 200,
    style: {
        margin: '100px auto' // 居中显示
    }
});

修改主应用入口: 打开 app/Application.js，确保你的 Viewport 被加载。

// app/Application.js
Ext.define('MyFirstApp.Application', {
    name: 'MyFirstApp',
    extend: 'Ext.app.Application',
    requires: [
        // ... 其他依赖
        'MyFirstApp.view.Viewport' // 添加这一行，确保 Viewport 被加载
    ],
    views: [
        // ... 其他视图
        'HelloPanel' // Sencha Cmd 会自动根据这个名字找到 'MyFirstApp.view.HelloPanel'
    ],
    // ... 其他配置
});

重新编译并运行: 再次运行 sencha app build，然后刷新浏览器，你应该能看到一个标题为“我的第一个面板”的面板，里面显示着 "Hello, Ext JS 5!"。

第二部分：核心概念详解

组件与 xtype

组件: Ext JS 应用的基本构建块，每个组件都有配置项、方法和事件。Ext.button.Button, Ext.grid.Panel。
xtype: 组件的“别名”，通过 xtype，你可以在不直接 new 一个类的情况下，在配置中声明组件，这非常方便，尤其是在布局中。
- xtype: 'button' 等同于 Ext.create('Ext.button.Button')。
- 常见的 xtype: panel, grid, form, textfield, button, container 等。

布局

布局决定了子组件在父容器中的排列方式，Ext JS 提供了多种布局：

fit: 只显示一个子组件,并使其充满整个父容器。
border: 将父容器划分为东、南、西、北、中五个区域。
hbox: 水平排列子组件。
vbox: 垂直排列子组件。
card: 一次只显示一个子组件,常用于实现向导或多步表单。

示例: 使用 hbox 布局 修改 app/view/Viewport.js:

Ext.define('MyFirstApp.view.Viewport', {
    extend: 'Ext.container.Viewport',
    requires: [
        'MyFirstApp.view.HelloPanel'
    ],
    layout: 'hbox', // 使用 hbox 布局
    defaults: {
        margins: '5 5 5 5' // 为子组件设置默认外边距
    },
    items: [
        {
            xtype: 'hellopanel',
            flex: 1 // 占用可用空间的比例
        },
        {
            xtype: 'panel',
            title: '第二个面板',
            html: '我在右边',
            width: 200,
            flex: 1
        }
    ]
});

重新编译后,你会看到两个面板并排显示。

数据模型

模型定义了你的数据结构，它包含字段（fields）和数据验证规则。

示例: 定义一个用户模型 在 app/model 目录下创建 User.js:

// app/model/User.js
Ext.define('MyFirstApp.model.User', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'id', type: 'int' },
        { name: 'name', type: 'string' },
        { name: 'email', type: 'string' },
        { name: 'joinDate', type: 'date', dateFormat: 'Y-m-d H:i:s' }
    ]
});

数据存储

存储是模型和组件（如网格、表单）之间的桥梁，它管理着一组模型实例，并提供了排序、过滤、分页等功能。

示例: 创建一个用户存储 在 app/store 目录下创建 Users.js:

// app/store/Users.js
Ext.define('MyFirstApp.store.Users', {
    extend: 'Ext.data.Store',
    model: 'MyFirstApp.model.User',
    data: [
        { id: 1, name: '张三', email: 'zhangsan@example.com', joinDate: '2025-01-15 10:00:00' },
        { id: 2, name: '李四', email: 'lisi@example.com', joinDate: '2025-02-20 11:30:00' },
        { id: 3, name: '王五', email: 'wangwu@example.com', joinDate: '2025-03-10 09:15:00' }
    ]
});

视图 - 以网格为例

网格是 Ext JS 中最强大的组件之一,用于展示表格数据。

示例: 显示用户列表 在 app/view 目录下创建 user/UserGrid.js:

// app/view/user/UserGrid.js
Ext.define('MyFirstApp.view.user.UserGrid', {
    extend: 'Ext.grid.Panel',
    xtype: 'usergrid',
 '用户列表',
    // 指定数据存储
    store: 'Users',
    // 定义列
    columns: [
        { text: 'ID', dataIndex: 'id', width: 50 },
        { text: '姓名', dataIndex: 'name', flex: 1 },
        { text: '邮箱', dataIndex: 'email', flex: 1 },
        { text: '加入日期', dataIndex: 'joinDate', formatter: 'date("Y-m-d")', width: 150 }
    ]
});

将这个网格添加到你的 Viewport 中：

// app/view/Viewport.js
Ext.define('MyFirstApp.view.Viewport', {
    // ... 其他代码
    items: [
        {
            xtype: 'usergrid' // 替换掉原来的 hellopanel
        }
    ]
});

重新编译,你就能看到一个包含用户数据的表格了。

第三部分：进阶主题

数据绑定与 MVVM

这是 Ext JS 5 的精髓,我们通过一个简单的计数器例子来理解。

a. 创建 ViewModel ViewModel 是连接 View 和 Model 的桥梁，它为 View 提供数据。

在 app/view 目录下创建 CounterViewModel.js:

// app/view/CounterViewModel.js
Ext.define('MyFirstApp.view.CounterViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.counter', // 给 View 一个引用
    data: {
        // 这里是 ViewModel 的数据
        count: 0
    },
    // 可以在这里定义计算属性
    formulas: {
        doubleCount: {
            get: function(get) {
                return get('count') * 2;
            }
        }
    }
});

b. 创建 View 并绑定数据 创建一个视图 Counter.js:

// app/view/Counter.js
Ext.define('MyFirstApp.view.Counter', {
    extend: 'Ext.panel.Panel',
    xtype: 'counterpanel',
    viewModel: 'counter', // 关联 ViewModel
    layout: 'vbox',
    items: [
        {
            xtype: 'displayfield',
            fieldLabel: '当前计数',
            bind: '{count}' // 将显示字段的值绑定到 ViewModel 中的 count 数据
        },
        {
            xtype: 'displayfield',
            fieldLabel: '计数两倍',
            bind: '{doubleCount}' // 绑定到计算属性
        },
        {
            xtype: 'button',
            text: '增加',
            handler: function() {
                // 通过 ViewModel 修改数据
                this.getViewModel().set('count', this.getViewModel().get('count') + 1);
            }
        }
    ]
});

c. 在 Viewport 中使用 将 Counter 面板添加到 Viewport 中，当你点击“增加”按钮时，两个 displayfield 的值会自动更新，无需手动操作 DOM。

控制器

控制器负责处理用户交互，协调模型、存储和视图，在 MVVM 架构中，控制器的角色有所减弱,但仍然很重要。

控制器可以通过 refs 和 control 来方便地引用和监听视图中的组件。

第四部分：开发与生产

Sencha Cmd 常用命令

sencha app watch: 监听文件变化，自动编译和刷新浏览器（开发神器）。
sencha app build development: 编译开发版本,保留可读性。
sencha app build production: 编译生产版本，文件被压缩和合并,性能最佳。
sencha generate controller MyController: 生成一个新的控制器。
sencha generate view MyView: 生成一个新的视图。

主题与样式

你可以通过修改 sass 目录下的文件来定制应用的样式，Ext JS 使用 SASS 预处理器，修改后，运行 sencha app build 即可看到效果。

学习资源推荐

官方文档: Sencha Docs - Ext JS 5.0，这是最权威、最全面的资料,几乎所有问题都能在这里找到答案。
Sencha Examples: Sencha Examples，包含大量可交互的示例代码,是学习组件用法的最佳途径。
Sencha Video Tutorials: Sencha TV，官方提供的视频教程,非常适合入门。
社区论坛: Sencha Forums，遇到问题时,可以在论坛搜索或提问。

Ext JS 5.0 是一个功能强大但学习曲线较陡峭的框架，入门时，请务必打好基础，理解 组件、布局、数据模型、存储 这四大基石，重点掌握 MVVM 和数据绑定，这是现代 Ext JS 开发的核心。

从创建一个简单的项目开始，逐步添加功能，多看官方文档和示例，你会逐渐掌握这个强大的工具,祝你学习愉快！

ExtJS 5.0教程怎么学？入门到精通？

第一部分：Ext JS 5.0 基础入门

什么是 Ext JS？

环境搭建

你的第一个 Ext JS 应用 (Hello World)

第二部分：核心概念详解

组件与 xtype

布局

数据模型

数据存储

视图 - 以网格为例

第三部分：进阶主题

数据绑定与 MVVM

控制器

第四部分：开发与生产

Sencha Cmd 常用命令

主题与样式

学习资源推荐

99ANYc3cd6

Python中URL编码怎么用？

Java导出Excel如何添加边框？

Java树形结构如何高效转JSON？

Java内部类为何要用static？

Java关闭Socket连接的正确方法是什么？

Java Socket编程实例具体怎么实现？

C++ Builder 6程序设计教程适合新手入门吗？

visual foxpro 6.0教程

Java Home未设置，如何解决？

Python array flatten有哪些方法？

python sift landmark

HDR Light Studio教程如何快速上手？

After Effects CS6教程从哪里学起？

Java WebSocket与HTML5如何实现实时通信？

Java如何调用C语言的WebService接口？

Visual Studio教程PDF哪里找？新手如何学？

ExtJS 5.0教程怎么学？入门到精通？

第一部分：Ext JS 5.0 基础入门

什么是 Ext JS？

环境搭建

你的第一个 Ext JS 应用 (Hello World)

第二部分：核心概念详解

组件与 xtype

布局

数据模型

数据存储

视图 - 以网格为例

第三部分：进阶主题

数据绑定与 MVVM

控制器

第四部分：开发与生产

Sencha Cmd 常用命令

主题与样式

学习资源推荐

相关推荐

Java Socket编程实例具体怎么实现？