Sencha Architect 2.2.2 图形化构建Extjs应用教程

"Sencha Architect 2.2.2 是一款用于构建 Ext JS 应用程序的图形化工具，允许用户通过直观的界面设计 UI，而无需大量编写代码。本教程详细介绍了如何从零开始使用 Sencha Architect 2.2.2 创建一个包含Viewport、Panel 和 TabPanel 的基本应用，并进行相关属性配置。" 在本文档中，我们将学习如何使用 Sencha Architect 2.2.2 开始创建基于 Ext JS 4.2 的应用程序。Sencha Architect 是一款强大的可视化开发工具，特别适合那些希望减少手动编码时间的开发者。 首先，我们需要进行一些准备工作。安装一个支持 Sencha 应用的 Web 服务器，例如 Apache Tomcat 7.0.42。同时，下载并安装 Sencha Architect 2.2.2，注意需要注册并激活软件。对于试用版用户，可以通过网上找到的破解方法继续使用。 进入 Sencha Architect 后，我们开始创建新项目。在 "File" 菜单中选择 "Save Project"，并指定项目保存的位置，例如在 Web 服务器的根目录下，以便于直接发布项目。 接着，我们创建主要的 Viewport 视图。双击工作区的蓝色区域或者通过拖拽来添加。然后，将 layout 属性设置为 "border"，这将为我们的应用提供一个带有边框布局的容器。 接下来，我们要创建一个 Panel 视图，方法与创建 Viewport 相似。同样，我们也可以通过修改属性来调整其布局和样式。 在 Panel 内部，我们可以添加一个 TabPanel 视图。这同样可以通过拖拽或者双击来实现。TabPanel 可以容纳多个 tab，每个 tab 都可以是一个独立的视图。通过设置各个 tab 的属性，比如让 Tab1 可关闭，删除不需要的 Tab2 和 Tab3。 在所有组件创建和配置完毕后，我们需要编译项目以生成实际的 HTML 和 JavaScript 文件。点击 Build 图标进行编译，这会生成一个 `app.html` 文件，其中包含了 Ext JS 库和我们的应用程序代码。 最后，我们通过浏览器预览编译后的结果，确保一切按照预期工作。由于 `app.html` 引入了 Sencha CDN 上的库文件，因此在预览时需要确保网络连接畅通。 通过这个简单的教程，你已经掌握了使用 Sencha Architect 2.2.2 设计 Ext JS 应用的基本步骤。随着对工具的深入理解和实践，你可以创建更复杂的界面，利用 Sencha Architect 提供的强大布局和组件系统，减少手动编写代码的工作量，提高开发效率。