1、EXT Js 系列精品課件,Ext JS框架入門培訓(xùn) 2011.08.11,EXT Js 系列精品課件,一、 Ext Js 簡 介 二、 Ext Js類庫 三、 Ext Js基礎(chǔ)組件 四、 ExtJs布局,Ext Js 簡 介,什么是ext？ Ext是一個Ajax框架，可以用來開發(fā)帶有華麗外觀的富客戶端應(yīng)用，使得我們的b/s應(yīng)用更加具有活力及生命力，提高用戶體驗(yàn)。 Ext是一個用javascript編寫，與后臺技術(shù)無關(guān)的前端ajax框架。因此，可以把Ext用在.Net、Java、Php等各種開發(fā)語言開發(fā)的應(yīng)用中。 Ext最新版本是ext4.0,Ext Js 簡 介,界面示例一,Ext Js 簡

2、 介,界面示例二,Ext Js 簡 介,獲得ExtJS 要使用ExtJS，那么首先要得到ExtJS 庫文件，該框架是一個開源的，可以直接從官方 網(wǎng)站下載，地址： 最新版本為Ext JS 4.0.2a (收費(fèi))，3.0及以前版本不收費(fèi)。,Ext Js 簡 介,ExtJs發(fā)布包目錄:,Ext Js 簡 介,adapter：負(fù)責(zé)將里面提供第三方底層庫（包括Ext 自帶的底層庫）映射為Ext 所支持的底層庫。 air： Ext對基于Air可視化編輯器的支持。 build： 壓縮后的ext 全部源碼(里面分類存放)。 docs： API 幫助文檔。 exmaples：提供使用ExtJs 技術(shù)做出的小實(shí)例

3、。 package：Ext提供常用控件。 resources：Ext UI 資源文件目錄，如CSS、圖片文件都存放在這里面。 source： 無壓縮Ext 全部的源碼(里面分類存放) 遵從Lesser GNU （LGPL） 開源的協(xié)議。,Ext Js 簡 介,Ext-all.js：壓縮后的Ext 全部源碼。 ext-all-debug.js：無壓縮的Ext 全部的源碼(用于調(diào)試)。 ext-core.js：壓縮后的Ext 的核心組件，包括sources/core 下的所有類。 ext-core-debug.js：無壓縮Ext 的核心組件，包括sources/core 下的所有類。,Ext Js

4、 簡 介,EXT API參考手冊,Ext Js 簡 介, ExtJS Ext.onReady(function() Ext.MessageBox.alert(hello,Hello,easyjf open source); ); ,ExtJs代碼示例（HelloWorld）:,Ext Js 簡 介,hello.html頁面效果,Ext Js 簡 介,EXTJs 比其他JS框架的優(yōu)勢：,EXT Js 系列精品課件,一、 Ext Js 簡 介 二、 Ext Js類庫 三、 Ext Js基礎(chǔ)組件 四、 ExtJs布局,Ext Js類庫,ExtJS 由一系列的類庫組成，一旦頁面成功加載了ExtJS 庫

5、后，我們就可以在頁面中調(diào)用ExtJS 的類及控件來實(shí)現(xiàn)需要的功能。ExtJS 的類庫由以下幾部分組成： 底層API(core) 控件(widgets) 實(shí)用工具(Utils),Ext Js類庫,底層API(core)：底層API 中提供了對DOM 操作、查詢的封裝、事件處理、DOM 查詢器等基礎(chǔ)的功能。其它控件都是建立在這些底層api 的基礎(chǔ)上，底層api 位于源代碼目錄的core 子目錄中，包括DomHelper.js、Element.js 等文件。,Ext Js類庫,控件(widgets)：控件是指可以直接在頁面中創(chuàng)建的可視化組件，比如面板、選項(xiàng)板、表格、樹、窗口、菜單、工具欄、按鈕等等，

6、在我們的應(yīng)用程序中可以直接通過應(yīng)用這些控件來實(shí)現(xiàn)友好、交互性強(qiáng)的應(yīng)用程序的UI?？丶挥谠创a目錄的widgets 子目錄中。,Ext Js類庫,實(shí)用工具Utils：Ext 提供了很多的實(shí)用工具，可以方便我們實(shí)現(xiàn)如數(shù)據(jù)內(nèi)容格式化、JSON數(shù)據(jù)解碼或反解碼、對Date、Array、發(fā)送Ajax 請求、Cookie 管理、CSS 管理等擴(kuò)展等功能。,EXT Js 系列精品課件,一、 Ext Js 簡 介 二、 Ext Js類庫 三、 Ext Js基礎(chǔ)組件 四、 ExtJs布局,Ext Js基礎(chǔ)組件,Ext組件簡介 Ext2.0對整個框架進(jìn)行了重構(gòu)，最為杰出的是推出了一個以Component類為基礎(chǔ)

