使用ExtJS6.0开发应用框架

ExtJS是一款由Sencha公司开发的跨浏览器JavaScript框架，用于开发富交互的网络应用程序。它提供了丰富的组件库，可用于快速开发出适应各种平台和设备的应用程序。在本文中，我们将着重了解如何使用ExtJS6.0版本开发应用框架。 在搭建ExtJS6.0应用框架之前，需要确保已经下载并安装了SenchaCMD工具，它是一个强大的命令行工具，能够帮助开发者快速配置和生成应用框架。在本文中，提供了一个SenchaCMD的下载地址，并提醒读者需要根据系统是否已经安装JRE来选择相应的安装包。 下载并安装SenchaCMD之后，接着需要下载并解压ExtJS6.0的离线文档，以及对应版本的ExtJS6.0 GPL正式版。文档的下载地址也随本文一并提供，方便开发者查阅相关的开发文档和API。 在搭建开发环境的过程中，要解压ExtJS6.0的压缩包，并使用SenchaCMD工具生成开发框架。通过在命令行中输入特定的命令，开发者可以指定SDK的路径，以及生成应用的名称和目标文件夹路径。在执行完命令之后，可以通过浏览器访问一个本地地址，来查看由SenchaCMD工具生成的默认应用页面。 在开发环境搭建完成后，本文介绍了如何修改应用的主题。通过打开app.json文件并修改其中的theme值，可以切换到不同的主题样式。此外，还介绍了如何修改样式，即通过定位到SASS文件中对应的样式，并在浏览器中刷新查看效果。 在进行页面框架构思时，作者提出了几个设计要点，包括仿Windows桌面的界面风格、OutLook形式的工具栏、用户自定义快捷菜单、以及特定区域的告警提示等。对于不同功能的窗口内容，考虑到了其占用操作区的大小，以及用户对菜单的自定义需求。 接着，本文详细探讨了ExtJS6.0应用框架的目录结构，并以Viewport为例，说明了通常情况下，一个页面会对应三个文件，即视图文件（Xxx.js）、模型文件（XxxModel.js）和控制器文件（XxxController.js）。在详细介绍这些文件之前，提到了Reference和ViewModel的使用，以及控制器注册事件的两种途径。 本文通过实例，深入讲解了如何在控制器中使用down和getComponent方法来定位到视图中的指定组件，并实现组件的定位。在示例代码中，展示了如何在EditMenu视图中的form组件下实现“新增”按钮的onAdd事件。 本文详细介绍了使用ExtJS6.0开发应用框架的整个流程，包括环境搭建、框架生成、主题样式修改、界面构思以及实际开发中对组件的引用和操作。这些知识对于希望学习和掌握ExtJS6.0的开发者来说是必不可少的。对于已有的ExtJS开发者而言，本文也提供了一些关于架构设计和代码实现的参考和启发。