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

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

3、esources：Ext UI 資源文件目錄，如CSS、圖片文件都存放在這里面。source： 無壓縮Ext 全部的源碼(里面分類存放) 遵從Lesser GNU （LGPL） 開源的協(xié)議。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 API參考手冊ExtJS Ext.onReady(function() Ext.M

4、essageBox.alert(hello,Hello,easyjf open source); );ExtJs代碼示例（HelloWorld）: hello.html頁面效果EXTJs EXTJs 比其他比其他JSJS框架的優(yōu)勢：框架的優(yōu)勢： l一、一、 Ext Js Ext Js 簡簡 介介l二、二、 Ext Js Ext Js類庫類庫l三、三、 Ext Js Ext Js基礎(chǔ)組件基礎(chǔ)組件l四、四、 ExtJsExtJs布局布局 ExtJS 由一系列的類庫組成，一旦頁面成功加載了ExtJS 庫后，我們就可以在頁面中調(diào)用ExtJS 的類及控件來實現(xiàn)需要的功能。ExtJS 的類庫由以下幾部分組

5、成：底層API(core)控件(widgets)實用工具(Utils)底層API(core)：底層API 中提供了對DOM 操作、查詢的封裝、事件處理、DOM 查詢器等基礎(chǔ)的功能。其它控件都是建立在這些底層api 的基礎(chǔ)上，底層api 位于源代碼目錄的core 子目錄中，包括DomHelper.js、Element.js 等文件。控件(widgets)：控件是指可以直接在頁面中創(chuàng)建的可視化組件，比如面板、選項板、表格、樹、窗口、菜單、工具欄、按鈕等等，在我們的應(yīng)用程序中可以直接通過應(yīng)用這些控件來實現(xiàn)友好、交互性強的應(yīng)用程序的UI。控件位于源代碼目錄的widgets 子目錄中。實用工具Utils

6、：Ext 提供了很多的實用工具，可以方便我們實現(xiàn)如數(shù)據(jù)內(nèi)容格式化、JSON數(shù)據(jù)解碼或反解碼、對Date、Array、發(fā)送Ajax 請求、Cookie 管理、CSS 管理等擴展等功能。 l一、一、 Ext Js Ext Js 簡簡 介介l二、二、 Ext Js Ext Js類庫類庫l三、三、 Ext Js Ext Js基礎(chǔ)組件基礎(chǔ)組件l四、四、 ExtJsExtJs布局布局 ExtExt組件簡介組件簡介Ext2.0對整個框架進(jìn)行了重構(gòu)，最為杰出的是推出了一個以C Componentomponent類為基礎(chǔ)的組件體系，在Component類基礎(chǔ)上，使用面向?qū)ο蟮姆椒?，設(shè)計了一系列的組件及控件。因此

7、，要能游刃有余地使用Ext，熟悉Ext組件體系是最基本的。通過組件結(jié)構(gòu)圖我們可以一目了然的看出整個Ext組件繼承及組成體系，當(dāng)使用一個組件的時間，了解他的繼承體系，這樣可以便于我們掌握組件的各種特性 Ext.FormPanelEXT核心組件應(yīng)用Ext.tree.TreePanelExt.WindowtoolBar and MenusExt界面中的布局界面中的布局Ext.grid.GridPanelRecord 、 Store 、 DataProxy、DataReader輔助函數(shù)輔助函數(shù)組件可以直接通過new 關(guān)鍵子來創(chuàng)建，比如控件一個窗口，使用new Ext.Window()，創(chuàng)建一個表格則使

8、用new Ext.GridPanel()。當(dāng)然，除了一些普通的組件以外，一般都會在構(gòu)造函數(shù)中通過傳遞構(gòu)造參數(shù)來創(chuàng)建組件。組件的構(gòu)造函數(shù)中一般都可以包含一個對象，這個對象包含創(chuàng)建組件所需要的配置屬性及值，組件根據(jù)構(gòu)造函數(shù)中的參數(shù)屬性值來初始化組件。一個簡單的FormPanel效果圖var simple = new Ext.FormPanel( labelWidth: 75, frame:true, url:saveForm.do, title: Simple Form, bodyStyle:padding:5px 5px 0, width: 350, defaults: width: 230,d

9、efaultType: textfield, items: fieldLabel: First Name,name: first,allowBlank:false, fieldLabel: Company,name: company, fieldLabel: Email,name: email,vtype:email, new Ext.form.TimeField( fieldLabel: Time,name: time, minValue: 8:00am,maxValue: 6:00pm) , buttons: text: Save,text: Cancel);一個簡單的FormPanel代

10、碼Ext.FormPanel中的數(shù)據(jù)控件Ext.form.Checkbox, Ext.form.CheckboxGroupExt.form.Checkbox, Ext.form.CheckboxGroupExt.form.ComboBoxExt.form.ComboBoxExt.form.DateFieldExt.form.DateFieldExt.form.HtmlEditorExt.form.HtmlEditorExt.form.NumberFieldExt.form.NumberFieldExt.form.Radio, Ext.form.RadioGroupExt.form.Radio,

11、 Ext.form.RadioGroupExt.form.TextAreaExt.form.TextAreaExt.form.TextFieldExt.form.TextFieldExt.form.TimeFieldExt.form.TimeFieldExt.form.VTypesExt.form.VTypestoolBar是用來存放功能按鈕的容器toolBar中可以放置所有的FormPanel中的控件toolBar可以放置在formPanel,panel,gridPanel,treePanel等容器中示例效果圖toolBar and MenusExt.tree.TreePanelTree是用

12、來顯示樹形數(shù)據(jù)的，效果圖如下Ext.tree.TreePanel代碼實現(xiàn)定義根節(jié)點： Var Var root = newnew Ext.tree.AsyncTreeNode( id : 0, text : 未分配權(quán)限, expanded: truetrue );Ext.tree.TreePanel代碼實現(xiàn)定義樹的數(shù)據(jù)源 Var store = newnew Ext.tree.TreeLoader( dataUrl : loadTreeNode.do );Ext.tree.TreePanel代碼實現(xiàn)定義樹varvar tree = newnew Ext.tree.TreePanel(rootV

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

14、nerScroll: true, dropConfig: appendOnly:true, root : new Ext.tree.AsyncTreeNode(id : 0,text : 未分配權(quán)限,expanded: true);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.grid.GridPanelGridPanel是用來顯示數(shù)據(jù)，并且支持分頁效果圖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.grid.GridPanel 首先，一個表格應(yīng)該有列定義，即定義表頭ColumnModel：/ 定義一個ColumnM

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

17、id,Sortable:trueSortable:true如何在表格中添加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); var grid = new Ext.grid.

18、GridPanel( el: grid3, ds: ds, cm: cm, sm: sm,/添加的地方 title: HelloWorld); l一、一、 Ext Js Ext Js 簡簡 介介l二、二、 Ext Js Ext Js類庫類庫l三、三、 Ext Js Ext Js基礎(chǔ)組件基礎(chǔ)組件l四、四、 Ext JsExt Js布局布局 Ext.layout.Accordion Ext.layout.FitLayoutExt.layout.CardLayoutExt.layout.ColumnLayoutExt.layout.BorderLayoutExt.layout.FormLayoutE

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

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

21、卡選項卡) )由Ext.layout.CardLayout類定義，名稱為card，該布局將會在容器組件中某一時刻使得只顯示一個子元素?？梢詽M足安裝向?qū)?、Tab選項板等應(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