简介：ExtJS 4.1是一个为Web应用开发设计的强大JavaScript框架，它包含丰富的组件库、布局管理工具、数据绑定以及强大的API，支持中文文档和示例，降低中文用户的使用门槛。本资源集合详细介绍组件化开发、数据绑定、布局管理、数据流管理机制、事件系统、Ajax与JsonP使用、主题和皮肤定制、API文档以及示例代码，帮助开发者提升Web应用开发能力。
1. Extjs4.1版本中文版概览
Extjs4.1版本作为Sencha公司的经典之作，是Web前端开发领域中一个重要的JavaScript框架。它以其强大的组件化特性、丰富的图表库和高度的定制性，在企业级应用中备受青睐。在本章节中，我们将简要了解Extjs4.1中文版的特点和基本构成。
1.1 Extjs4.1中文版特性
Extjs4.1中文版是基于MVC架构进行设计的，其最大的特点是拥有大量的预定义组件，极大降低了开发复杂界面的难度。中文版的推出，极大地降低了国内开发者的语言障碍，使得更多开发者能够参与到Extjs的学习与使用中来。
1.2 构成和组件概览
Extjs4.1中文版的构成主要包括了丰富的UI组件库、强大的数据处理和绑定机制、以及对DOM操作的封装。此外，还有性能优化、主题定制、国际化支持等特性，让开发者可以轻松构建出跨浏览器和跨平台的复杂界面。
在接下来的章节中，我们将深入探讨Extjs4.1的组件化开发实践、数据绑定、事件系统、Ajax交互以及自定义主题等核心内容。我们将通过示例和代码分析，向读者展示如何高效利用Extjs4.1构建出稳定且具有良好用户体验的Web应用。
2. 组件化开发实践
2.1 组件化思想简介
2.1.1 组件化开发的意义和优势
组件化开发已经成为前端开发领域的一种主流实践。其核心思想是将一个复杂的界面拆分成多个独立的、可复用的组件。这种方法不仅提高了代码的可维护性，还增强了项目的可扩展性和可重用性。在Extjs中，组件化不仅可以提高开发效率，还可以通过组件的组合和嵌套，构建出结构清晰、易于理解的应用程序界面。
组件化的优势主要体现在以下几个方面：
- 复用性 ：组件一旦创建便可以在不同的地方重复使用，节省开发时间。
- 模块化 ：清晰的模块边界有助于理解和维护，降低系统的复杂度。
- 一致性 ：使用统一的组件可以保持界面的一致性，提高用户体验。
- 灵活性 ：组件的独立性使得在不同项目或项目中的不同部分之间可以灵活替换和调整。
2.1.2 Extjs中的组件概念和结构
在Extjs框架中，组件（Component）是构建用户界面的基础。Extjs将组件作为所有界面元素的基类，无论是简单的按钮，还是复杂的网格面板，都可以看作是组件的一种表现形式。
Extjs中的组件结构可以分为以下几个层次：
- Component ：所有Extjs组件的基类，提供了基本的属性和方法，如配置、渲染、事件等。
- Container ：继承自Component，用于包含其他组件的容器。常见的Container包括Window, Panel, TabPanel等。
- CompositeElement ：一个特殊的容器，它能够包含多个同类型的子组件。例如，可以使用CompositeElement来创建一个复选框组（CheckboxGroup）。
- Field ：表单组件的基类，提供了表单验证、数据绑定等表单特有的功能。
// 示例：创建一个Extjs的Panel组件
Ext.create('Ext.panel.Panel', {
title: 'My Panel',
html: 'This is a simple panel',
width: 300,
height: 200,
renderTo: Ext.getBody() // 渲染到页面的body元素中
});
在上述代码示例中，创建了一个Panel组件，并通过配置项设置了标题、内容、宽度、高度，并指定了渲染目标。这正是组件化思想在Extjs中的具体体现。
2.2 常用组件使用方法
2.2.1 基础界面组件的创建与布局
Extjs中的基础界面组件，如按钮（Button）、面板（Panel）、标签页（TabPanel）等，是构成用户界面的基本元素。使用这些组件，开发者可以快速搭建起应用程序的界面框架。
创建基础界面组件通常涉及以下几个步骤：
- 引入组件类 ：通过 Ext.create 方法创建组件实例。
- 配置组件属性 ：设置组件的标题、宽度、高度等属性。
- 组织布局方式 ：使用布局管理器（Layout）来组织容器内组件的位置和尺寸。
- 渲染组件 ：指定组件渲染的目标位置。
Ext.onReady(function() {
// 创建一个窗口组件
var win = Ext.create('Ext.window.Window', {
title: '基础窗口',
width: 300,
height: 200,
layout: 'fit', // 使用fit布局
items: [{
xtype: 'panel',
html: '面板内容',
padding: 10
}],
buttons: [{
text: '确认',
handler: function() {
this.up('window').close(); // 关闭窗口
}
}]
});
win.show(); // 显示窗口
});
2.2.2 复杂组件的定制与扩展
在实际应用中，仅仅使用基础组件并不能完全满足需求，常常需要对组件进行定制和扩展以适应特定的场景。Extjs提供了丰富的配置项和插件（Plug-in）系统，使得开发者可以根据需要定制组件的行为和外观。
组件的定制和扩展一般包括以下几点：
- 插件的使用 ：通过插件来增加组件的功能，如拖拽（Draggable）、工具提示（Tip）等。
- 自定义模板（Template） ：通过定义模板来自定义组件的HTML结构。
- 扩展组件类 ：通过继承基础组件类并重写方法来创建自定义组件。
// 示例：为Panel添加一个自定义插件
Ext.define('MyPlugin', {
extend: 'Ext.plugin.Writer',
alias: 'plugin.mywriter',
write: function(panel, writer) {
alert('数据写入操作');
}
});
var panel = Ext.create('Ext.panel.Panel', {
title: '自定义插件面板',
html: '面板内容',
plugins: ['mywriter']
});
2.2.3 组件间的数据交互和通信机制
在复杂的前端应用中，组件间的数据交互是不可避免的。Extjs提供了一套完整的机制来处理组件之间的数据交互和通信，主要包括事件（Event）系统和数据绑定（Data Binding）。
组件间的通信主要通过以下几种方式实现：
- 事件监听与触发 ：组件可以通过监听事件来响应用户的操作，如按钮点击、表单提交等。
- 数据绑定 ：通过数据绑定将组件的UI状态与模型（Model）的数据同步，保持数据的一致性。
- 全局状态管理 ：使用全局的Store或Application对象来存储和管理共享数据。
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'email'],
data: [{
name: 'Lisa',
email: 'lisa@simpsons.com'
}]
});
var grid = Ext.create('Ext.grid.Panel', {
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email'
}],
store: store,
height: 200,
width: 400
});
在该示例中，创建了一个包含数据的Store，然后创建了一个Grid面板并将其与该Store绑定。当Store中的数据发生变化时，Grid面板会自动更新显示的内容。这种数据交互和通信机制简化了组件之间的同步操作，保证了数据的一致性和实时性。
接下来的章节，我们将深入了解Extjs中的数据绑定机制。
3. 数据绑定机制
在现代Web应用中，数据绑定是一个核心概念，它指的是应用的界面元素如何与数据源保持同步。为了创建动态和响应式用户界面，开发者需要一种方法来连接用户界面上的元素与后台数据模型，使得任何数据的变化都能实时地反映到界面上，而界面的改变也能相应地更新数据源。Extjs作为一个成熟的前端框架，提供了一整套的数据绑定机制，使得开发者可以非常容易地实现上述功能。
3.1 数据绑定原理
3.1.1 数据绑定的定义与作用
数据绑定是一种机制，它定义了数据源和视图之间的关系。在Extjs中，数据绑定不仅仅是变量之间的简单关联，它还包括了数据变化的监听，视图的更新以及属性的变化同步。数据绑定的主要作用可以概括为：
- 解耦数据与视图 ：数据绑定能够将数据源和视图分离，使得开发者可以独立地管理和修改它们，从而降低了代码的复杂度。
- 响应式更新 ：当数据源发生变化时，界面自动更新，无需手动干预。这极大地提高了用户体验和开发效率。
- 支持双向绑定 ：某些数据绑定还支持双向绑定，即视图的更改能够自动反映到数据模型上，这是MVVM模式的核心特性之一。
3.1.2 数据绑定在Extjs中的实现方式
在Extjs中，数据绑定主要通过组件的 data 属性和 binding 属性实现。 data 属性允许定义数据模型，而 binding 属性则是将组件属性与数据模型关联起来。使用这些属性，开发者可以轻松创建具有以下特点的绑定：
- 单向绑定 ：视图从数据源获取数据，数据改变时视图更新。
- 双向绑定 ：视图的改变会同步到数据源，实现数据和视图的双向同步。
数据绑定在Extjs中的另一个关键点是 ViewModel 的引入。 ViewModel 是一个中心化的数据存储，允许在应用的不同组件之间共享数据，而不必直接访问数据源。这为数据绑定提供了极大的灵活性。
3.2 数据视图与模型的关联
3.2.1 模型(Model)与视图(View)的关系
在Extjs中，模型( Model )代表了应用的数据，而视图( View )则是数据在用户界面上的展示。这两者之间的关联是通过数据绑定建立起来的，它们之间的同步是数据驱动视图更新的核心。
模型通常包含了一些字段( fields )，这些字段表示了模型的属性。视图通过绑定模型的字段，当字段的值发生变化时，绑定的视图也会更新。这种机制简化了应用的逻辑，开发者不需要手动更新DOM，框架会自动处理数据变化后视图的更新。
3.2.2 视图更新机制与数据变更同步
Extjs为开发者提供了声明式的绑定方式，这意味着开发者只需指定视图组件应该显示哪些数据，并且当这些数据发生变化时，视图会自动更新。这种更新机制在后台数据发生变化时尤为有用，开发者无需编写额外的代码来更新视图。
同步机制依赖于Extjs的观察者模式。当一个 ViewModel 中的数据发生变化时，所有依赖于这个数据的视图组件都会收到通知，并且自动进行更新。这种模式不仅使得代码更加简洁，也极大提升了应用的性能。
为了更好地理解数据绑定机制和视图更新，我们可以考虑下面的一个简单示例：
Ext.define('MyApp.view.MyViewModel', {
extend: 'Ext.app.ViewModel',
data: {
message: 'Hello World'
}
});
Ext.define('MyApp.view.MyView', {
extend: 'Ext.Container',
viewModel: {
type: 'my'
},
items: [
{
xtype: 'displayfield',
bind: '{message}'
}
]
});
在这个例子中， MyView 中的 DisplayField 组件绑定了 MyViewModel 的 message 数据项。当 message 的值改变时， DisplayField 组件会自动更新显示的内容。
3.3 数据绑定的深入理解和应用
3.3.1 数据绑定的高级用法
除了基础的数据绑定外，Extjs还提供了一些高级的数据绑定功能，允许开发者进行更复杂的操作。例如，可以对数据进行计算并生成虚拟字段，这样即使数据模型中不存在这些数据，视图也可以显示它们。还可以通过监听器实现自定义的绑定逻辑，例如在数据变化时执行特定的函数，或者当特定的条件被满足时更新视图。
3.3.2 数据绑定实践中的注意事项
在实践应用数据绑定时，开发者需要注意几个关键点：
- 性能 ：数据绑定虽然方便，但也可能成为性能瓶颈。应尽量减少不必要的绑定，并合理利用缓存。
- 调试和测试 ：当数据绑定变得复杂时，调试和测试可能会变得困难。使用断点、日志记录和单元测试来确保绑定按预期工作。
- 绑定范围 ：合理规划数据绑定的范围，避免过度依赖全局
ViewModel，这样可以降低组件之间的耦合度。
通过以上章节的介绍，我们可以看到Extjs提供的数据绑定机制为开发者提供了一种高效、简洁的方式，将应用中的数据模型和视图组件紧密连接起来。这不仅有助于提升开发效率，还有助于创建响应式更强、用户交互体验更佳的应用程序。
4. 布局管理策略
布局管理是前端开发中的一项重要技术，它是构建复杂应用界面的关键。Extjs 提供了一系列布局管理工具来帮助开发者创建出既美观又功能强大的用户界面。本章节将深入探讨 Extjs 中布局管理的策略，包括布局组件的分类、布局策略的初始化与配置以及响应式布局的设计。
4.1 布局管理基础
4.1.1 布局组件的分类与特点
Extjs 提供了多种布局组件，它们各自适用于不同的布局场景，并拥有独特的特点和使用方式。例如：
-
Border Layout (border) : 这种布局将容器分为五个区域：北（North）、南（South）、东（East）、西（West）和中心（Center）。各个区域之间可以灵活调整大小，并且可以放置各种组件。这种布局适用于复杂的界面设计，能够很好地组织大量组件的布局结构。
-
Column Layout (column) : 该布局将容器分割为多个列，每列可以独立管理，适用于需要多列并列显示的情况。列宽可以通过配置来固定或设置为动态比例。
-
Card Layout (card) : 此布局用于显示一系列的卡片，每次只显示一个卡片。用户可以通过切换显示不同的卡片，这种方式特别适合向用户提供类似于步骤指导的交互。
-
Form Layout (form) : 针对表单设计的布局，能够自动调整表单元素的宽度和位置，保证表单界面的整齐美观。
这些布局组件的特点与使用场景各有不同，熟悉它们将有助于设计出更加符合实际需求的用户界面。
4.1.2 布局策略的初始化与配置
布局策略的初始化与配置是创建复杂用户界面的基石。在 Extjs 中，每个布局的初始化和配置都有其特定的方式。以 Border Layout 为例，初始化和配置的基本步骤如下：
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
region: 'north', // 北部区域
html: 'North Region'
}, {
region: 'south',
html: 'South Region'
}, {
region: 'east',
html: 'East Region',
width: 100 // 设置东侧区域的宽度
}, {
region: 'west',
html: 'West Region',
width: 200 // 设置西侧区域的宽度
}, {
region: 'center',
html: 'Center Region'
}]
});
通过上述代码，我们可以创建一个包含五个区域的布局，并且通过 region 配置项为每个区域指定了位置。这是布局初始化的基础，也是扩展布局功能的关键起点。
4.2 布局的响应式设计
4.2.1 响应式布局的原理与实现
响应式布局是一种设计方法，它让应用程序能够根据不同屏幕尺寸或设备类型（如桌面、平板和手机）自动调整布局。Extjs 支持通过不同的配置来实现响应式布局。
要创建响应式布局，通常需要根据目标设备的特性编写特定的 CSS 或使用 Extjs 提供的工具进行布局配置。例如，可以使用 ResponsiveConfig 来根据设备的宽度来调整布局属性：
Ext.create('Ext.container.Viewport', {
layout: 'border',
responsiveConfig: {
'width < 500': { // 当视口宽度小于500像素时
items: [{
region: 'center',
html: 'Mobile Center'
}]
},
'width >= 500': { // 当视口宽度大于或等于500像素时
items: [{
region: 'center',
html: 'Desktop Center'
}]
}
}
});
在这个例子中， responsiveConfig 配置项用于定义一个视口宽度的变化范围，从而触发相应布局调整的逻辑。
4.2.2 不同设备下的布局适配技巧
为了适配不同设备，开发者需要了解一些布局适配的技巧：
- 使用百分比宽度 : 代替固定宽度的配置，利用百分比可以使得组件的宽度根据其父容器动态调整。
- 媒体查询 (Media Queries) : 通过 CSS3 媒体查询来定义针对特定屏幕尺寸的样式。
- 隐藏或显示组件 : 在不同视口宽度下，通过显示或隐藏特定组件来优化布局。
- 动态添加 CSS 类 : 通过 JavaScript 动态地为元素添加或移除 CSS 类，来应用或取消特定的样式规则。
这些技巧可以灵活运用，以适应广泛的不同尺寸和分辨率的屏幕设备。以下是一个通过 CSS 媒体查询实现响应式布局的简单例子：
/* 针对大屏幕的样式 */
@media (min-width: 1200px) {
.content {
width: 80%;
margin: 0 auto;
}
}
/* 针对平板屏幕的样式 */
@media (min-width: 768px) and (max-width: 1199px) {
.content {
width: 60%;
margin: 0 auto;
}
}
/* 针对手机屏幕的样式 */
@media (max-width: 767px) {
.content {
width: 90%;
}
}
在这个例子中， .content 类的宽度会根据不同的屏幕尺寸而调整，确保在各种设备上都能获得良好的显示效果。
通过本章节的介绍，我们已经从基础开始，详细探讨了 Extjs 中布局管理的策略。接下来的章节，我们将继续深入探讨 Extjs 的 Model, Store, Proxy 数据流以及事件系统通信，为构建高效且易于维护的复杂应用打下坚实的基础。
5. Model, Store, Proxy数据流
5.1 数据流的基本概念
5.1.1 Model, Store, Proxy的定义和职能
Model、Store和Proxy是Extjs中处理数据流的核心组件。它们共同协作，实现了数据的展示、管理以及与后端的交互。
-
Model 是Extjs中用来定义应用数据结构的对象。它通常包含一组字段（fields）配置，这些字段定义了数据模型的属性，每个字段都关联一个数据类型。Model负责处理数据对象，例如获取、设置数据，以及监听数据变化。
-
Store 是一个集合，用于存储Model实例，可以理解为数据的容器。Store提供了对数据集的各种操作，如排序、过滤和分页等。它还可以配置为从服务器端加载数据，这时候Proxy组件就发挥了作用。
-
Proxy 作为数据交互的桥梁，负责与服务器端通信。它可以配置为不同的类型，如AjaxProxy、JsonProxy等，根据服务器端的接口进行数据的加载与保存。它管理着数据的加载、存储、序列化和反序列化等过程。
5.1.2 数据流的工作流程和作用范围
Extjs框架通过Model, Store和Proxy创建了一个高度可配置和可复用的数据流工作流程。其工作流程大致如下：
- 数据定义 : 通过Model定义应用的数据结构。
- 数据存储 : 创建一个Store来管理Model实例的集合。
- 数据交互 : 配置Proxy来处理与服务器端的请求，实现数据的加载和提交。
- 数据操作 : 在应用中对Store中的数据进行操作，如添加、删除记录。
- 数据展示 : 将操作后的数据展示在用户界面上。
数据流的作用范围涵盖从服务器获取数据、在本地缓存和管理数据，以及更新用户界面。
5.2 数据管理实践
5.2.1 Store的创建、读取、更新和删除
Store的创建
要创建一个Store，首先需要定义与之关联的Model，然后通过Ext.create或Ext.define创建Store实例。
Ext.define('MyApp.model.MyModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'}
]
});
var myStore = Ext.create('Ext.data.Store', {
model: 'MyApp.model.MyModel',
data: [
{id: 1, name: 'Sample'},
{id: 2, name: 'Example'}
]
});
Store的读取
通过Store的 load 方法加载数据，通常与Proxy配合使用，可以从服务器获取数据。
myStore.load();
Store的更新和删除
更新数据可以通过 update 或 remove 方法，或者直接修改Model实例的数据后再调用 commit 方法。
var record = myStore.first();
record.set('name', 'New Name');
record.commit();
删除数据使用 remove 方法。
myStore.remove(record);
5.2.2 Model与Proxy的配置与使用
Model和Proxy的配置是Store能够与服务器交互的关键。
Model配置
Model配置定义了数据模型的基本结构。
Ext.define('MyApp.model.MyModel', {
extend: 'Ext.data.Model',
idProperty: 'id', // 设置Model的唯一标识符
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'}
]
});
Proxy配置
Proxy配置定义了Store如何与服务器通信。
var store = Ext.create('Ext.data.Store', {
model: 'MyApp.model.MyModel',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'data.php', // 指定请求的URL
reader: {
type: 'json',
rootProperty: 'data' // 数据在响应中的位置
}
}
});
5.2.3 数据校验和同步机制
数据校验确保了数据的有效性，在Store中的数据被提交到服务器之前，可以先进行校验。
var record = myStore.getAt(0);
var errors = record.validate();
if (!errors.isValid()) {
errors.each(function(msg) {
console.log(msg);
});
}
同步机制包括 commit 和 rollback 方法，用于提交和回滚更改。
record.commit(); // 提交更改
record.rollback(); // 回滚更改
Extjs的Model, Store, Proxy数据流机制为企业级应用提供了强大的数据管理能力，使得在构建复杂数据驱动的Web应用时，能以一种高效、可预测和易于维护的方式进行。
6. 事件系统通信
6.1 事件系统概述
6.1.1 事件驱动模型的基本原理
事件驱动模型是一种广泛应用于现代前端开发中的编程范式，它依靠事件的触发来驱动程序的运行。在Extjs框架中，事件驱动模型允许开发者以声明式的方式编写应用程序，这意味着开发者只需要关注于定义事件的处理逻辑，而无需担心调用顺序或者执行流程。
在Extjs中，几乎所有的UI组件都是基于事件驱动的。例如，当用户点击一个按钮时，按钮组件会触发一个 click 事件，而开发者可以为这个事件编写一个事件处理器来响应用户的行为。
6.1.2 Extjs中的事件类型与处理机制
Extjs支持多种事件类型，包括但不限于：
- UI事件 ：如 click , doubleclick , mouseover , mouseout 等，这些通常由用户直接操作UI元素触发。
- DOM事件 ：如 load , resize , scroll 等，这些与DOM元素的生命周期或状态变化相关。
- 自定义事件 ：开发者可以基于Extjs事件系统创建自定义事件，用于特定的业务逻辑触发。
Extjs的事件处理机制基于发布-订阅模式，组件可以在注册时定义事件监听器，当事件发生时，监听器会被触发，执行相应的回调函数。例如，我们可以在组件初始化时绑定一个 click 事件监听器：
var button = Ext.create('Ext.Button', {
text: 'Click me',
renderTo: Ext.getBody(),
handler: function() {
// 当点击事件发生时，此函数被调用
alert('Button clicked!');
}
});
在上面的示例中， handler 属性即为点击事件的监听器回调函数，当按钮被点击时，会显示一个警告框。
6.2 事件的绑定与解绑
6.2.1 事件的监听和触发方式
事件的监听在Extjs中是通过 on 方法来实现的。除了直接在组件创建时定义事件监听器，我们也可以动态地添加事件监听器到现有的组件实例上：
button.on('click', function() {
alert('Button clicked again!');
});
事件的触发方式则相对简单，通过 fireEvent 方法可以在组件内部手动触发一个事件：
button.fireEvent('click');
此外，Extjs还支持在类的原型上声明监听器，这样所有该类的实例都会共享同一个监听器逻辑：
Ext.define('MyApp.MyButton', {
extend: 'Ext.Button',
alias: 'widget.mybutton',
listeners: {
click: function() {
alert('Button clicked on the class!');
}
}
});
6.2.2 事件上下文的作用和管理
事件上下文是指在事件处理函数中可以访问到的 this 关键字的指向。在Extjs中，事件监听器的上下文默认指向触发事件的组件实例，这使得我们能够轻松访问组件的方法和属性：
Ext.create('Ext.Button', {
text: 'Context button',
renderTo: Ext.getBody(),
handler: function() {
// 'this' 指向按钮实例
this.setText('Context changed!');
}
});
在这个例子中， this.setText('Context changed!') 能够直接调用 setText 方法，这是因为 this 指向了按钮组件实例。
事件上下文可以通过 scope 属性进行管理，允许开发者指定 this 的指向，如下示例将事件处理函数的上下文指向了全局 window 对象：
button.on('click', function() {
// 'this' 指向window
alert('Button clicked with scope set to window!');
}, null, { scope: window });
使用 scope 属性进行上下文管理有助于在复杂的事件监听器中避免上下文错位的问题，并能够使得事件处理函数更加灵活和可重用。
通过以上内容，我们已经介绍完了事件系统通信的基本概念和操作，接下来的章节中，我们将进一步探讨如何在实际开发中通过事件系统实现更复杂的应用场景和交互逻辑。
7. Ajax和JsonP数据交互
7.1 数据交互技术分析
7.1.1 Ajax与JsonP技术的原理和应用场景
Ajax（Asynchronous JavaScript and XML）允许Web页面无需重新加载即可更新，使得数据交互更加高效。它通常与服务器进行数据交换，使用JavaScript来解析XML文档，但同样可以处理JSON数据。Ajax技术通过创建XMLHttpRequest对象来实现与服务器的数据交换，支持GET、POST等HTTP请求。
JsonP（JSON with Padding）则主要用于解决跨域请求限制的问题。由于同源策略的限制，浏览器不允许跨域请求。JsonP通过动态创建 <script> 标签并将其插入到HTML文档中，从而绕过同源策略限制。服务器返回的是一个函数调用，并且该函数名称是在客户端指定的。当浏览器加载这段脚本后，就会执行这个函数，而函数的参数就是从服务器返回的数据。
在Extjs中，Ajax和JsonP技术被封装成更为方便的接口，使得开发者可以更简便地进行数据交互。
7.1.2 Extjs中Ajax和JsonP的封装与实现
Extjs中处理Ajax请求的组件是 Ext.Ajax ，它封装了原生的XMLHttpRequest对象，提供了更为简洁和一致的方法来执行各种HTTP请求。例如：
Ext.Ajax.request({
url: 'http://example.com/api/data',
method: 'GET',
success: function(response){
console.log(response.responseText);
},
failure: function(response){
console.log('Request Failed');
}
});
在Extjs中，可以使用 Ext.data.JsonP 来处理JsonP请求。需要注意的是，Extjs的JsonP封装使用了一个全局的回调函数，因此需要确保服务器端返回的JSON数据格式中包含这个函数名称：
Ext.data.JsonP.request({
url: 'http://example.com/api/data?callback=?',
callbackKey: 'callback', // 默认值
success: function(response){
console.log(response);
},
failure: function(response){
console.log('JsonP Request Failed');
}
});
7.2 数据交互实践操作
7.2.1 异步请求的配置与发送
在实际应用中，创建一个异步请求需要设置多个参数来配置请求的行为。如请求的URL、请求方法、请求头信息、参数传递、超时设置、错误处理等。Extjs的 Ext.Ajax 提供了这些配置项：
Ext.Ajax.request({
url: 'http://example.com/api/update',
method: 'POST',
jsonData: {
id: 1,
value: 'New Value'
},
headers: {
'Content-Type': 'application/json'
},
timeout: 30000, // 设置超时为30秒
failure: function(response){
console.log('Request failed with status code: ' + response.status);
}
});
7.2.2 响应数据的处理和展示
服务器返回的数据处理通常是通过回调函数来实现的。在Extjs中，成功的回调函数会接收到一个对象，其中包含了响应文本、响应头等信息。在Extjs的视图组件中，通常会使用数据绑定和Store来展示这些数据。
例如，如果服务器返回的数据格式如下：
{
"success": true,
"data": [
{"id": 1, "name": "Alice"},
{"id": 2, "name": "Bob"}
]
}
可以通过以下方式处理并展示数据：
success: function(response){
var jsonData = Ext.JSON.decode(response.responseText);
if(jsonData.success){
// 假设已经存在一个名为 'store' 的数据存储
store.removeAll();
store.add(jsonData.data);
} else {
// 处理错误情况
console.log('Failed to fetch data');
}
},
通过以上内容，您可以理解Extjs中Ajax和JsonP数据交互的原理、实现方式和应用实践。在第八章中，我们将进一步探讨如何对Extjs应用进行多主题与皮肤自定义。
简介：ExtJS 4.1是一个为Web应用开发设计的强大JavaScript框架，它包含丰富的组件库、布局管理工具、数据绑定以及强大的API，支持中文文档和示例，降低中文用户的使用门槛。本资源集合详细介绍组件化开发、数据绑定、布局管理、数据流管理机制、事件系统、Ajax与JsonP使用、主题和皮肤定制、API文档以及示例代码，帮助开发者提升Web应用开发能力。
扫一扫
946
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
