简介：ExtJS 3.2.0 是一个为构建富客户端Web应用程序设计的强大JavaScript框架，它提供了一系列优化和增强的组件、类库和功能。此版本遵循MVC设计模式，拥有丰富的UI组件如Grid、Panel、Window等，并通过Fit、Border、Table等布局管理机制满足不同界面需求。事件处理系统支持高效的组件间通信，Store概念实现了动态数据管理和实时更新。ExtJS 3.2.0 还包括强大的Ajax功能，简化了服务器交互。官方API文档提供了详尽的类、方法、属性和事件说明，是开发者不可或缺的学习资源。 
1. ExtJS 3.2.0 概述
1.1 ExtJS简介
ExtJS是一个基于JavaScript的框架，用于构建富互联网应用程序（RIA），它提供了一套丰富的UI组件，使得开发者能够快速创建高性能、跨浏览器的用户界面。ExtJS 3.2.0版本是该框架的一个重要里程碑，提供了大量的改进和新功能。
1.2 ExtJS的历史与发展
ExtJS自2006年发布以来，经历了多个版本的迭代，每个版本都在性能、可用性和扩展性方面进行了提升。ExtJS 3.2.0不仅修复了大量bug，还增加了一些新组件和功能，使得开发更加灵活和强大。
1.3 ExtJS 3.2.0的特点
ExtJS 3.2.0的特点包括丰富的组件库、支持多种数据管理方式、强大的布局管理功能以及对Ajax调用的良好支持。它采用MVC设计模式，使得代码结构清晰，易于维护和扩展。
// 示例代码：引入ExtJS 3.2.0库
<script type="text/javascript" src="ext-3.2.0/resources/ext-all.js"></script>
通过上述简介，我们可以看出ExtJS 3.2.0是一个功能强大且成熟的框架，适合用于开发复杂的前端应用程序。在接下来的章节中，我们将深入探讨其核心组件、用户界面组件、布局管理机制、事件处理、数据管理和开发资源等方面。
2. 核心组件与MVC设计模式
2.1 ExtJS的核心组件
2.1.1 框架的核心组件介绍
ExtJS框架的核心组件为构建用户界面提供了基本的构建块。这些组件包括但不限于数据视图（如Grid和Tree），表单元素（如Text Fields和ComboBox），以及一些容器组件（如Panels和Windows），这些组件通过ExtJS提供的类和方法进行实例化和配置。
ExtJS的核心组件设计为高度可配置和可定制，允许开发者通过简单的配置或扩展实现复杂的功能。例如，一个Grid组件可以通过配置列和数据模型来展示和操作复杂的数据集。这些核心组件是ExtJS强大功能的基础，也是构建复杂用户界面的基石。
2.1.2 核心组件的功能和作用
核心组件的主要功能是提供用户界面的基础元素，它们可以被组织成复杂的布局，以满足不同的业务需求。例如，Panel组件可以包含其他组件如Grid和Form，通过嵌套这些组件，开发者可以创建多层级的用户界面结构。
核心组件的作用不仅限于展示数据和接收用户输入，它们还提供了事件处理和交互逻辑的能力。这些组件的配置和扩展使得开发者能够实现动态的用户界面响应和高效的业务逻辑处理。
2.2 MVC设计模式
2.2.1 MVC设计模式的基本概念
MVC（Model-View-Controller）是一种常见的软件设计模式，用于分离应用程序的不同方面：数据模型（Model）、用户界面（View）和控制逻辑（Controller）。在MVC设计模式中，Model负责数据和业务逻辑，View负责展示数据，Controller负责处理用户输入和更新Model与View。
MVC设计模式的优点在于它可以提高代码的可维护性和可扩展性，同时促进了组件之间的解耦，使得每个组件都可以独立地变化而不影响其他组件。这种模式特别适合于复杂的Web应用程序，因为它允许团队成员并行开发不同部分，而不会相互干扰。
2.2.2 MVC设计模式在ExtJS中的应用
在ExtJS中，MVC设计模式得到了充分的体现和应用。ExtJS的组件通常被划分为View和Controller的层次，而数据处理和存储逻辑则通过Model来实现。ExtJS的Store类是一个特殊的Model，它提供了数据的加载、同步和过滤等功能，使得数据处理变得简单而高效。
例如，一个Grid组件可以被视为一个View，它展示了Store中的数据。当用户与Grid交互时，比如点击一个行，相应的事件会被触发，这些事件由Controller来处理，Controller会根据用户的操作来更新Store或View。这种分离确保了视图和数据处理逻辑的清晰分离，使得应用程序的维护和扩展变得更加容易。
2.3 核心组件与MVC设计模式的关系
2.3.1 核心组件在MVC设计模式中的角色
在ExtJS中，核心组件在MVC设计模式中扮演着View的角色。这些组件通过配置和事件处理机制与Controller进行交互，而数据处理则通过Model来完成。例如，一个Form组件可以包含多个字段，这些字段直接与Model中的数据进行绑定，当用户填写表单时，数据会自动更新到Model中。
核心组件通过与Controller的交互，响应用户的输入和操作。Controller负责解释用户的操作，并更新Model或View。例如，当用户提交一个Form时，Controller会接收到提交事件，并执行相应的逻辑，比如验证数据的有效性，然后将数据保存到服务器或更新View。
2.3.2 如何利用核心组件实现MVC设计模式
要利用ExtJS的核心组件实现MVC设计模式，开发者需要理解每个组件的角色和如何与Model和Controller交互。首先，定义数据模型（Model）和存储（Store），并配置数据的加载和同步逻辑。然后，创建View，比如Grid或Form，并将它们与Model进行绑定。
接下来，编写Controller来处理用户输入和视图事件。Controller可以包含多种类型的处理函数，比如事件监听器（listeners）和动作（actions）。通过这些处理函数，Controller可以更新Model或View，或者执行其他的业务逻辑。
最后，通过合理的配置和事件处理，开发者可以实现一个响应用户操作、动态更新数据和视图的Web应用程序。这种方式不仅使得应用程序的结构清晰，而且提高了代码的复用性和可测试性。
3. 用户界面组件
ExtJS 提供了丰富的用户界面组件，使得开发者可以轻松构建复杂的桌面风格应用程序。在本章节中，我们将详细介绍 ExtJS 中的几个核心用户界面组件，包括它们的基本用法和高级功能。我们将深入探讨 Grid 组件、Panel 组件、Window 组件以及 Menu 和 Form 组件的功能和用法。
3.1 Grid 组件
Grid 组件是 ExtJS 中最常用的组件之一，它提供了一种强大的方式来展示和操作表格数据。Grid 组件不仅可以显示数据，还可以进行排序、分页、过滤等操作。
3.1.1 Grid 组件的基本用法
首先，我们来了解 Grid 组件的基本用法。在 ExtJS 中，Grid 组件通常由以下几个主要部分组成：
-
GridPanel：这是 Grid 组件的主体。 -
ColumnModel：定义了 Grid 中的列。 -
Store：提供了 Grid 的数据。
以下是一个简单的 Grid 组件的示例代码：
// 创建一个 Store 实例
var store = Ext.create('Ext.data.Store', {
fields: ['id', 'name', 'price'],
data: [
{ id: 1, name: 'Product 1', price: 10 },
{ id: 2, name: 'Product 2', price: 20 }
]
});
// 定义列
var columns = [
{ header: 'ID', dataIndex: 'id' },
{ header: 'Name', dataIndex: 'name' },
{ header: 'Price', dataIndex: 'price' }
];
// 创建 GridPanel 实例
var grid = Ext.create('Ext.grid.GridPanel', {
title: 'Products',
store: store,
columns: columns
});
// 将 GridPanel 添加到视图中
Ext.application({
name: 'GridExample',
launch: function() {
grid.render('grid-example');
}
});
3.1.2 Grid 组件的高级功能
Grid 组件提供了许多高级功能，例如排序、分页、过滤、编辑等。以下是一些高级功能的示例：
// 添加排序功能
store.sort('price', 'ASC');
// 添加分页功能
store一页加载10条数据
var pageSize = 10;
var page = 1;
store.load({
params: {
start: (page - 1) * pageSize,
limit: pageSize
}
});
// 添加过滤功能
store.filter('price', '10');
// 添加编辑功能
grid.on('rowcontextmenu', function(grid, record, tr, index, event) {
var menu = new Ext.menu.Menu({
items: [{
text: 'Edit',
handler: function() {
var editor = new Ext.Editor({
allowBlank: false
});
var field = new Ext.form.field.Text({
name: 'name',
value: record.get('name')
});
editor.startEdit(tr, field);
editor.on('complete', function(ed, value) {
record.set('name', value);
store.sync();
});
}
}]
});
menu.showAt(event.getXY());
});
3.1.3 Grid 组件的高级功能分析
在上述代码中，我们首先演示了如何为 Grid 组件添加排序、分页和过滤功能。这些功能是 Grid 组件的基本功能，可以极大地提高用户对数据的操作效率。
在添加排序功能时，我们使用了 store.sort 方法，并指定了排序的字段和排序方向。在添加分页功能时，我们使用了 store.load 方法，并通过 params 参数传递了分页信息。在添加过滤功能时，我们使用了 store.filter 方法，并指定了过滤条件。
此外，我们还演示了如何为 Grid 组件添加行上下文菜单，并在菜单中添加了一个编辑操作。当用户右键点击某一行时，会显示一个包含编辑选项的菜单。点击编辑选项后，会弹出一个文本输入框，允许用户编辑该行的数据。当用户完成编辑并提交后，会调用 store.sync 方法将更改同步到服务器。
3.2 Panel 组件
Panel 组件提供了一个可展开/折叠的容器，用于展示信息或包含其他组件。它通常用于创建复杂的布局。
3.2.1 Panel 组件的基本用法
下面是一个 Panel 组件的基本用法示例：
var panel = Ext.create('Ext.panel.Panel', {
title: 'My Panel',
html: 'This is a panel',
width: 300,
height: 200
});
panel.render('panel-example');
3.2.2 Panel 组件的高级功能
Panel 组件支持多种高级功能，例如折叠、拖拽、最大化/最小化等。以下是一些高级功能的示例：
// 添加折叠功能
panel.collapsible = true;
panel.titleCollapse = true;
// 添加拖拽功能
panel.draggable = true;
// 添加最大化/最小化功能
panel.maximizable = true;
panel.minimizable = true;
3.2.3 Panel 组件的高级功能分析
在上述代码中，我们首先演示了如何为 Panel 组件添加折叠功能。我们设置了 collapsible 属性为 true ，表示 Panel 可以折叠。 titleCollapse 属性允许用户通过点击标题来折叠 Panel。
我们还演示了如何为 Panel 组件添加拖拽功能。我们设置了 draggable 属性为 true ，表示 Panel 可以被拖拽。
最后，我们演示了如何为 Panel 组件添加最大化/最小化功能。我们设置了 maximizable 和 minimizable 属性为 true ，表示 Panel 可以被最大化和最小化。
3.3 Window 组件
Window 组件是一个可拖拽、可调整大小的窗口，它通常包含其他组件，如表单、Grid 等。
3.3.1 Window 组件的基本用法
下面是一个 Window 组件的基本用法示例：
var window = Ext.create('Ext.window.Window', {
title: 'My Window',
width: 300,
height: 200,
layout: 'fit',
items: {
xtype: 'panel',
html: 'This is a window'
}
});
window.show();
3.3.2 Window 组件的高级功能
Window 组件支持多种高级功能，例如拖拽、调整大小、模态对话框等。以下是一些高级功能的示例：
// 添加拖拽功能
window.draggable = true;
// 添加调整大小功能
window.resizable = true;
// 添加模态对话框功能
window.modal = true;
3.3.3 Window 组件的高级功能分析
在上述代码中，我们首先演示了如何为 Window 组件添加拖拽功能。我们设置了 draggable 属性为 true ，表示 Window 可以被拖拽。
我们还演示了如何为 Window 组件添加调整大小功能。我们设置了 resizable 属性为 true ，表示 Window 可以被调整大小。
最后，我们演示了如何为 Window 组件添加模态对话框功能。我们设置了 modal 属性为 true ，表示 Window 是一个模态对话框，用户必须先关闭对话框才能与页面上的其他元素交互。
3.4 Menu 和 Form 组件
Menu 和 Form 是 ExtJS 中常用的组件，分别用于创建菜单和表单。
3.4.1 Menu 和 Form 组件的基本用法
以下是一个 Menu 和 Form 组件的基本用法示例：
// 创建 Menu 组件
var menu = Ext.create('Ext.menu.Menu', {
items: [{
text: 'Item 1'
}, {
text: 'Item 2'
}]
});
// 创建 Form 组件
var form = Ext.create('Ext.form.Panel', {
title: 'My Form',
width: 300,
bodyPadding: 10,
defaultType: 'textfield',
items: [{
fieldLabel: 'Name',
name: 'name'
}, {
fieldLabel: 'Email',
name: 'email'
}]
});
// 将 Menu 和 Form 添加到视图中
Ext.application({
name: 'MenuFormExample',
launch: function() {
menu.render('menu-example');
form.render('form-example');
}
});
3.4.2 Menu 和 Form 组件的高级功能
Menu 和 Form 组件提供了许多高级功能，例如子菜单、表单验证、表单提交等。以下是一些高级功能的示例：
// 添加子菜单功能
var submenu = Ext.create('Ext.menu.Menu', {
items: [{
text: 'Subitem 1'
}, {
text: 'Subitem 2'
}]
});
items[0].menu = submenu;
// 添加表单验证功能
form.getForm().submit({
url: '/submit',
waitMsg: 'Submitting your data...',
success: function(form, action) {
Ext.Msg.alert('Success', 'Your form has been submitted successfully');
},
failure: function(form, action) {
Ext.Msg.alert('Failed', 'An error occurred');
}
});
3.4.3 Menu 和 Form 组件的高级功能分析
在上述代码中，我们首先演示了如何为 Menu 组件添加子菜单功能。我们创建了一个子菜单 submenu ，并将它赋值给 submenu 属性，使得菜单项具有下拉功能。
我们还演示了如何为 Form 组件添加表单验证和提交功能。我们使用 getForm().submit 方法提交表单，并定义了 url 、 waitMsg 、 success 和 failure 回调函数，以处理表单提交的不同阶段。
通过本章节的介绍，我们了解了 ExtJS 中的用户界面组件，包括 Grid、Panel、Window、Menu 和 Form 组件的基本用法和高级功能。这些组件使得开发者能够以声明式的方式构建丰富的桌面风格应用程序。在接下来的章节中，我们将继续探讨 ExtJS 的布局管理机制，以及事件处理与委托模式等内容。
4. 布局管理机制
在ExtJS中，布局管理是组织和管理组件在页面上的空间分布的一种有效方式。它提供了多种布局类型来满足不同的页面布局需求。本章节我们将深入探讨ExtJS的三种常用布局：Fit布局、Border布局和Table布局，包括它们的基本概念、使用方法以及如何通过这些布局来创建灵活、响应式的用户界面。
4.1 Fit布局
4.1.1 Fit布局的基本概念
Fit布局是ExtJS中最简单的布局类型之一。它将容器内的子组件扩展或收缩以填充其分配的空间，但是不会改变子组件的大小。这种布局适用于那些需要完全填充父容器的组件，但又不希望组件的大小随着父容器的变化而变化的场景。
4.1.2 Fit布局的使用方法
Fit布局通常用于实现一个工具栏或者一个状态栏，这些组件需要在父容器的不同部分动态地展示和隐藏。下面是一个Fit布局的基本示例：
Ext.create('Ext.Container', {
layout: 'fit',
items: [
{
xtype: 'toolbar',
title: 'Fit Layout Example',
items: [
{ xtype: 'button', text: 'Button 1' },
{ xtype: 'button', text: 'Button 2' }
]
}
]
});
在上面的代码示例中，我们创建了一个容器并设置其布局为 fit ，然后向其中添加了一个工具栏。这个工具栏会自动填充整个容器的空间，但是工具栏内部的按钮不会随着容器大小的变化而变化。
4.1.3 Fit布局的应用实例
为了更好地理解Fit布局的应用，我们来看一个实际的示例。假设我们需要一个简单的登录界面，登录表单和按钮需要在不同的时间显示或隐藏，Fit布局就是一个很好的选择。
Ext.create('Ext.Container', {
width: 300,
height: 200,
layout: 'fit',
items: [
{
xtype: 'panel',
title: 'Login',
html: '<form id="loginForm"><input type="text" placeholder="Username"><br><input type="password" placeholder="Password"><br><button type="submit">Login</button></form>',
listeners: {
resize: function(panel, width, height) {
var loginForm = ***ponentQuery.query('panel')[0].query('form')[0];
loginForm.style.width = width + 'px';
}
}
}
]
});
在这个示例中，我们创建了一个容器并设置其布局为 fit ，然后添加了一个面板作为登录表单。当容器大小发生变化时，登录表单会自动调整大小以适应容器的空间。
4.2 Border布局
4.2.1 Border布局的基本概念
Border布局是一种非常灵活的布局方式，它允许我们将容器划分为五个区域：北、南、东、西和中心。每个区域可以单独控制大小和位置，中心区域占据剩余的空间。这种布局非常适合创建复杂的用户界面，例如带有边栏和工具栏的界面。
4.2.2 Border布局的使用方法
Border布局可以通过 border 属性来定义，每个子组件需要指定 region 属性来确定其在布局中的位置。下面是一个Border布局的基本示例：
Ext.create('Ext.Container', {
layout: 'border',
items: [
{
xtype: 'panel',
title: 'North',
region: 'north',
height: 100
},
{
xtype: 'panel',
title: 'West',
region: 'west',
width: 200,
collapsible: true
},
{
xtype: 'panel',
title: 'Center',
region: 'center',
layout: 'fit'
}
]
});
在这个示例中，我们创建了一个容器并设置其布局为 border ，然后添加了三个面板分别位于北、西和中心区域。北区域固定高度为100像素，西区域固定宽度为200像素且可以折叠。
4.2.3 Border布局的应用实例
让我们通过一个实际的示例来了解Border布局的应用。假设我们需要创建一个具有导航栏、侧边栏和主要内容区域的页面布局，Border布局就能够很好地满足这一需求。
Ext.create('Ext.Container', {
layout: 'border',
items: [
{
xtype: 'panel',
title: 'Navigation',
region: 'west',
width: 200,
split: true,
collapsible: true,
layout: 'fit',
items: [
// Navigation items go here
]
},
{
xtype: 'panel',
title: 'Main Content',
region: 'center',
layout: 'fit',
items: [
// Main content goes here
]
}
]
});
在这个示例中，我们创建了一个容器并设置其布局为 border ，然后添加了两个面板分别位于西区域和中心区域。西区域包含导航项，可以折叠，中心区域用于显示主要内容。
4.3 Table布局
4.3.1 Table布局的基本概念
Table布局是一种将容器划分为表格形式的布局方式，它允许我们指定行和列的数量，以及每个单元格中的组件。这种布局方式非常适合创建具有固定列数的表格样式的界面，例如数据展示和报告页面。
4.3.2 Table布局的使用方法
Table布局可以通过 layout 属性设置为 table ，并且需要指定 columns 属性来定义列的数量。下面是一个Table布局的基本示例：
Ext.create('Ext.Container', {
layout: {
type: 'table',
columns: 3
},
items: [
{ xtype: 'panel', title: 'Cell 1', html: 'Content 1' },
{ xtype: 'panel', title: 'Cell 2', html: 'Content 2' },
{ xtype: 'panel', title: 'Cell 3', html: 'Content 3' },
// More cells go here...
]
});
在这个示例中，我们创建了一个容器并设置其布局为 table ，并定义了3列。然后添加了三个面板分别放置在三个单元格中。
4.3.3 Table布局的应用实例
为了更好地理解Table布局的应用，我们来看一个实际的示例。假设我们需要创建一个简单的任务列表，其中每个任务项占据一行，每个任务项可以点击展开查看详情。
Ext.create('Ext.Container', {
layout: {
type: 'table',
columns: 2
},
items: [
{ xtype: 'panel', title: 'Task 1', html: 'Task 1 Details' },
{ xtype: 'panel', title: 'Task 2', html: 'Task 2 Details' },
// More tasks go here...
]
});
在这个示例中，我们创建了一个容器并设置其布局为 table ，并定义了2列。然后添加了多个面板分别放置在不同的单元格中，每个面板代表一个任务项。这个布局方式适合于创建简单的任务列表界面。
4.3.4 Table布局的高级功能
Table布局不仅提供了基本的单元格布局，还支持一些高级功能，例如单元格合并、行和列的配置等。这些高级功能可以通过在 layout 属性中设置额外的配置项来实现。下面是一个展示如何合并单元格的示例：
Ext.create('Ext.Container', {
layout: {
type: 'table',
columns: 3,
tableAttributes: {
'border': '1'
}
},
items: [
{ xtype: 'panel', title: 'Cell 1', rowspan: 2, html: 'Content 1' },
{ xtype: 'panel', title: 'Cell 2', colspan: 2, html: 'Content 2' },
{ xtype: 'panel', title: 'Cell 3', html: 'Content 3' },
{ xtype: 'panel', title: 'Cell 4', html: 'Content 4' },
// More cells go here...
]
});
在这个示例中，我们创建了一个容器并设置其布局为 table ，定义了3列，并通过设置 rowspan 和 colspan 属性来合并单元格。第一个面板占据两行，第二个面板占据两列。这样的布局方式非常适合于创建复杂的表格样式界面。
表格布局的配置参数
下面是一个表格布局的配置参数的详细说明：
| 参数名 | 类型 | 描述 | | --- | --- | --- | | type | String | 布局类型，对于表格布局，这个值应该设置为 table | | columns | Number | 列的数量 | | tableAttributes | Object | 传递给内部表格元素的HTML属性 |
表格布局的高级配置示例
Ext.create('Ext.Container', {
layout: {
type: 'table',
columns: 4,
tableAttributes: {
'border': '1',
'cellspacing': '0',
'cellpadding': '5'
}
},
items: [
{ xtype: 'panel', title: 'Cell 1', rowspan: 2, html: 'Content 1' },
{ xtype: 'panel', title: 'Cell 2', colspan: 2, html: 'Content 2' },
{ xtype: 'panel', title: 'Cell 3', html: 'Content 3' },
{ xtype: 'panel', title: 'Cell 4', html: 'Content 4' },
{ xtype: 'panel', title: 'Cell 5', rowspan: 2, html: 'Content 5' },
// More cells go here...
]
});
在这个示例中，我们通过 layout 属性定义了一个具有4列的表格布局，并设置了表格的一些HTML属性。通过 rowspan 和 colspan 属性来合并单元格，创建了一个更加复杂的表格布局。这种布局方式非常适合于创建复杂的用户界面，例如具有详细信息和摘要视图的报表页面。
5. 事件处理与委托模式
5.1 事件处理
5.1.1 事件处理的基本概念
在ExtJS中，事件处理是响应用户操作（如点击、键盘输入等）的机制。这些事件可以触发应用程序中的行为，如打开一个新窗口、提交表单数据等。事件处理模型基于观察者模式，其中组件作为观察者注册事件监听器，并在事件发生时被通知。
5.1.2 事件处理的使用方法
事件处理通常涉及三个步骤：注册事件监听器、编写事件处理函数和注销监听器。以下是一个简单的示例，展示了如何为一个按钮添加点击事件处理：
// 注册事件监听器
button.on('click', function() {
alert('Button was clicked!');
});
// 或者使用对象字面量的形式
button.on({
scope: this,
click: function() {
alert('Button was clicked!');
}
});
在上述代码中， on 方法用于注册事件监听器，第一个参数是事件名称（如 click ），第二个参数是事件处理函数。 scope 属性用于指定 this 上下文。
5.1.3 代码逻辑解读
-
button.on('click', function() {...});这行代码为按钮注册了一个点击事件监听器。 -
function() {...}是事件处理函数，当事件发生时执行。 -
alert('Button was clicked!');在事件处理函数中显示一个警告框。
5.2 委托模式
5.2.1 委托模式的基本概念
委托模式是一种设计模式，允许对象将某些任务委托给其他对象处理。在ExtJS中，委托模式通常用于处理集合中的元素事件。这意味着你可以将事件监听器添加到一个容器上，而不是每个子元素上，从而提高性能和减少内存消耗。
5.2.2 委托模式的使用方法
在ExtJS中，可以使用 delegate 方法来实现委托模式。例如，如果你有一个网格（Grid）组件，你可以委托点击事件到网格中的行，而不是每个单元格：
grid.on('itemclick', function(view, record, item, index, event) {
alert('Item clicked: ' + record.get('name'));
}, this, {
delegate: 'gridrow'
});
5.2.3 代码逻辑解读
-
grid.on('itemclick', ...);这行代码为网格组件注册了一个itemclick事件监听器。 -
function(view, record, item, index, event) {...}是事件处理函数，它接收额外的参数，如record（当前行的数据模型）。 -
alert('Item clicked: ' + record.get('name'));显示点击行的名称。 -
delegate: 'gridrow'指定了委托模式，只有当点击事件发生在gridrow元素上时，事件处理函数才会被调用。
5.3 事件处理与委托模式的结合
5.3.1 事件处理与委托模式的结合方法
结合事件处理和委托模式可以使你的应用程序更加高效和响应快速。以下是一个结合使用事件处理和委托模式的例子，展示了如何在网格组件中处理列点击事件：
grid.on('itemclick', function(view, record, item, index, event) {
if (event.target.className === 'grid-column-header') {
// 处理列头点击事件
alert('Column header clicked: ' + view.headerCt.getHeaderAtIndex(index).getText());
} else {
// 处理行点击事件
alert('Row clicked: ' + record.get('name'));
}
}, this, {
delegate: '.gridrow,.grid-column-header'
});
5.3.2 事件处理与委托模式的结合实例
在这个例子中，我们监听了网格的 itemclick 事件，并通过检查 event.target.className 来区分点击事件发生在列头还是行上。然后根据不同的目标元素执行不同的操作。
5.3.3 代码逻辑解读
-
if (event.target.className === 'grid-column-header') {...}检查点击事件是否发生在列头上。 -
alert('Column header clicked: ' + ...);如果是，显示列头被点击的信息。 -
else {...}如果不是，处理行点击事件。 -
delegate: '.gridrow,.grid-column-header'指定了委托模式，监听gridrow和grid-column-header类的点击事件。
5.3.4 实例说明
通过这个实例，我们可以看到如何利用委托模式来区分不同的事件目标，并执行相应的操作。这不仅提高了代码的可维护性，还提升了性能，因为不需要为每个行或列头单独注册事件监听器。
5.3.5 实践建议
在实际开发中，建议使用委托模式来处理容器内部元素的事件，这样可以减少内存消耗并提升性能。同时，合理使用事件处理函数中的参数，可以帮助你更精确地处理事件。
5.3.6 小结
事件处理和委托模式是ExtJS中非常重要的概念。通过本章节的介绍，我们了解了事件处理的基本概念、使用方法以及如何与委托模式结合。这些知识对于开发高效、响应快速的Web应用程序至关重要。在后续的章节中，我们将进一步探讨ExtJS的其他高级特性。
6. 数据管理与Ajax功能
6.1 Store概念
6.1.1 Store的基本概念
ExtJS中的Store是用于数据管理的一个核心组件。它是一个数据的集合，可以简单理解为一个数组，但其功能远不止如此。Store负责数据的存储、查询、排序和过滤等功能。它提供了一种数据抽象层，可以与多种数据源交互，如Ajax调用、内存数据等。
6.1.2 Store的使用方法
要使用Store，首先需要定义一个Store的实例，并指定其数据模型。以下是一个简单的Store定义示例：
var myStore = Ext.create('Ext.data.Store', {
model: 'User',
data: [
{ id: 1, name: 'John Doe' },
{ id: 2, name: 'Jane Doe' }
]
});
在这个例子中，我们创建了一个名为 myStore 的Store实例，它使用了 User 模型，并初始化了两条数据。在实际应用中，数据通常来自Ajax调用。
6.2 Ajax功能
6.2.1 Ajax的基本概念
Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个页面的情况下，能够更新部分网页的技术。在ExtJS中，Ajax调用通常用于从服务器获取数据或向服务器发送数据。
6.2.2 Ajax的使用方法
ExtJS提供了 Ext.Ajax 类，它封装了传统的Ajax调用，提供了更简洁、更强大的接口。以下是一个使用 Ext.Ajax 发送GET请求的示例：
Ext.Ajax.request({
url: 'users.php',
method: 'GET',
success: function(response) {
var users = Ext.decode(response.responseText);
console.log(users);
},
failure: function(response) {
console.log('Request failed');
}
});
在这个例子中，我们向 users.php 发送了一个GET请求，并在成功获取响应后，将其解析为JavaScript对象。
6.3 Ext.Ajax类
6.3.1 Ext.Ajax类的基本概念
Ext.Ajax 是ExtJS中用于处理Ajax请求的一个类，它简化了Ajax调用的复杂性，提供了更多的配置选项和灵活的处理方式。
6.3.2 Ext.Ajax类的使用方法
除了上述的GET请求示例， Ext.Ajax 还可以用来发送POST请求、设置请求头等。以下是一个发送POST请求的示例：
Ext.Ajax.request({
url: 'login.php',
method: 'POST',
params: {
username: 'user',
password: 'pass'
},
success: function(response) {
var result = Ext.decode(response.responseText);
if (result.success) {
// 登录成功逻辑
} else {
// 登录失败逻辑
}
},
failure: function(response) {
console.log('Request failed');
}
});
在这个例子中，我们向 login.php 发送了一个POST请求，并传递了用户名和密码参数。成功或失败的处理逻辑依赖于服务器的响应结果。
通过上述示例，我们可以看到 Ext.Ajax 类提供了灵活的方式来处理不同的网络请求，使得开发者能够更专注于业务逻辑的实现。
简介：ExtJS 3.2.0 是一个为构建富客户端Web应用程序设计的强大JavaScript框架，它提供了一系列优化和增强的组件、类库和功能。此版本遵循MVC设计模式，拥有丰富的UI组件如Grid、Panel、Window等，并通过Fit、Border、Table等布局管理机制满足不同界面需求。事件处理系统支持高效的组件间通信，Store概念实现了动态数据管理和实时更新。ExtJS 3.2.0 还包括强大的Ajax功能，简化了服务器交互。官方API文档提供了详尽的类、方法、属性和事件说明，是开发者不可或缺的学习资源。
扫一扫
1273
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
