Ext20教程一：Ext介绍以及 ext页面布局doc.doc

学习ext有一段时间了，也开发了几个项目，抽点时间做个总结，刚好公司让我做个Ext培训，于是随便写个Ext教程。Ext介绍Ext是一个很不错的Ajax框架，可以用来开发带有华丽外观的胖客户端应用，使得我们的b/s应用更加具有活力及生命力，提高用户体验。ExtJS是一个用javascript编写，与后台技术无关的前端ajax框架。因此，可以把Ext用在.Net、Java、Php等各种开发语言开发的应用中。至今Ext最新版本是ext2.2，下面的教程都是以Ext2.2作为基础的。Ext 主要有下列类：Extair:适配器data：数据处理dd：页面元素的拖曳form：表单操作grid：装载数据的表格layout:布局menu：各式菜单state:用户状态tree：各式树util：常用函数学习Ext必须注意，使用ext必须导入ext包，将下载好的ext保存在本地硬盘，像导入普通js文件、css文件一样导入需要的文件；要使用ext，下面三个文件是必须导入的 第一个导入Ext样式，其实ext就是js+样式，所以必须导入。第二和第三个都是js文件，必须注意导入顺序,ext-all.js 里面要使用到 ext-base.js设置的基本参数，因此ext-base.js必须先导入！ext-base.js 有500多k的大小，页面加载的速度可能比较慢，再由于交互性强，特别适合后台管理。可以采用进度条缓冲加载。Ext对语言支持是非常好的，界面显示的语言是英文。我们可以新建一个语言文件放入到ext包根目录下。通常我们中文的文件命名为ext-lang-zh_CN.jsext最简单应用：Ext.onReady(function()Ext.MessageBox.alert(hello,wayfoon););布局介绍你可以先预览效果：布局效果图布局主要有 Accordion布局，Border区域布局，Column列布局和Card布局。Accordion布局：Accordion布局由类Ext.layout.Accordion定义，名称为accordion，表示可折叠的布局，也就是说使用该布局的容器组件中的子元素是可折叠的形式。Column列布局：Column列布局由Ext.layout.ColumnLayout类定义，名称为column。列布局把整个容器组件看成一列，然后往里面放入子元素的时候，可以通过在子元素中指定使用columnWidth或width来指定子元素所占的列宽度。columnWidth表示使用百分比的形式指定列宽度，而width则是使用绝对象素的方式指定列宽度，在实际应用中可以混合使用两种方式。Card布局：Card布局由Ext.layout.CardLayout类定义，名称为card，该布局将会在容器组件中某一时刻使得只显示一个子元素。可以满足安装向导、Tab选项板等应用中面板显示的需求。由于时间问题，下面只介绍Border区域布局 这里叫做页面布局采用ext开发的程序，大部分是在一个页面中完成，在该页面中打开多个面板，因此页面布局非常重要，如图一个页面在Ext 中是分为：东西南北中 也就是左右上下中，在实际应用中可以减少一些部分页面布局由类Ext.layout.BorderLayout定义，布局名称为border。该布局把容器分成东南西北中五个区域，分别由east，south, west，north, cente来表示，在往容器中添加子元素的时候，我们只需要指定这些子元素所在的位置，Border布局会自动把子元素放到布局指定的位置。ext 中元素的属性设置都是采用key：value的形式先定义页面的上部分：（用法见注释）1. /页面的上部分 2. varnorthPanel=newExt.Panel( 3. title:顶部面板(实际应用中，通常去掉改属性),/实际应用中，通常去掉该属性。 4. region:north,/北部，即顶部，上面 5. contentEl:north-div,/面板包含的内容 6. split:false,/是否可以改变面板大小 7. border:false,/当面板内容超出面板大小时，是否显示边框 8. collapsible:false,/是否可以收缩,默认不可以收缩，即不显示收缩箭头 9. /collapsed:true,/初始化是否显示,默认是显示 10. height:60 11. );注意 collapsible的使用页面的左菜单：（用法见注释）1. /左边菜单 2. varwestPanel=newExt.Panel( 3. title:左边菜单,/面板名称 4. region:west,/该面板的位置，此处是西部也就是左边 5. split:true,/为true时，布局边框变粗,默认为false 6. border:false, 7. collapsible:true, 8. collapsed:false,/初始化是否显示,默认是显示 9. width:150, 10. minSize:10,/最小宽度 11. maxSize:300, 12. layout:accordion, 13. layoutConfig:/布局 14. titleCollapse:true, 15. animate:true, 16. activeOnTop:false 17. , 18. items: 19. title:统计查询, 20. iconCls:money_box/字面板样式 21. /contentEl:my-book/子面板包含的内容，contentEl的值日通常是一个divID 22. , 23. 24. title:内容管理, 25. border:false,autoScroll:true,iconCls:Icon, 26. autoLoad:url:xx.htm,scripts:true/面板的内容是指向一个*.htm，scripts:true是表示支持包含文件里面的js脚本 27. 28. 29. 30. );左菜单中定义了多个可以折叠的菜单面板，由items包含，上面代码中包含了两个，指向的内容可以使用contentEl包含div，或者 autoLoad加载页面，也可以直接采用html 比如，html:link。其他面板像上面一样定义。最后将多个面板组合到页面：1. varviewport=newExt.Viewport( 2. layout:border,/布局,必须是border 3. loadMask:true, 4. items:northPanel,/上 5. westPanel,/左 6. centerPanel,/中 7. eastPanel,/右 8. southPanel/下 9. 10. );将各个面板分别加到了viewport 中layout的值 可以是 column，border，accordion，页面布局必须使用 border。column在form中使用所有代码如下，可以另存为*.htm，修改ext文件路径，文件执行1. 2. 3. 4. Wayfoon:Ext页面布局 5. 6. 7. 8. 9. 10. 11. 12. 13.14. 15. 16.