Sencha Architect2.2.2入门操作图解教程-Extjs 4.2.doc

Sencha Architect2.2.2入门操作图解教程Extjs 4.2龙兄本教程可以教你做出如下图的功能，可以动态建立和激活视图；大部份的操作是通过Sencha Architect2.2.2的图形界面来完成的，手工输入代码不超20行。教程开始：一、 准备工作：1、 下载和安装WEB服务器【我用的是Apache Tomcat/7.0.42】2、 下载和安装Sencha Architect2.2.2，并且网上注册ID、进入Sencha Architect2.2.2【我用的是限期版（30天），没有钱买正版，想长期用，上网有破解的方法。】。*以上两个操作完成后如下图所示；（有难度者请参照网上相对应的教程）二、点击【Go】开始进入Sencha Architect2.2.2的主界面，如下图所示1、进入主界面后，先定好保存项目的位置，操作如下图所示，从菜单的 - （D:/WEB/apache/webapps目录是我Tomcat WEB的根文件夹，这样好处是建好的文档就可以直接发布了，也可以用其它文件夹。）2、建立一个Viewport视图，如下图所示，鼠标左键双击蓝色区域【或用鼠标拖蓝色区域到右边框】。3、修改layout的属性为border，如下图所示【也可以从这里选择】。4、建立一个Panel视图，如下图所示，操作方法可以参照第二步（2）建立好后的结果如下图设置相对应的属性，如下图所示5、建立一个Tab Panel视图，如下图所示，操作方法可以参照第2、4步建立好后的结果如下图设置相对应的属性，如下图所示，设置Tab 1的closable属性为真，删除Tab 2和Tab 3【鼠标指向Tab 2用右键快捷菜单删除，如图所示】6、我们测试一下我们前面的操作结果，如下图所示：先Build我们的项目，用鼠标单击菜单的Build图标在浏览器中打开我们建好的网页，如图所示：【请保持网络申通，因为app.html文件中的指向公网的资源。】*如果想改成指向本机的资源，请参照下面的说明：在test文件夹中建立一个a.html文件，文件内容如下： 龙兄 在公网上下载ext-4.2.1-gpl.zip文件包，或到我放在公网上的资源下载(只要下一个就OK)：/detail/qq501448/6352149或/data/964804下载和解压后把文件拷贝到testextjs-42文件夹中，如图所示：完成后，我们再测试一下，结果如下图：7、接着我们再往项目中加入相对应的控件，在My Panel中再加入三个Panel控件，如下图所示，操作方法可以参照第2、4步。8、在第二层的第一个My Panel中再加入二个Button控件，Button控件的宽度可用鼠标来调整大小，因为现在不能在属性窗口调整width值为100%，这可能是Sencha Architect2.2.2的一个bug吧， 等项目生成js文件后，我们再把相对应文件的width值改为100%。结果如下图所示，操作方法可以参照第2、4、7步。9、给二个Button控件添加Click事件，从属性窗口添加，选择属性窗口的Event Bindings选项，再选Click事件， 如下图所示：10、把My Panel导出生成类，用鼠标指向My Pane页框，右键激活菜单，选择，操作时注意蓝色框的位置，如下图所示：11、把My TabPanel导出生成类，具体操作参照第10步，如下图所示：12、第9步漏了一些操作，我不想重新抓图了，大家跟我一起改改就行了。先删除掉二个Button控件的Click事件，再设置二个Button控件的id属性分别为btn0101和btn0102，接着再次建立二个Button控件的Click事件，如下图：接着把二个Button控件的Click事件转换成控制器，如下图所示：第二个转换是选择这个菜单，如下图所示：13、在控制器【Controllers】中建立一个公用函数，函数名为showMyPage，这个函数有三个参数btnId、pageTitle、pageHtml；具体操作如下图所示：在这里进行参数设置，如下图所示：14、第5步漏了一个操作，我不想重新抓图了，大家跟我一起改改就行了。把MyTabPanel视图的id属性改为centerTabPanel；改后原MyTabPanel视图的名称就变成centerTabPanel；如下图所示：15、在第13步的操作结果的showMyPage函数中加入如下的代码，如下图所示：16、在D:WEBapachewebappstest文件夹中建立page01.html和page02.html两个html文件，文件内容你自己定。17、分别在控制器onButton0101Click和控制器onButton0102Click中加入一行代码，如下图所示：18、我们测试一下，在浏览器中访问a.html或app.html，如下图所示：19、如果想把二个按钮搞整齐，请修改D:WEBapachewebappstestappviewMyPanel.js文件中的width:138值改为width : ”100%” 和 width : 96值改为width : ”100%” ，如下图所示：20、补充说明，对象的一些附加属性id、name、title等可以在第6步哪里设置，项目里的对象最好要修改它的id属性，id值最好不重复；本人也是初学者，有