Sencha_Architect2.2.2入门操作图解教程

Sencha Architect 是一款强大的工具，它允许开发者以图形化的方式构建 Ext JS 应用程序，大大简化了前端开发流程。2.2.2 版本是该工具的一个特定迭代，适用于Extjs 4.2框架。这个教程主要针对初学者，讲解如何利用Sencha Architect 2.2.2 创建一个基本的Web应用。 你需要准备一个Web服务器，例如Apache Tomcat 7.0.42，用于部署和测试应用程序。安装并配置好服务器后，下载并安装Sencha Architect 2.2.2。请注意，这个版本可能有试用期限制，但网络上可以找到破解方法以便长期使用。 进入Sencha Architect，你首先需要创建并保存项目。在“File”菜单下选择“Save Project”，并指定一个合适的保存位置，例如在Tomcat的webapps目录下，这样可以直接发布你的应用。然后，你可以开始构建应用程序的结构。 教程中提到的第一步是创建一个Viewport视图，这是整个应用的主容器。通过双击蓝色区域或拖拽，可以创建一个新的Viewport，并将其布局属性设置为“border”。 接下来，你将创建一个Panel视图。Panel是Ext JS中最常用的组件，可以包含其他组件。你可以按照相同步骤创建一个Panel，并调整其属性，如宽度、高度等。 进一步，教程教你如何创建一个Tab Panel视图，这将包含多个可切换的标签页。每个Tab都可以是一个独立的Panel。你可以通过添加、删除Tab来定制你的Tab Panel，并设置某些Tab是否可关闭。 在完成这些步骤后，你可以通过“Build”功能生成项目，然后在浏览器中预览结果。由于初始的app.html文件引用了Sencha CDN上的资源，确保网络连接正常以查看运行效果。如果你希望本地化资源，可以创建一个新的HTML文件，修改引用路径为本地的Ext JS库文件。 教程中还提到，如果遇到问题，比如无法设置Button的width为100%，可以在生成的JavaScript文件中手动修改。此外，还可以继续向项目中添加更多组件，如在已有的Panel中添加新的Panel和Button，进一步定制你的应用界面。 通过这个教程，你可以学习到如何使用Sencha Architect设计和构建基本的Ext JS应用，包括创建视图、设置布局、添加组件以及处理事件。这是一个很好的起点，随着对工具和框架的深入理解，你将能够创建更复杂、功能丰富的Web应用。