搜索
SenchaArchitect2.2.2入门操作图解教程[Extjs4.2]龙兄本教程可以教你做出如下图的功能，可以动态建立和激活视图；大部份的操作是通过SenchaArchitect2.2.2的图形界面来完成的，手工输入代码不超20行。教程开始：一、准备工作：1、下载和安装WEB服务器【我用的是ApacheTomcat/7.0.42】2、下载和安装SenchaArchitect2.2.2，并且网上注册ID、进入SenchaArchitect2.2.2【我用的是限期版（30天），没有钱买正版，想长期用，上网有破解的方法。】。*以上两个操作完成后如下图所示；（有难度者请参照网上相对应的教程）二、点击【Go】开始进入SenchaArchitect2.2.2的主界面，如下图所示1、进入主界面后，先定好保存项目的位置，操作如下图所示，从菜单的File-SaveProject（D:/WEB/apache/webapps目录是我TomcatWEB的根文件夹，这样好处是建好的文档就可以直接发布了，也可以用其它文件夹。）2、建立一个Viewport视图，如下图所示，鼠标左键双击蓝色区域【或用鼠标拖蓝色区域到右边框】。3、修改layout的属性为border，如下图所示【也可以从这里选择】。4、建立一个Panel视图，如下图所示，操作方法可以参照第二步（2）建立好后的结果如下图设置相对应的属性，如下图所示5、建立一个TabPanel视图，如下图所示，操作方法可以参照第2、4步建立好后的结果如下图设置相对应的属性，如下图所示，设置Tab1的closable属性为真，删除Tab2和Tab3【鼠标指向Tab2用右键快捷菜单删除，如图所示】6、我们测试一下我们前面的操作结果，如下图所示：先Build我们的项目，用鼠标单击菜单的Build图标在浏览器中打开我们建好的网页，如图所示：【请保持网络申通，因为app.html文件中的scriptsrc=指向公网的资源。】*如果想改成指向本机的资源，请参照下面的说明：在test文件夹中建立一个a.html文件，文件内容如下：!DOCTYPEhtml!--AutoGeneratedwithSenchaArchitect--!--Modificationstothisfilewillbeoverwritten.--htmlheadmetahttp-equiv=Content-Typecontent=text/html;charset=utf-8/title龙兄/titlescriptsrc==stylesheethref==text/javascriptsrc=app.js/script/headbody/body/html在公网上下载ext-4.2.1-gpl.zip文件包，或到我放在公网上的资源下载(只要下一个就OK)：或下载和解压后把文件拷贝到test\extjs-42文件夹中，如图所示：完成后，我们再测试一下，结果如下图：7、接着我们再往项目中加入相对应的控件，在MyPanel中再加入三个Panel控件，如下图所示，操作方法可以参照第2、4步。8、在第二层的第一个MyPanel中再加入二个Button控件，Button控件的宽度可用鼠标来调整大小，因为现在不能在属性窗口调整width值为100%，这可能是SenchaArchitect2.2.2的一个bug吧，等项目生成js文件后，我们再把相对应文件的width值改为100%。结果如下图所示，操作方法可以参照第2、4、7步。9、给二个Button控件添加Click事件，从属性窗口添加，选择属性窗口的EventBindings选项，再选Click事件，如下图所示：10、把MyPanel导出生成类，用鼠标指向MyPane页框，右键激活菜单，选择PromotetoClass，操作时注意蓝色框的位置，如下图所示：11、把MyTabPanel导出生成类，具体操作参照第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:\WEB\apache\webapps\test文件夹中建立page01.html和page02.html两个html文件，文件内容你自己定。17、分别在控制器onButton0101Click和控制器onButton0102Click中加入一行代码，如下图所示：18、我们测试一下，在浏览器中访问a.html或app.html，如下图所示：19、如果想把二个按钮搞整齐，请修改D:\WEB\apache\webapps\test\app\view\MyPanel.js文件中的width:138值改为width:”100%”和width:96值改为width:”100%”，如下图所示：20、补充说明，对象的一些附加属性[id、name、title等]可以在第6步哪里设置，项目里的对象最好要修改它的id属性，id值最好不重复；本人也是初学者，有误的请指点，谢谢。我的mail:501448@qq.com如下是源码下载的地址：://download.csdn.net/detail/qq501448/6353025