7、的組件體系，在Component類基礎(chǔ)上，使用面向?qū)ο蟮姆椒ǎO(shè)計了一系列的組件及控件。因此，要能游刃有余地使用Ext，熟悉Ext組件體系是最基本的。 通過組件結(jié)構(gòu)圖我們可以一目了然的看出整個Ext組件繼承及組成體系，當(dāng)使用一個組件的時間，了解他的繼承體系，這樣可以便于我們掌握組件的各種特性,Ext Js基礎(chǔ)組件,Ext Js基礎(chǔ)組件,Ext Js基礎(chǔ)組件,Ext Js基礎(chǔ)組件,Ext Js基礎(chǔ)組件,Ext.FormPanel,EXT核心組件應(yīng)用,Ext.tree.TreePanel,Ext.Window,toolBar and Menus,Ext界面中的布局,Ext.grid.GridPan

8、el,Record 、 Store 、 DataProxy、DataReader,輔助函數(shù),Ext Js基礎(chǔ)組件,組件可以直接通過new 關(guān)鍵子來創(chuàng)建，比如控件一個窗口，使用new Ext.Window()，創(chuàng)建一個表格則使用new Ext.GridPanel()。當(dāng)然，除了一些普通的組件以外，一般都會在構(gòu)造函數(shù)中通過傳遞構(gòu)造參數(shù)來創(chuàng)建組件。 組件的構(gòu)造函數(shù)中一般都可以包含一個對象，這個對象包含創(chuàng)建組件所需要的配置屬性及值，組件根據(jù)構(gòu)造函數(shù)中的參數(shù)屬性值來初始化組件。,Ext Js基礎(chǔ)組件,一個簡單的FormPanel效果圖,Ext Js基礎(chǔ)組件,var simple = new Ext.Fo

9、rmPanel( labelWidth: 75, frame:true, url:saveForm.do, title: Simple Form, bodyStyle:padding:5px 5px 0, width: 350, defaults: width: 230,defaultType: textfield, items: fieldLabel: First Name,name: first,allowBlank:false, fieldLabel: Company,name: company, fieldLabel: Email,name: email,vtype:email, ne

10、w Ext.form.TimeField( fieldLabel: Time,name: time, minValue: 8:00am,maxValue: 6:00pm) , buttons: text: Save,text: Cancel );,一個簡單的FormPanel代碼,Ext Js基礎(chǔ)組件,Ext.FormPanel中的數(shù)據(jù)控件 Ext.form.Checkbox, Ext.form.CheckboxGroup Ext.form.ComboBox Ext.form.DateField Ext.form.HtmlEditor Ext.form.NumberField Ext.form

11、.Radio, Ext.form.RadioGroup Ext.form.TextArea Ext.form.TextField Ext.form.TimeField Ext.form.VTypes,Ext Js基礎(chǔ)組件,toolBar是用來存放功能按鈕的容器 toolBar中可以放置所有的FormPanel中的控件 toolBar可以放置在formPanel,panel,gridPanel,treePanel等容器中 示例效果圖,toolBar and Menus,Ext Js基礎(chǔ)組件,Ext.tree.TreePanel Tree是用來顯示樹形數(shù)據(jù)的，效果圖如下,Ext Js基礎(chǔ)組件,Ex

