Ext.教程一：Ext介绍以及 ext页面布局.doc【DOC精选】.docVIP

学习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，下面三个文件是必须导入的 link rel=stylesheet type=text/css href=ext22/resources/css/ext-all.css / ??? script type=text/javascript src=ext22/adapter/ext/ext-base.js/script??? script type=text/javascript src=ext22/ext-all.js/script 第一个导入Ext样式，其实ext就是js+样式，所以必须导入。 第二和第三个都是js文件，必须注意导入顺序,ext-all.js 里面要使用到 ext-base.js设置的基本参数，因此ext-base.js必须先导入！ ext-base.js 有500多k的大小，页面加载的速度可能比较慢，再由于交互性强，特别适合后台管理。可以采用进度条缓冲加载。 Ext对语言支持是非常好的，界面显示的语言是英文。我们可以新建一个语言文件放入到ext包根目录下。通常我们中文的文件命名为ext-lang-zh_CN.js ext最简单应用： script?Ext.onReady(function()?{?Ext.MessageBox.alert(hello,wayfoon);?});?/script ? 布局介绍 你可以先预览效果：布局效果图 布局主要有 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的形式 先定义页面的上部分：（用法见注释） ?//页面的上部分 ????var?northPanel=new?Ext.Panel({ ????????title:顶部面板(实际应用中，通常去掉改属性),//实际应用中，通常去掉该属性。 ????????region?:?north,//北部，即顶部，上面 ????????contentEl?:?north-div,//面板包含的内容 ????????spl