ext图形开发工具SenchaArchitec初体验

以前用过delphi和vb开发程序，一款图形开发ide对于我们的开发帮助是非常大的。也许有很多大神会很不屑，但是我认为拖拉控件也没什么不妥的，起码我在开发android应用的时候会用layout编辑器来预览视图。对于刚入门ext的新手倒是不错，先用ide生成代码然后在看代码，修改代码...

下面我来介绍一下SenchaArchitec的使用吧：

Sencha Architect是个可视化的应用开发工具，在该公司的HTML5布局工具Ext Designer的基础上构建，并扩展了其功能，来为桌面和移动Web应用的构建提供更为广泛的支持。通过与Sencha Touch 2、Ext JS 4结合，Sencha Architect 2提升了开发者的生产效率并驱动应用设计模式上的最佳实践。 

2.1版本的主要目的是提升性能和稳定性，并增加了一些功能。该版本的主要新特性包括：  

• 支持Ext JS 4.1
• 可以方便地将项目从Ext JS 4.0迁移到4.1
• 支持Sencha Touch 2.0.1.1
• 改善了源码控制系统，便于团队协作
• 现在可以在画布上直接加载CSS资源
• 改善了代码编辑器，如查看子元素功能、更好的JSHint验证、更好的查找/替换功能
• 改善了模板、对象、数组的配置，支持多种配置类型
• 新增了一个“类”项目，允许你在框架中扩展项目，如添加抽象类

除此之外，Sencha Architect的消息日志、文档也得到改进，并增加了部分示例，这些示例已经迁移到了 Github 上，以便社区成员参与。 

1.下载SenchaArchitect，官方下载地址是

http://www.sencha.com/products/architect/download/

2.安装SenchaArchitect

直接双击安装就可以了

3.开始使用

如果是第一次使用需要输入一个账号密码，自己创建一个即可

可以看到只有30天试用期，先不管，点击continue trial，

4.下面搞个简单的工程试试

先拉个viewport到主窗体中

然后分别啦panel，tab panel和tree panel到主窗体中

下面设置viewport的布局方式，我们设置layout为border比较难找..

接下来设置mypanel的region属性为north如下图

接下来设置my tab panel的region属性为center，方法跟上面一样

最后设置my tree panel的region属性为west，方法跟上面一样

得到如下图

5.保存项目

然后到工程保存的地方打开app.html用chrome打开

感觉用起来还是很不错的，比我们手工查api来写要快点，特别是用过delphi等的人