extjs详细ppt 开发详解教程，builds目录是ExtJS压缩后的代码，经过压缩的代码体积更小，加载更快。
docs中当然是ExtJS的文档了，其中最重要的是ExtJS的API，这是开发ExtJS程序 过程中的法宝。
examples中是官方的演示示例，通过对这些演示示例的熟悉，就能很快掌握ExtJS开发。
locale是多国语言的资源文件，其中ext-lang-zh_CN.js是简体中文。
pkgs中是ExtJS各部分功能的打包文件。
resources中是ExtJS要用的图片文件与样式表文件，ExtJS引以为傲的漂亮外观就全部由这个目录中的文件所控制。
src目录是未压缩的源代码目录
bootstrap.js是ExtJS库的引导文件，通过参数可以自动切换ext-all.js和ext-all-debug.js.
ext-all.js文件是ExtJS的核文件，是必须要引入的。
ext-all-debug.js文件是ext-all.js的调试版，在调试时需要使用到调试版。
### ExtJS 深度解析及应用实践
#### 一、ExtJS 概述
ExtJS 是一款基于 JavaScript 的开源框架，它利用 HTML 和 CSS 技术为 Web 应用程序构建用户界面(UI)。该框架的一个显著特点是与后端技术无关，这意味着它可以与任何服务器端语言（如 Java、PHP、Python 等）协同工作。
ExtJS 提供了丰富的 UI 组件、主题以及工具，使得开发者能够轻松地创建复杂的应用程序。它支持跨浏览器兼容性，并具有良好的文档和社区支持。
#### 二、ExtJS 架构分析
ExtJS 发布包包含多个重要的目录和文件，了解这些组成部分对于掌握 ExtJS 至关重要：
1. **builds** 目录包含了经过压缩的 ExtJS 代码，压缩后的代码体积更小，有助于提高页面加载速度。这对于优化用户体验非常关键。
2. **docs** 目录中包含了 ExtJS 的官方文档，尤其是 API 文档。这些文档是开发过程中不可或缺的参考资源，可以帮助开发者快速上手并解决问题。
3. **examples** 目录内包含了官方提供的示例代码，通过学习这些示例可以快速掌握 ExtJS 的使用方法。
4. **locale** 目录包含了多语言资源文件，例如 `ext-lang-zh_CN.js` 支持简体中文，这对于国际化应用尤为重要。
5. **pkgs** 目录则包含了 ExtJS 各个功能模块的打包文件，便于按需加载。
6. **resources** 目录中存储了 ExtJS 所需的各种图片和样式表文件，这些文件决定了 ExtJS 应用程序的视觉效果。
7. **src** 目录包含了未压缩的源代码，适合于开发阶段使用。
8. **bootstrap.js** 文件是 ExtJS 的引导文件，可以通过参数自动切换到 `ext-all.js` 或 `ext-all-debug.js` 文件。
9. **ext-all.js** 是 ExtJS 的核心文件，必须被引入到项目中。
10. **ext-all-debug.js** 是 `ext-all.js` 的调试版，通常在开发过程中使用，方便开发者调试代码。
#### 三、ExtJS 基本用法
1. **基本结构设置**
- 引入必要的 CSS 和 JS 文件：
```html
<link rel="stylesheet" type="text/css" href="path/to/ext-all.css" />
<script type="text/javascript" src="path/to/bootstrap.js"></script>
```
- 使用 `Ext.onReady` 函数确保 DOM 加载完成后再执行 ExtJS 代码：
```javascript
Ext.onReady(function() {
// 代码
});
```
2. **常用组件介绍**
- **文本框 (`Ext.form.field.Text`)**：用于输入文本。
- **多行文本框 (`Ext.form.field.TextArea`)**：用于输入大量文本。
- **数字框 (`Ext.form.field.Number`)**：仅接受数字输入。
- **日期选择器 (`Ext.form.field.Date`)**：提供日期选择功能。
- **复选框组 (`Ext.form.field.CheckboxGroup`)**：一组复选框。
- **单选按钮组 (`Ext.form.field.RadioGroup`)**：一组单选按钮。
- **下拉组合框 (`Ext.form.field.ComboBox`)**：结合列表和输入框的功能。
3. **示例代码**
下面是一个简单的表单示例，包括文本框、数字输入框、单选按钮组和日期选择器：
```javascript
Ext.onReady(function() {
Ext.QuickTips.init();
var comboStore = Ext.create('Ext.data.Store', {
fields: [{ name: 'nativePlace' }, { name: 'number' }],
data: [
{ nativePlace: '北京', number: '100' },
{ nativePlace: '上海', number: '101' },
{ nativePlace: '重庆', number: '102' },
{ nativePlace: '湖北', number: '103' },
{ nativePlace: '湖南', number: '104' },
]
});
var form = new Ext.form.Panel({
title: '表单',
height: 450,
width: 350,
frame: true,
renderTo: 'form',
defaults: {
labelSeparator: ':',
labelWidth: 100,
width: 300,
allowBlank: false,
blankText: '不允许为空',
labelAlign: "left",
msgTarget: 'qtip'
},
items: [
{
xtype: 'textfield',
fieldLabel: '姓名'
},
{
xtype: 'numberfield',
fieldLabel: '年龄',
hideTrigger: true,
allowDecimals: false,
maxValue: 120,
maxText: '允许输入的最大数值是：120',
nanText: '请输入有效的数字'
},
{
xtype: 'radiogroup',
fieldLabel: '性别',
columns: 2,
items: [
{ boxLabel: '男', name: 'sex', inputValue: 'male' },
{ boxLabel: '女', name: 'sex', inputValue: 'female', checked: true }
]
},
{
xtype: 'datefield',
fieldLabel: '出生年份'
}
]
});
});
```
#### 四、总结
ExtJS 为开发者提供了强大的 UI 组件和工具，使得构建复杂的 Web 应用变得简单高效。通过深入了解其架构和基本用法，开发者可以更加熟练地运用这一框架来提升应用程序的质量和性能。