12、t.tree.TreePanel 代碼實(shí)現(xiàn)定義根節(jié)點(diǎn)： Var root = new Ext.tree.AsyncTreeNode( id : 0, text : 未分配權(quán)限, expanded: true );,Ext Js基礎(chǔ)組件,Ext.tree.TreePanel 代碼實(shí)現(xiàn)定義樹的數(shù)據(jù)源 Var store = new Ext.tree.TreeLoader( dataUrl : loadTreeNode.do );,Ext Js基礎(chǔ)組件,Ext.tree.TreePanel 代碼實(shí)現(xiàn)定義樹 var tree = new Ext.tree.TreePanel( rootVisible

13、: true, autoScroll:true, loader : store, enableDD:true, containerScroll: true, dropConfig: appendOnly:true, root : root );,var tree = new Ext.tree.TreePanel( rootVisible : true, autoScroll:true, loader : new Ext.tree.TreeLoader( dataUrl : loadTreeNode.do ), enableDD:true, containerScroll: true, drop

14、Config: appendOnly:true, root : new Ext.tree.AsyncTreeNode( id : 0, text : 未分配權(quán)限, expanded: true ) );,Ext Js基礎(chǔ)組件,Ext.Window 其本身也是一個容器，可以放置所有的EXT控件 主要是用來處理彈出式窗口的,var win=new Ext.Window( id:w, title:lyr:新窗口,/窗口顯示名稱 width:300, height:140, collapsible: true,/是否可折疊 layout : column,/布局方式 model:true, items

15、:/窗口需要增加的內(nèi)容 ).show();/讓窗口顯示出來,Ext Js基礎(chǔ)組件,Ext.grid.GridPanel GridPanel是用來顯示數(shù)據(jù)，并且支持分頁 效果圖,Ext Js基礎(chǔ)組件,Ext.grid.GridPanel 數(shù)據(jù)的顯示非常簡單：HTML文件： JS：var grid = new Ext.grid.GridPanel( el: grid, /renderTo: myPanel ds: ds,/Stroe數(shù)據(jù)源 cm: cm/columnModle 大家可以理解為表頭);grid.render();,Ext Js基礎(chǔ)組件,Ext.grid.GridPanel 首先，一個

16、表格應(yīng)該有列定義，即定義表頭ColumnModel：/ 定義一個ColumnModel，表頭中有四列var cm = new Ext.grid.ColumnModel( header:編號,dataIndex:id, header:性別,dataIndex:sex, header:名稱,dataIndex:name, header:描述,dataIndex:descn); cm.defaultSortable = true; 該ColumnModel定義了表格的四個列，其每列的名稱和對應(yīng)的數(shù)據(jù)鍵。請注意defaultSortable屬性，即為每個列都安上一個可以排序的功能。如果只想某些列舉有該

17、功能，可以設(shè)置：header:編號,dataIndex:id,Sortable:true,Ext Js基礎(chǔ)組件,如何在表格中添加CheckBox呢？ var sm = new Ext.grid.CheckboxSelectionModel();var cm = new Ext.grid.ColumnModel( new Ext.grid.RowNumberer(),/自動行號 sm,/添加的地方 header:編號,dataIndex:id, header:性別,dataIndex:sex, header:名稱,dataIndex:name, header:描述,dataIndex:descn

18、); var grid = new Ext.grid.GridPanel( el: grid3, ds: ds, cm: cm, sm: sm,/添加的地方 title: HelloWorld);,EXT Js 系列精品課件,一、 Ext Js 簡 介 二、 Ext Js類庫 三、 Ext Js基礎(chǔ)組件 四、 Ext Js布局,Ext Js布局,Ext.layout.Accordion,Ext.layout.FitLayout,Ext.layout.CardLayout,Ext.layout.ColumnLayout,Ext.layout.BorderLayout,Ext.layout.For

19、mLayout,Ext.layout.TableLayout,EXT頁面布局:,Ext Js布局,Ext中布局的方式- Ext.layout.Accordion 由類Ext.layout.Accordion定義，名稱為accordion，表示可折疊的布局，也就是說使用該布局的容器組件中的子元素是可折疊的形式,Accordion布局,在布局中配置不同的參數(shù)，會展示出不同的效果。 如：animate為true，表示在執(zhí)行展開折疊時是否應(yīng)用動畫效果。 activeOnTop為true,表示在點(diǎn)擊每一個子元素的頭部名稱或右邊的按鈕，則會展開該面板，收縮其它已經(jīng)展開的面板，并將點(diǎn)擊的那個面板置于頂部顯示

20、。 具體的各個控件的動作和效果大家可以參考API,Ext Js布局,Ext中布局的方式- Ext.layout.BorderLayout 由類Ext.layout.BorderLayout定義，布局名稱為border。該布局把容器分成東南西北中五個區(qū)域，分別由east，south, west，north, center來表示，在往容器中添加子元素的時候，我們只需要指定這些子元素所在的位置，Border布局會自動把子元素放到布局指定的位置,BorderLayout布局,Ext Js布局,Ext中布局的方式-Ext.layout.CardLayout (選項(xiàng)卡) 由Ext.layout.CardL

21、ayout類定義，名稱為card，該布局將會在容器組件中某一時刻使得只顯示一個子元素?？梢詽M足安裝向?qū)?、Tab選項(xiàng)板等應(yīng)用中面板顯示的需求,CardLayout布局,var card = new Ext.Panel( layout : card, activeItem : activeCard, layoutOnTabChange: true, width : 640, layoutConfig : animate : true, items : height: 250,layout : fit,items : diseaseWQZInfo, height: 250,layout : fit,