本文还有配套的精品资源，点击获取
简介：ExtJS是一个使用JavaScript构建富客户端Web应用的框架，提供了完整的组件模型和数据处理机制。本课程分为四个部分，引导你从基础理念到核心实践技巧，逐步掌握ExtJS开发。学习内容涵盖MVC模式应用、环境搭建、用户界面组件使用，以及创建第一个ExtJS应用。课程旨在帮助开发者快速上手ExtJS，并在实践中深入理解前端开发。
1. ExtJS基础知识与架构介绍
1.1 ExtJS的发展历程和特点
ExtJS最初是由Jack Slocum于2006年发起的一个开源项目，其后被YAHOO收购并成为YUI组件库的一部分，现在则由Sencha公司继续维护和开发。它是基于JavaScript和HTML5的前端框架，专门用于开发跨浏览器的富互联网应用。ExtJS以提供丰富的UI组件著称，这些组件包括了数据网格（Grid）、表单、工具条以及各种交互式元素。
ExtJS的显著特点包括： - 丰富的组件库 ：ExtJS提供了大量预制的、功能丰富的UI组件，支持快速开发复杂的用户界面。 - 模块化架构 ：采用模块化设计，使得开发者可以根据需要选择特定模块进行应用开发，有效减小最终打包文件的体积。 - MVC模式 ：内置MVC（Model-View-Controller）设计模式，促进了代码的组织、分离和重用。
1.2 ExtJS核心库和扩展库的概述
ExtJS的核心库主要提供基础的功能，如界面组件、布局管理、事件处理等。核心库是构建任何ExtJS应用的基础。
除了核心库，ExtJS还提供了多个扩展库（也称为包或插件），这些扩展库为特定的功能增强了框架。例如： - ExtJS 数据包 ：包含了对数据模型和数据存储操作的增强功能。 - ExtJS 表单验证包 ：提供表单字段验证的扩展。 - ExtJS 企业版包 ：为企业级应用提供的额外组件和功能。
每个包通常都有特定的依赖关系，并且可以根据项目的需要有选择地添加到项目中。这样的架构设计使得ExtJS既可以作为一个轻量级的UI框架使用，也可以扩展为一个功能强大的企业级解决方案。
2. MVC设计模式应用
2.1 MVC设计模式的基本原理和优势
2.1.1 MVC设计模式的定义和组成
MVC（Model-View-Controller）设计模式是软件工程中的一种广泛使用的架构模式。它将应用程序分为三个核心部件：模型(Model)、视图(View)和控制器(Controller)。这种分层架构的目的是分离内部表示、用户界面和用户交互，以提高代码的复用性、可维护性、灵活性和可扩展性。
模型(Model) ：负责数据和业务逻辑，通常是应用程序中的核心，包含了应用的数据和操作数据的业务逻辑。 视图(View) ：用于展示数据和用户交互。视图决定了用户看到的数据，并接受用户操作。 控制器(Controller) ：作为模型和视图之间的中介，接收用户的输入并调用模型和视图去完成用户的需求。
2.1.2 MVC设计模式在ExtJS中的应用
在ExtJS框架中，MVC设计模式是实现复杂应用的关键。ExtJS中的组件、面板和窗口等UI元素都遵循MVC模式。ExtJS 提供了自己的一套 MVC 实现，使得开发者可以轻松地组织代码，提高应用的可管理性和可维护性。
Model : ExtJS 的数据模型通常使用 Ext.data.Model 类定义，它允许你为存储在数据集（store）中的每条记录定义字段。 View : 对于视图，ExtJS 提供了丰富多样的组件如 Ext.Panel 、 Ext.grid.Panel 和 Ext.form.Panel 等。 Controller : 控制器则通过事件监听和处理来连接模型和视图。ExtJS的控制器通常继承自 Ext.app.Controller 。
2.2 实现MVC设计模式的实践步骤
2.2.1 创建Model、View和Controller
在ExtJS中实现MVC模式的第一步是定义模型（Model）、视图（View）和控制器（Controller）。以一个简单的任务管理应用为例，我们需要一个任务列表来展示任务，一个表单来添加新任务，以及相应的逻辑来处理这些任务。
Model
首先，我们创建一个模型来表示任务：
Ext.define('MyApp.model.Task', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int' },
{ name: 'title', type: 'string' },
{ name: 'dueDate', type: 'date' }
]
});
View
接下来，我们定义任务列表的视图。这可能是一个 Ext.grid.Panel ：
Ext.define('MyApp.view.TasksGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.tasksgrid',
columns: [
{ text: 'ID', dataIndex: 'id' },
{ text: 'Title', dataIndex: 'title' },
{ text: 'Due Date', dataIndex: 'dueDate', renderer: Ext.util.Format.dateRenderer('m/d/Y') }
],
store: 'TasksStore'
});
Controller
最后，我们需要一个控制器来处理用户输入和更新视图：
Ext.define('MyApp.controller.Tasks', {
extend: 'Ext.app.Controller',
views: ['TasksGrid'],
init: function() {
this.control({
'tasksgrid': {
itemclick: this.onTaskSelect
}
});
},
onTaskSelect: function(grid, record) {
// 当一个任务被选中时的操作
}
});
2.2.2 案例分析：基于MVC的ExtJS应用开发
通过一个简单案例分析，我们将进一步探讨如何将MVC设计模式应用于ExtJS中，并在实际开发中解决常见问题。
假设我们需要一个功能，允许用户通过表单添加新的任务到任务列表。以下是如何实现该功能的步骤：
定义任务模型（Model） ，它将包含新任务的数据字段。 构建视图（View） ，即任务表单和任务列表视图。 创建控制器（Controller） ，负责处理用户输入（如添加新任务）和更新视图。
1. 模型定义
Ext.define('MyApp.model.Task', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'auto' },
{ name: 'title', type: 'string' },
{ name: 'dueDate', type: 'date', dateFormat: 'Y-m-d' }
]
});
2. 视图构建
// 任务列表视图
Ext.define('MyApp.view.TasksGrid', {
extend: 'Ext.grid.Panel',
// ...省略其他代码...
});
// 添加任务的表单视图
Ext.define('MyApp.view.TasksForm', {
extend: 'Ext.form.Panel',
items: [
{
xtype: 'textfield',
fieldLabel: 'Title',
name: 'title'
},
{
xtype: 'datefield',
fieldLabel: 'Due Date',
name: 'dueDate'
},
{
xtype: 'button',
text: 'Add Task',
handler: function() {
// 实现添加任务的逻辑
}
}
]
});
3. 控制器实现
Ext.define('MyApp.controller.Tasks', {
extend: 'Ext.app.Controller',
views: ['TasksGrid', 'TasksForm'],
init: function() {
// 控制器的初始化逻辑
},
onAddTaskClick: function() {
// 处理添加任务按钮点击事件
}
});
在实现过程中，我们要确保控制器响应表单提交事件，并与模型和视图互动，更新任务列表。使用MVC模式的优点是显而易见的：当我们的应用程序增长时，各个组件的职责清晰，代码更加容易理解和维护。
在ExtJS中，使用MVC不仅有助于组织应用程序的代码，而且框架本身也提供了一些约定和工具来简化这一过程。例如，通过数据绑定、事件处理等高级特性，开发者可以更加专注于业务逻辑的实现，而不是底层的细节问题。
在本章节中，我们介绍了MVC设计模式的基本原理和优势，并通过具体实例详细说明了如何在ExtJS中实现MVC设计模式。接下来，我们将探讨构建响应式用户界面的技巧，这将使我们的应用能够适应不同设备和屏幕尺寸，提供更加流畅和一致的用户体验。
3. 构建响应式用户界面的技巧
3.1 响应式设计的概念与重要性
3.1.1 理解响应式设计和自适应界面
响应式设计是当今Web开发中不可或缺的一个概念，其核心在于创建能够在多种设备和屏幕尺寸上提供一致用户体验的网站。在响应式设计的实践中，开发者会通过流式布局、灵活的图片以及对CSS媒体查询的使用来使界面能够适应不同的显示设备。
自适应界面则是在响应式设计的基础上进一步发展，它不仅关注屏幕尺寸的适应，而且考虑了用户交互方式和设备硬件能力的差异。例如，对于触摸屏设备，可能会放大按钮的点击区域，以便于用户操作。因此，自适应界面更加强调个性化和交互性。
3.1.2 选择合适的布局和组件以实现响应式设计
为了实现响应式设计，选择正确的布局和组件至关重要。布局应该能够动态地重新排列内容，以适应不同的屏幕尺寸。例如，ExtJS提供了如 CardLayout 、 ColumnLayout 和 BorderLayout 等多样化的布局类型，它们能够帮助开发者根据不同的设计需求轻松地管理页面结构。
在选择组件时，应当考虑组件在不同设备上的显示效果以及交互性。ExtJS中的组件一般都拥有良好的响应式特性，如 GridPanel 组件在小屏幕上可以自动隐藏不必要的列，从而提供更佳的显示效果和用户体验。
3.2 ExtJS中的响应式布局组件
3.2.1 使用Container和Layout管理布局
在ExtJS中， Container 是一个非常灵活的组件，可以容纳其他组件，并且支持多种布局类型。 Container 与 Layout 的结合使用，是构建响应式用户界面的关键。
// 示例代码：使用Container和布局
Ext.create('Ext.Container', {
fullscreen: true,
layout: 'vbox', // 使用垂直箱型布局
items: [{
xtype: 'component',
html: 'Top Component',
flex: 1 // 占满可用空间的1部分
}, {
xtype: 'component',
html: 'Middle Component',
flex: 2
}, {
xtype: 'component',
html: 'Bottom Component',
flex: 1
}]
});
上述代码展示了如何创建一个 Container 并设置为垂直箱型( vbox )布局。每个子 component 通过 flex 属性动态分配空间，能够适应不同屏幕尺寸的变化。
3.2.2 创建响应式表单和数据网格
在构建复杂的应用时，经常会遇到表单和数据网格的需求。ExtJS提供了 FormPanel 和 GridPanel 组件，它们都支持响应式设计。
表单响应式设计
// 示例代码：创建响应式表单
Ext.create('Ext.form.Panel', {
fullscreen: true,
items: [{
xtype: 'fieldset',
title: 'User Info',
items: [{
xtype: 'textfield',
name: 'username',
label: 'Username',
width: 200
}, {
xtype: 'passwordfield',
name: 'password',
label: 'Password',
width: 200
}]
}]
});
在这个例子中，表单使用 fieldset 和表单字段来收集用户信息。通过设置 width 属性，表单字段会随屏幕尺寸变化而适当调整大小。
数据网格响应式设计
// 示例代码：创建响应式数据网格
Ext.create('Ext.grid.Grid', {
fullscreen: true,
columns: [{
text: 'Name',
dataIndex: 'name',
width: 200
}, {
text: 'Email',
dataIndex: 'email',
width: 200
}],
data: [
{ name: 'John Doe', email: 'john@example.com' },
{ name: 'Jane Doe', email: 'jane@example.com' }
]
});
在数据网格的示例代码中，定义了两列，并为每列设置了固定的宽度。当屏幕尺寸变化时，网格能够自适应地调整列宽，确保内容的可见性和可访问性。
3.3 实践技巧与案例分析
3.3.1 实现响应式布局的实践技巧
要成功实现响应式布局，以下是一些实践技巧： - 使用百分比而非固定像素 ：为元素设置百分比宽度，使得布局能够根据容器宽度按比例缩放。 - 媒体查询的合理运用 ：利用CSS媒体查询定义不同屏幕尺寸下的样式规则。 - 组件的灵活性 ：确保组件可以根据布局的需要进行调整。 - 测试和调试 ：在多种设备和浏览器上测试你的界面，确保兼容性和用户体验。
3.3.2 案例分析：响应式用户界面的构建
通过一个简单的案例分析，我们可以更好地理解响应式用户界面的构建过程。假设我们要为一家在线书店构建一个响应式的产品展示页面。
需求分析
展示书籍封面。 在不同的设备上显示不同数量的书籍。 提供书籍信息的展开和收起功能。
实现步骤
设计布局 ：使用 Container 和 Layout 来组织书籍封面的布局，可以考虑使用 hbox 布局在大屏幕上并排显示多本书籍封面。 设置响应点 ：利用CSS媒体查询在特定屏幕宽度下改变布局行为。例如，当屏幕宽度小于768像素时，让书籍封面堆叠显示。 优化图片和组件 ：确保图片和组件在不同屏幕尺寸下都清晰可见，并且保持良好的交互性能。
关键代码片段
Ext.create('Ext.Container', {
fullscreen: true,
layout: 'fit', // 使用fit布局使内容适应父容器
items: [{
xtype: 'panel',
title: 'Book Store',
html: '
', // 书籍封面responsiveConfig: {
'max-width(768px)': {
html: '
' // 小屏幕下使用的封面}
}
}]
});
在上述代码中， responsiveConfig 用于根据不同的屏幕宽度设置不同的HTML内容，使界面能够适应不同的显示需求。
通过这样的步骤和技巧，我们能够构建出既美观又功能强大的响应式用户界面。这不仅提升了用户体验，也为企业的产品展示提供了更多的可能性。
4. ExtJS组件生命周期、属性、方法和事件
4.1 组件生命周期的理解与应用
4.1.1 生命周期各个阶段的介绍
ExtJS框架为开发者提供了一套完整的组件生命周期管理机制，以便于更加精细地控制组件的行为和状态。组件生命周期包括初始化、渲染、销毁等关键阶段。理解每个阶段的内部机制对于构建高性能和响应用户行为的Web应用至关重要。
在ExtJS中，组件生命周期从创建实例开始，接着是初始化阶段，这时组件会进行依赖注入和配置处理。初始化之后，组件将进入渲染流程，包括布局计算和子组件的渲染。此后，组件进入活动阶段，直到被标记为销毁。最后，组件会经历一系列清理工作并从DOM中移除。
每个阶段都伴随着特定的生命周期事件，开发者可以通过监听这些事件来在组件的生命周期的不同点注入自定义逻辑。例如， beforerender 事件在组件开始渲染之前触发，而 beforedestroy 事件则在组件销毁之前触发。
4.1.2 实现自定义组件的生命周期方法
ExtJS允许开发者扩展基本组件并为自定义组件实现特定的生命周期方法。通过覆盖 initComponent 方法，可以在组件初始化时添加特定逻辑。类似地， onRender 方法提供了在组件渲染到DOM后执行自定义操作的机会。
开发者还可以重写 beforeDestroy 方法来在组件销毁前执行清理工作。以下是覆盖 beforeDestroy 方法的示例代码：
Ext.define('MyApp.view.MyComponent', {
extend: 'Ext.Component',
beforeDestroy: function() {
// 自定义清理逻辑
if (this.someResource) {
this.someResource.release();
}
// 调用父类的beforeDestroy确保正常的销毁流程继续
this.callParent();
}
});
在覆盖生命周期方法时，确保调用父类的相应方法以保持正常的生命周期流程。
4.2 组件的属性、方法和事件
4.2.1 掌握组件的基本属性和常用方法
ExtJS组件的核心部分包括属性、方法和事件。基本属性定义了组件的外观和行为，而常用方法则允许开发者进行控制组件的生命周期或执行操作。
例如，ExtJS的 Panel 组件有一个 title 属性，可以用来设置面板的标题。开发者可以如下设置：
Ext.create('Ext.panel.Panel', {
title: 'My Panel',
// 其他配置项...
});
常用方法包括 show() 和 hide() ，用来控制组件的显示和隐藏。下面是一个展示 hide 方法如何在 Panel 组件中被调用的例子：
var panel = Ext.create('Ext.panel.Panel', {
title: 'My Panel',
renderTo: Ext.getBody() // 渲染到DOM中
});
panel.hide(); // 隐藏组件
4.2.2 理解和使用事件驱动开发模型
ExtJS使用事件驱动的开发模型，使得组件可以响应用户交互和运行时变化。开发者可以监听组件的事件并执行相应的回调函数。
组件事件可以通过 listeners 配置项在创建组件时指定，也可以通过组件的 on 方法添加事件监听器。例如，监听 Panel 的 show 事件：
Ext.create('Ext.panel.Panel', {
title: 'My Panel',
renderTo: Ext.getBody(),
listeners: {
show: function() {
console.log('Panel is now visible');
}
}
});
事件处理函数可以根据需要接受特定的参数，比如事件对象或者事件源组件实例。利用事件驱动模型，开发者可以为用户交互和组件状态变化添加灵活的响应逻辑。
通过掌握ExtJS组件的生命周期、属性、方法和事件，开发者可以构建更加动态和交互式的Web应用。这要求开发者对ExtJS框架的核心概念有深入理解，并能够运用这些知识解决实际问题。随着应用复杂性的增加，合理利用这些组件特性可以显著提高开发效率和应用性能。
5. ExtJS应用创建与交互实现
5.1 开发环境的搭建与配置
在开始开发ExtJS应用之前，确保开发环境已经搭建好是非常关键的一步。这包括安装必要的工具和配置环境变量，以便我们能够高效地创建和编译ExtJS项目。
5.1.1 安装和配置Sencha CMD
Sencha CMD是Sencha官方提供的命令行工具，它可以帮助我们快速地初始化和编译ExtJS项目。以下是安装和配置Sencha CMD的基本步骤：
访问Sencha官网下载Sencha CMD：前往 Sencha官网 选择合适的版本下载并安装。
配置环境变量：安装完成后，需要将Sencha CMD的安装路径添加到系统的环境变量中。以Windows为例，这通常涉及编辑系统的Path变量，将Sencha CMD的 bin 目录路径添加进去。
验证安装：打开命令提示符或终端，输入 sencha 查看是否能列出所有可用命令，如果可以，则表示Sencha CMD安装成功。
sencha -v
Sencha Cmd v7.4.0.107
5.1.2 创建和编译ExtJS项目
安装好Sencha CMD后，我们就可以开始创建自己的ExtJS项目了。以下是创建项目的步骤：
打开命令行工具，切换到你希望创建项目的目录。
使用 sencha generate app 命令创建新的ExtJS应用。以下是一个简单的命令示例：
sencha generate app -type=classic -path=MyApp MyApp
这个命令会创建一个名为 MyApp 的经典类型ExtJS应用。 -path 参数指定了应用的目录路径。
进入项目目录，通过运行 sencha app build 命令来编译应用。如果一切顺利，你会看到如下输出：
sencha app build
[INF] Building application ...
[INF] SASS detected, compiling with Compass. Please wait...
[INF] [file:./MyApp/sass/myapp.scss => ./MyApp/build/myapp.css]
[INF] Compiling JavaScript ...
[INF] Writing compiled files to ./MyApp/build ...
[INF] Application built successfully.
5.2 实现ExtJS应用的基本交互
ExtJS应用的交互是通过事件处理和数据绑定来实现的。下面是如何在ExtJS中实现基本交互的详细步骤。
5.2.1 事件处理和数据绑定
ExtJS使用组件模型来构建用户界面，每个组件都有一个丰富的事件系统，用于响应用户操作或系统事件。
事件绑定 ：在ExtJS中，可以使用 listeners 配置来为组件添加事件监听器。例如，在一个按钮的配置中绑定 click 事件：
{
xtype: 'button',
text: 'Click Me',
listeners: {
click: function() {
Ext.Msg.alert('Event', 'Button clicked!');
}
}
}
数据绑定 ：ExtJS 6版本引入了ViewModel和数据绑定的概念，允许开发者在视图和模型之间同步数据。首先需要在ViewModel中定义数据：
Ext.define('MyApp.view.main.MainModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.main',
data: {
message: 'Hello ExtJS!'
}
});
然后，可以在视图中绑定这些数据：
5.2.2 实现自定义交互的高级技巧
实现高级交互涉及到更复杂的逻辑处理和可能的异步操作。以下是一些高级技巧：
使用异步数据加载 ：在大型应用中，经常需要从服务器异步加载数据。可以使用 Ext.Ajax.request 方法来发送请求：
Ext.Ajax.request({
url: 'your-data-source-url',
method: 'GET',
success: function(response, opts) {
var data = Ext.decode(response.responseText);
// 处理加载到的数据
},
failure: function(response, opts) {
Ext.Msg.alert('Error', 'Failed to load data');
}
});
响应式交互调整 ：对于响应式设计，ExtJS允许通过 responsiveConfig 来根据不同的屏幕尺寸或方向调整组件配置：
Ext.create('Ext.Container', {
responsiveConfig: {
'width < 600': {
items: [
// 在小屏幕下使用的配置
{
xtype: 'button',
text: 'Small Screen Button'
}
]
},
'width >= 600': {
items: [
// 在大屏幕下使用的配置
{
xtype: 'button',
text: 'Large Screen Button'
}
]
}
}
});
通过上述步骤和代码示例，你将能够搭建ExtJS开发环境，并开始实现应用的基本交互。下一章我们将深入探讨ExtJS中数据管理与存储的最佳实践。
本文还有配套的精品资源，点击获取
简介：ExtJS是一个使用JavaScript构建富客户端Web应用的框架，提供了完整的组件模型和数据处理机制。本课程分为四个部分，引导你从基础理念到核心实践技巧，逐步掌握ExtJS开发。学习内容涵盖MVC模式应用、环境搭建、用户界面组件使用，以及创建第一个ExtJS应用。课程旨在帮助开发者快速上手ExtJS，并在实践中深入理解前端开发。
本文还有配套的精品资源，点击获取