EXT入門培訓(xùn)ppt課件.ppt

ExtJS入門培訓(xùn) 張燕2009 12 3 1 目錄 一 ExtJS概述二 實(shí)例三 實(shí)踐 2 1 1 ExtJS概述 1 ExtJS是一個(gè)用javascript編寫 與后臺技術(shù)無關(guān)的前端Ajax框架 用來開發(fā)帶有華麗外觀的富客戶端應(yīng)用 使得我們的b s應(yīng)用更加具有活力及生命力 2 3 1 2 ExtJS的文件結(jié)構(gòu) adapter 負(fù)責(zé)將里面提供第三方底層庫 包括Ext自帶的底層庫 映射為Ext所支持的底層庫 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全部的源碼 里面分類存放 遵從LesserGNU LGPL 開源的協(xié)議 resources ExtUI資源文件目錄 如CSS 圖片文件都存放在這里面 exmaples 提供使用ExtJs技術(shù)做出的小實(shí)例 docs API幫助文檔 build 壓縮后的ext全部源碼 里面分類存放 4 1 3 ExtJS的應(yīng)用 使用ExtJS框架的頁面中一般包括下面幾句 5 1 4 ExtJS類庫 底層API core 提供了對DOM操作 查詢的封裝 事件處理 DOM查詢器等基礎(chǔ)的功能 控件 widgets 可以直接在頁面中創(chuàng)建的可視化組件 比如面板 選項(xiàng)板 表格 樹 窗口 菜單 工具欄 按鈕等等 實(shí)用工具Utils Ext提供了很多的實(shí)用工具 方便實(shí)現(xiàn)如數(shù)據(jù)內(nèi)容格式化 JSON數(shù)據(jù)解碼或反解碼 對Date Array 發(fā)送Ajax請求 Cookie管理 CSS管理等擴(kuò)展等功能 6 1 5 ExtJS組件 基本組件 7 1 5 ExtJS組件 工具欄組件 8 1 5 ExtJS組件 表單及字段組件 9 1 6 ExtJS組件使用 10 1 6 ExtJS事件 11 1 7 ExtJS布局 布局是指容器組件中子元素的分布 排列組合方式 Ext的所有容器組件都支持布局操作 每一個(gè)容器都會有一個(gè)對應(yīng)的布局 布局負(fù)責(zé)管理容器組件中子元素的排列 組合及渲染方式等 ExtJS的容器組件包含一個(gè)layout及l(fā)ayoutConfig配置屬性 分別用來指定容器使用的布局及布局的詳細(xì)配置信息 如果沒有指定容器組件的layout則默認(rèn)會使用ContainerLayout作為布局 Ext中的一些容器組件都已經(jīng)指定所使用的布局 比如TabPanel使用card布局 FormPanel使用form布局 GridPanel中的表格使用column布局等 不能給這些容器組件再指定另外的布局 ExtJS2 0一共包含十種布局 常用的布局有border column fit form card tabel等布局 12 1 8 ExtJS常用布局 Border 把容器分成東南西北中五個(gè)區(qū)域 分別由east south west north cente來表示 在往容器中添加子元素的時(shí)候 只需要指定這些子元素所在的位置 Border布局會自動(dòng)把子元素放到布局指定的位置 13 1 8 ExtJS常用布局 Column列 把整個(gè)容器組件看成一列 然后往里面放入子元素的時(shí)候 可以通過在子元素中指定使用columnWidth或width來指定子元素所占的列寬度 columnWidth表示使用百分比的形式指定列寬度 而width則是使用絕對象素的方式指定列寬度 14 1 8 ExtJS常用布局 Form 是一種專門用于管理表單中輸入字段的布局 主要用于在程序中創(chuàng)建表單字段或表單元素等使用 15 1 8 ExtJS常用布局 Accordion 使用該布局的容器組件中的子元素是可折疊的形式 16 目錄 一 ExtJS概述二 實(shí)例三 實(shí)踐 17 2 1 Ext2 0自帶示例 ext 2 0 2 examples 18 2 2 ShsaOA頁面 19 2 2 Ext框架 1 新建工程 導(dǎo)入類庫文件2 將Ext拷貝到工程中3 制作jsp頁面 編寫jsp中調(diào)用的ExtJs 編寫ExtJs中調(diào)用的Action 20 目錄 一 ExtJS概述二 實(shí)例