EXT入門培訓(xùn)（課堂PPT）

1、1ExtJS入門培訓(xùn)張燕2009-12-32目錄一一. ExtJS概述概述二. 實(shí)例三. 實(shí)踐31.1. ExtJS概述 41.2. ExtJS的文件結(jié)構(gòu)adapter：負(fù)責(zé)將里面提供第三方底層庫(kù)（包括Ext自帶的底層庫(kù)） 映射為Ext所支持的底層庫(kù)。 ext-all.js：壓縮后的Ext全部源碼。ext-all-debug.js：無壓縮的Ext全部的源碼(用于調(diào)試)。ext-core.js：壓縮后的Ext的核心組件，包括sources/core下的所有類。ext-core-debug.js：無壓縮Ext的核心組件，包括sources/core下的所有類。source： 無壓縮Ext全部的源碼

2、(里面分類存放) 遵從Lesser GNU （LGPL） 開源的協(xié)議。 resources：Ext UI資源文件目錄，如CSS、圖片文件都存放在這里面。 exmaples：提供使用ExtJs技術(shù)做出的小實(shí)例。 docs： API幫助文檔。build： 壓縮后的ext全部源碼(里面分類存放)。 51.3. ExtJS的應(yīng)用 使用ExtJS框架的頁(yè)面中一般包括下面幾句：61.4. ExtJS類庫(kù)底層底層API(core)： 提供了對(duì)DOM操作、查詢的封裝、事件處理、DOM查詢器等基礎(chǔ)的功能。 控件控件(widgets)：可以直接在頁(yè)面中創(chuàng)建的可視化組件， 比如面板、選項(xiàng)板、表格、樹、窗口、菜單、工

3、具欄、按鈕等等。 實(shí)用工具實(shí)用工具Utils：Ext提供了很多的實(shí)用工具， 方便實(shí)現(xiàn)如數(shù)據(jù)內(nèi)容格式化、JSON數(shù)據(jù)解碼或反解碼、對(duì)Date、Array、 發(fā)送Ajax請(qǐng)求、Cookie管理、CSS管理等擴(kuò)展等功能 71.5.ExtJS組件基本組件81.5.ExtJS組件工具欄組件91.5.ExtJS組件表單及字段組件101.6.ExtJS組件使用111.6.ExtJS事件121.7.ExtJS布局布局是指容器組件中子元素的分布、排列組合方式。布局是指容器組件中子元素的分布、排列組合方式。Ext的所有容器組件都支持布局操作，每一個(gè)容器都會(huì)有一個(gè)對(duì)應(yīng)的布局，布局負(fù)責(zé)管理容器組件中子元素的排列、組合

4、及渲染方式等。 ExtJS的容器組件包含一個(gè)的容器組件包含一個(gè)layout及及l(fā)ayoutConfig配置屬性，配置屬性，分別用來指定容器使用的布局及布局的詳細(xì)配置信息；如果沒有指定容器組件的layout則默認(rèn)會(huì)使用ContainerLayout作為布局。Ext中的一些容器組件都已經(jīng)指定所使用的布局，中的一些容器組件都已經(jīng)指定所使用的布局，比如TabPanel使用card布局、FormPanel使用form布局，GridPanel中的表格使用column布局等，不能給這些容器組件再指定另外的布局。ExtJS2.0一共包含十種布局，一共包含十種布局，常用的布局有border、column、fit

5、、form、card、tabel等布局 。131.8.ExtJS常用布局Border把容器分成東南西北中五個(gè)區(qū)域，分別由把容器分成東南西北中五個(gè)區(qū)域，分別由east，south, west，north, cente來表示，來表示，在往容器中添加子元素的時(shí)候，只需要指定這些子元素所在的位置，在往容器中添加子元素的時(shí)候，只需要指定這些子元素所在的位置，Border布局會(huì)布局會(huì)自動(dòng)把子元素放到布局指定的位置自動(dòng)把子元素放到布局指定的位置 141.8.ExtJS常用布局Column列把整個(gè)容器組件看成一列，然后往里面放入子元素的時(shí)候，可以通過在子元素中把整個(gè)容器組件看成一列，然后往里面放入子元素的時(shí)候

6、，可以通過在子元素中指定使用指定使用columnWidth或或width來指定子元素所占的列寬度。來指定子元素所占的列寬度。columnWidth表示使用百分比的形式指定列寬度，表示使用百分比的形式指定列寬度，而而width則是使用絕對(duì)象素的方式指定列寬度，則是使用絕對(duì)象素的方式指定列寬度， 151.8.ExtJS常用布局Form是一種專門用于管理表單中輸入字段的布局，是一種專門用于管理表單中輸入字段的布局，主要用于在程序中創(chuàng)建表單字段或表單元素等使用主要用于在程序中創(chuàng)建表單字段或表單元素等使用 161.8.ExtJS常用布局Accordion使用該布局的容器組件中的子元素是可折疊的形式使用該布局的容器組件中的子元素是可折疊的形式 17目錄一. ExtJS概述二二. 實(shí)例實(shí)例三. 實(shí)踐182.1. Ext2.0自帶示例192.2. ShsaOA頁(yè)面202.2. Ext框架1.新建工程，導(dǎo)入類庫(kù)文件新建工程，導(dǎo)入類庫(kù)文件2.將將Ext拷貝到工程中拷貝到工程中3.制作制作jsp頁(yè)面，編寫頁(yè)面，編寫jsp中調(diào)用的中調(diào)用的ExtJs，編寫，編寫ExtJs中調(diào)用的中調(diào)用的Action21目錄一. ExtJS概述二. 實(shí)例三三. 實(shí)踐實(shí)