EXT入门培训（课堂PPT）

1、1ExtJS入门培训张燕2009-12-32目录一一. ExtJS概述概述二. 实例三. 实践31.1. ExtJS概述 41.2. ExtJS的文件结构adapter：负责将里面提供第三方底层库（包括Ext自带的底层库） 映射为Ext所支持的底层库。 ext-all.js：压缩后的Ext全部源码。ext-all-debug.js：无压缩的Ext全部的源码(用于调试)。ext-core.js：压缩后的Ext的核心组件，包括sources/core下的所有类。ext-core-debug.js：无压缩Ext的核心组件，包括sources/core下的所有类。source： 无压缩Ext全部的源码

2、(里面分类存放) 遵从Lesser GNU （LGPL） 开源的协议。 resources：Ext UI资源文件目录，如CSS、图片文件都存放在这里面。 exmaples：提供使用ExtJs技术做出的小实例。 docs： API帮助文档。build： 压缩后的ext全部源码(里面分类存放)。 51.3. ExtJS的应用 使用ExtJS框架的页面中一般包括下面几句：61.4. ExtJS类库底层底层API(core)： 提供了对DOM操作、查询的封装、事件处理、DOM查询器等基础的功能。 控件控件(widgets)：可以直接在页面中创建的可视化组件， 比如面板、选项板、表格、树、窗口、菜单、工

3、具栏、按钮等等。 实用工具实用工具Utils：Ext提供了很多的实用工具， 方便实现如数据内容格式化、JSON数据解码或反解码、对Date、Array、 发送Ajax请求、Cookie管理、CSS管理等扩展等功能 71.5.ExtJS组件基本组件81.5.ExtJS组件工具栏组件91.5.ExtJS组件表单及字段组件101.6.ExtJS组件使用111.6.ExtJS事件121.7.ExtJS布局布局是指容器组件中子元素的分布、排列组合方式。布局是指容器组件中子元素的分布、排列组合方式。Ext的所有容器组件都支持布局操作，每一个容器都会有一个对应的布局，布局负责管理容器组件中子元素的排列、组合

4、及渲染方式等。 ExtJS的容器组件包含一个的容器组件包含一个layout及及layoutConfig配置属性，配置属性，分别用来指定容器使用的布局及布局的详细配置信息；如果没有指定容器组件的layout则默认会使用ContainerLayout作为布局。Ext中的一些容器组件都已经指定所使用的布局，中的一些容器组件都已经指定所使用的布局，比如TabPanel使用card布局、FormPanel使用form布局，GridPanel中的表格使用column布局等，不能给这些容器组件再指定另外的布局。ExtJS2.0一共包含十种布局，一共包含十种布局，常用的布局有border、column、fit

5、、form、card、tabel等布局 。131.8.ExtJS常用布局Border把容器分成东南西北中五个区域，分别由把容器分成东南西北中五个区域，分别由east，south, west，north, cente来表示，来表示，在往容器中添加子元素的时候，只需要指定这些子元素所在的位置，在往容器中添加子元素的时候，只需要指定这些子元素所在的位置，Border布局会布局会自动把子元素放到布局指定的位置自动把子元素放到布局指定的位置 141.8.ExtJS常用布局Column列把整个容器组件看成一列，然后往里面放入子元素的时候，可以通过在子元素中把整个容器组件看成一列，然后往里面放入子元素的时候

6、，可以通过在子元素中指定使用指定使用columnWidth或或width来指定子元素所占的列宽度。来指定子元素所占的列宽度。columnWidth表示使用百分比的形式指定列宽度，表示使用百分比的形式指定列宽度，而而width则是使用绝对象素的方式指定列宽度，则是使用绝对象素的方式指定列宽度， 151.8.ExtJS常用布局Form是一种专门用于管理表单中输入字段的布局，是一种专门用于管理表单中输入字段的布局，主要用于在程序中创建表单字段或表单元素等使用主要用于在程序中创建表单字段或表单元素等使用 161.8.ExtJS常用布局Accordion使用该布局的容器组件中的子元素是可折叠的形式使用该布局的容器组件中的子元素是可折叠的形式 17目录一. ExtJS概述二二. 实例实例三. 实践182.1. Ext2.0自带示例192.2. ShsaOA页面202.2. Ext框架1.新建工程，导入类库文件新建工程，导入类库文件2.将将Ext拷贝到工程中拷贝到工程中3.制作制作jsp页面，编写页面，编写jsp中调用的中调用的ExtJs，编写，编写ExtJs中调用的中调用的Action21目录一. ExtJS概述二. 实例三三. 实践实