### ExtJS全面教程：构建富客户端应用的利器
#### 引言
ExtJS是一个强大的JavaScript框架，主要用于开发具有丰富用户界面（UI）的Web应用程序，它以其丰富的组件库、灵活的布局系统以及强大的数据交互能力而闻名，本文将详细介绍ExtJS的基本概念、组件、布局、数据存储以及实际应用中的小技巧，帮助读者快速上手并构建高质量的富客户端应用。
#### 一、ExtJS简介
ExtJS是一个用JavaScript编写的Ajax框架，旨在提升Web应用的用户体验和交互性，它提供了丰富的UI组件，如面板（Panel）、表格（Grid）、窗口（Window）、表单（Form）等，这些组件可以轻松地通过配置和组合来构建复杂的用户界面，ExtJS与后台技术无关，可以无缝集成到Java、.NET、PHP等开发环境中。
#### 二、ExtJS类库与基础组件
ExtJS的类库由底层API（core）、控件（widgets）和实用工具（Utils）三部分组成，底层API提供了DOM操作、事件处理、查询等基础功能；控件则包括面板、表格、窗口等可视化组件；实用工具则提供了数据格式化、Ajax请求、Cookie管理等扩展功能。
**基础组件的创建**
在ExtJS中，组件可以通过`new`关键字直接创建，也可以通过`Ext.create`方法创建，创建一个简单的窗口组件：
var win = Ext.create('Ext.Window', {
title: '新窗口',
width: 300,
height: 200,
html: '这是一个窗口组件'
});
win.show();
每个组件在创建时都可以传递一个配置对象，该对象包含了组件的初始化属性。
#### 三、ExtJS布局系统
ExtJS提供了多种布局方式，包括自动布局（auto）、卡片布局（card）、列布局（column）、边框布局（border）等，这些布局方式可以灵活地组织组件的排列和显示。
**列布局示例**
列布局允许将容器内的子组件按列排列，以下是一个列布局的示例：
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
width: 400,
height: 200,
title: '容器面板',
layout: 'column',
items: [
{
xtype: 'panel',
title: '子面板1',
height: 100,
columnWidth: 0.5
},
{
xtype: 'panel',
title: '子面板2',
height: 100,
columnWidth: 0.5
}
]
});
在这个例子中，我们创建了一个包含两个子面板的容器面板，并设置了列布局，每个子面板占据一半的列宽。
#### 四、数据存储与交互
ExtJS提供了强大的数据存储和交互能力，通过Store组件可以方便地管理数据记录（Record），Store是一个为ExtJS组件提供Record对象的存储容器，其行为和属性类似于数据表。
**Store的创建与数据加载**
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'phone'],
data: [
{name: 'John Doe', email: 'john@example.com', phone: '555-111-1224'},
// 更多数据...
],
proxy: {
type: 'memory',
reader: {
type: 'json'
}
}
});
// 加载数据到Grid
Ext.create('Ext.grid.Panel', {
title: '联系人列表',
store: store,
columns: [
{ text: '姓名', dataIndex: 'name' },
{ text: '邮箱', dataIndex: 'email' },
{ text: '电话', dataIndex: 'phone' }
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
在这个例子中，我们首先创建了一个Store，并定义了字段和数据，我们创建了一个GridPanel，并将其store属性设置为之前创建的Store，GridPanel就会自动从Store中加载数据并显示。
#### 五、ExtJS小技巧
1. **从Form中获取Field的值**
在ExtJS中，可以通过多种方法从Form中获取Field的值，使用`Ext.getCmp('fieldId')`、`formPanel.getForm().findField('fieldId')`或
