Sencha Architect 2.2.2 入门操作图解教程.docx

Sencha Architect 2是个可视化的应用构建器，它使用Sencha Touch 2来构建移动应用，使用ExtJS 4来构建桌面应用。关于此软件的学习教程少之又少，终于发现了一个不得了的文档。 Sencha Architect 2.2.2 是一个强大的可视化应用程序构建工具，主要用于基于Sencha Touch 2构建移动应用，以及使用ExtJS 4构建桌面应用。由于这类教程稀缺，本入门操作图解教程显得尤为珍贵。以下将详细讲解教程中的关键步骤。 你需要准备以下环境： 1. 安装一个Web服务器，例如Apache Tomcat 7.0.42，这是运行和部署应用的基础。 2. 下载并安装Sencha Architect 2.2.2，记得在网上注册ID。如果你使用的是试用版，可以在网上寻找破解方法以继续使用。 进入Sencha Architect 2.2.2的主界面后，开始创建项目： 1. 在“文件”菜单中选择“保存项目”，设定项目的保存位置，建议设在Web服务器的根目录下，如Apache Tomcat的webapps文件夹，以便直接发布项目。 2. 创建一个Viewport视图，这是应用的主要容器，通过双击蓝色区域或拖动完成。 3. 修改Viewport的布局属性为“border”，以实现不同部分的划分。 4. 创建Panel视图，同样通过双击或拖动，然后配置相应的属性，如宽度、高度等。 5. 添加Tab Panel视图，用于实现多标签页功能。参考创建Panel的步骤，并设置每个Tab的相关属性，如可关闭性（closable）。 6. 测试你的项目成果，通过“构建”功能生成项目，然后在浏览器中查看效果。注意，由于引用了公网资源，确保网络畅通。若需本地化资源，可参照教程中的a.html文件，将引用路径更改为本地的ext-all.js和样式文件。 接下来，逐步完善你的应用： 7. 在已有的Panel中继续添加更多Panel，创建复杂的层级结构。 8. 在子Panel中添加Button控件，调整其宽度，如果在属性窗口无法设置100%，则在生成的JS文件中手动修改。 9. 为Button添加Click事件，可以通过属性窗口进行配置，这将触发特定的JavaScript函数，实现按钮的交互逻辑。 通过这个教程，你可以学习到如何使用Sencha Architect 2.2.2的图形界面构建基本的ExtJS 4应用，包括创建视图、设置布局、添加组件以及处理用户交互。虽然教程中提到了一些可能存在的小问题，如宽度设置bug，但整体上，它提供了直观的步骤，帮助初学者快速掌握Sencha Architect的使用技巧。继续深入学习和实践，你将能够利用这个工具构建更复杂的Web应用。