深入理解ExtJS：从入门到精通

ExtJS是一个功能强大的前端框架，广泛应用于大型企业的Web应用程序开发中。它不仅提供了丰富的UI组件库，还支持面向对象编程范式，使得开发者能够构建复杂且高效的用户界面。

下面是一张展示ExtJS桌面应用效果的截图：

要灵活运用ExtJS，需要逐步学习并实践。对于有经验的开发者来说，掌握这些技能可能相对容易；而对于初学者，则建议多参考文档并积极寻求社区的帮助。

文件夹与文件的作用

• build: 包含一个sdk.jsb3文件，用于Eclipse中的Spket插件实现代码提示功能。


• builds: 包含压缩后的ExtJS代码，体积更小，加载速度更快。


• docs: 开发文档，包含详细的API说明和技术指南。


• examples: 官方提供的示例代码，帮助开发者理解和使用各种组件。


• locale: 多国语言资源文件，支持国际化。


• pkgs: 各个模块的打包文件，便于管理和部署。


• resources: 包含CSS样式和图片资源。


• src: 未压缩的源代码目录，方便调试和修改。


• bootstrap.js: 引导文件，根据环境自动选择加载ext-all.js或ext-all-debug.js。


• ext-all.js: 核心库，已混淆，适用于生产环境。


• ext-all-debug.js: 调试版核心库，未混淆，适用于开发和调试。

不同版本的ExtJS文件

• ext-all.js: 包含所有ExtJS框架文件，已混淆。


• ext-all-debug.js: 包含所有ExtJS框架文件，未混淆。


• ext-all-dev.js: 包含所有ExtJS框架文件，未混淆且包含调试信息。


• ext.js: 最小集合文件，已混淆。


• ext-debug.js: 最小集合文件，未混淆。


• ext-dev.js: 最小集合文件，未混淆且包含调试信息。


• bootstrap.js: 自动加载ext-all.js或ext-all-debug.js，具体规则如下：




• 当前主机名为本地。


• 当前主机使用IPV4地址。


• 当前协议为file。


• 其他情况下自动加载ext-all.js。

学习ExtJS的前提条件

• 了解ExtJS的基本用途和应用场景。


• 具备面向对象编程的知识。


• 熟悉Javascript语法和特性。


• 掌握JSON格式及操作。


• 遇到问题时，先尝试查阅官方文档或搜索解决方案。

本教程不仅会教你如何使用ExtJS，还会引导你如何高效地查找和利用官方文档。跟随我们的步骤，逐步提升你的ExtJS技能，最终成为一名专家。如果在学习过程中遇到任何问题，请随时留言，我们将尽力为你解答。

以下是使用ExtJS 5.0所需的关键文件，解压后打开build目录，如图所示，红色框内的为必需文件，其中ext-all.js为主文件，packages中为主题文件。

1 <link rel="stylesheet" type="text/css" href="extjs5.0/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css">  
2 <script type="text/Javascript" src="extjs5.0/ext-all.js">script>  
3 <script type="text/Javascript" src="extjs5.0/packages/ext-theme-crisp/build/ext-theme-crisp.js">script>
4 <script type="text/Javascript" src="extjs5.0/examples/shared/include-ext.js">script>

上述代码等效于引入三个文件，注意文件加载顺序：ext-all.js必须在所有JS文件之前。

接下来是packages目录下的文件夹结构：

ext-local 文件夹包含语言包，支持多种语言，包括中文。

带有theme前缀的文件夹都是主题包，每个主题包通常包含一个样式文件（如ext-theme-crisp-all.css）和一个JS文件（如ext-theme-crisp.js）。JS文件位于build目录下，而样式文件则位于build/resources目录下。

完成以上配置后，你可以开始使用ExtJS了。以下是一个简单的弹出框示例：

1 Ext.Msg.alert('Hello', 'Welcome to ExtJS!');

最终效果如下：

你可以从这里下载ExtJS 5.0版本。