Ext2.x學習筆記

Ext2.X學習筆記一

一、ExtJS簡介

1.1 什麼是Ext JS？

· Ext JS是一個Ajax框架，可以用來開發富客戶端的Ａｊａｘ應用，是一個用javascript寫的，主要用於建立前端使用者介面。

· Ext JS是一個用javascript編寫，與後臺技術無關的前端ajax框架。因此，可以把Ext用在.Net、Java、Php等各種開發語言開發的應用中。　

　·利用Ext JS 構建的RIA Web應用具有與桌面程式一樣的標準使用者介面與操作方式，並且能夠橫跨不同的瀏覽器平臺。Ext JS已經成為開發具有完滿使用者體驗的Web應用完美選擇。

· Ext JS最新版本是ext4.0，具有動畫功能。

1.2 獲取Ext JS？

要使用Ext JS ，首先要得到ExtJ S 庫檔案，該框架是一個開源的，可以直接從官方網站下載，地址：http://extjs.com。

　解壓縮包之後的目錄如下圖所示：

　　Ext JS開發包介紹

　　adapter：Ext的底層庫和核心程式碼

　　docs：Ext提供的API，即幫助文件

　　examples：官網提供的演示示例

　　resources：主要存放的是樣式檔案和圖片檔案

　　src：存放原始碼檔案

ext-all:Ext的核心庫，是主檔案

二、Ext JS環境配置

　　Ext JS是一個JS庫，所以只要將它放在Web應用程式的目錄下即可使用。它有兩種模式：釋出模式和除錯模式，即ext-all.js和ext-all-debug.js。前者是經過重新排版和壓縮的，檔案比較小，方便應用；後者是未經排版的原始格式，在開發過程中方便除錯。

只需將以下檔案和資料夾加入程式即可：

apapter/ext資料夾、resources資料夾和ext-all.js檔案

2.1 Ext JS開發工具

　　開發利器Spket——是一款全面支援JavaScript的免費開發工具。它有外掛版和IDE兩種版本，我們選擇外掛版可以將它整合到Eclipse，這樣我們就可以快速開發Ext JS應用了。

　　官方網站：www.spket.com。

2.2安裝好外掛後還需經過簡單的設定

　　WindowàPreferences選項，在視窗左邊可以看到Spket選單項。選擇JavaScript Profiles，點New先建立ExtJS選項，再點Add Library，選擇外掛檔案ext.jsb2，最後選擇中所有的選項即可。

三、Ext JS類庫

　 Ext JS 由一系列的類庫組成，一旦頁面成功載入了Ext JS 庫後，我們就可以在頁面中呼叫Ext JS 的類及控制元件來實現需要的功能。

　　 Ext JS 的類庫由以下幾部分組成：

　　·底層API(core)

　　·控制元件(widgets)

　　·實用工具(Utils)

3.1 底層API

底層API 中提供了對Dom操作、查詢的封裝、事件處理、Dom 查詢器等基礎的功能。其它控制元件都是建立在這些底層API的基礎上，底層API位於原始碼目錄的core 子目錄中，包括DomHelper.js、Element.js 等檔案。

3.2 控制元件

　　控制元件是指可以直接在頁面中建立的視覺化元件，比如皮膚、選項板、表格、樹、視窗、選單、工具欄、按鈕等等，在我們的應用程式中可以直接通過應用這些控制元件來實現友好、互動性強的應用程式的UI。控制元件位於原始碼目錄的widgets 子目錄中。

3.3 實用工具

Ext 提供了很多的實用工具，可以方便我們實現如資料內容格式化、JSON資料解碼或反解碼、對Date、Array、傳送Ajax 請求、Cookie 管理、CSS管理等擴充套件等功能。

四、Ext JS基礎元件

　　Ext .Component是Ext JS中所有元件的基類，它的所有子類都自動享有了標準Ext JS元件的生命週期，包括建立、渲染和銷燬。它們也自動支援了標準的隱藏、顯示以及啟用、禁用等操作。

　　元件大致可分成3大類：

　　基本元件——Window、Panel、Button、Grid等

　　表單元件——Form、Textfield等

　　工具欄元件——ToolBar、Menu等

　　靈活應用以上各種元件，就可做出具有優雅介面和良好使用者體驗的Web應用。

4.1 簡單例項　

　　第一個應用——Hello World　

　　　　　Ext.onReady(function(){

　　Ext.Msg.alert('hello world','Hello World！');

　　　　　});

　　</script>

4.2 基本元件　

　　Ext JS的設計結構仿照了Java包和類的概念。所有元件都以類的形式存在，Ext是頂層包，使用時通過new關鍵字來建立。

例如：var win = new Ext.Window({ //建立視窗

el: 'window', //渲染

width: 300, //設定視窗寬度

height: 150, //設定視窗高度

title: 'window', //設定視窗標題

});

win.show(); //顯示視窗

　　Ext JS中的物件也有靜態方法，只要通過類名呼叫即可。

例如： Ext.Msg.alert('Hello World', 'Hello World.');

4.3 工具欄元件　　

　　· ToolBar是用來存放功能按鈕的容器；

　　· ToolBar中可以放置所有的FormPanel中的控制元件；

　　· ToolBar可以放置在Panel， FormPanel，GridPanel，TreePanel等容器中。

　　· Menu是一個選單物件，也是一個容器，可以把所有其它的選單項新增到其中。

五、Ext JS佈局　　

　　·Accordion佈局（Ext.layout.Accordion）

　　·Border佈局（Ext.layout. BorderLayout）

　　·Column佈局（Ext.layout. ColumnLayout）

　　·Form佈局（Ext.layout. FormLayout）

　　·Fit佈局（Ext.layout. FitLayout）

　　·Table佈局（Ext.layout. TableLayout）

　　·Card佈局（Ext.layout. CardLayout）

5.1 Accordion佈局

　 Accordion佈局由類Ext.layout.Accordion定義，名稱為accordion，表示可摺疊的佈局，也就是說使用該佈局的容器元件中的子元素是可摺疊的形式。

　　在佈局中配置不同的引數，會展示出不同的效果。如：animate為true，表示在執行展開摺疊時是否應用動畫效果。activeOnTop為true,表示在點選每一個子元素的頭部名稱或右邊的按鈕，則會展開該皮膚，收縮其它已經展開的皮膚，並將點選的那個皮膚置於頂部顯示。

　　具體的各個控制元件的動作和效果大家可以參考API。

5.2 Border佈局

　　Border佈局由類Ext.layout.BorderLayout定義，佈局名稱為border。該佈局把容器分成東南西北中五個區域，分別由east，south, west，north, center 來表示，在往容器中新增子元素的時候，我們只需要指定這些子元素所在的位置，Border佈局會自動把子元素放到佈局指定的位置。

5.3 Column佈局

Column佈局由Ext.layout.ColumnLayout類定義，名稱為column。列布局把整個容器元件看成一列，然後往裡面放入子元素的時候，可以通過在子元素中指定使用columnWidth或width來指定子元素所佔的列寬度。columnWidth表示使用百分比的形式指定列寬度，而width則是使用絕物件素的方式指定列寬度，在實際應用中可以混合使用兩種方式。