Ext2.X學習筆記一
一、ExtJS簡介
1.1 什麼是Ext JS?
· Ext JS是一個Ajax框架,可以用來開發富客戶端的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環境配置
apapter/ext資料夾、resources資料夾和ext-all.js檔案
<link rel="stylesheet" type="text/css" href="ext-3.3.1/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.3.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.3.1/ext-all.js"></script>
開發利器Spket——是一款全面支援JavaScript的免費開發工具。它有外掛版和IDE兩種版本,我們選擇外掛版可以將它整合到Eclipse,這樣我們就可以快速開發Ext JS應用了。
官方網站:www.spket.com。
WindowàPreferences選項,在視窗左邊可以看到Spket選單項。選擇JavaScript Profiles,點New先建立ExtJS選項,再點Add Library,選擇外掛檔案ext.jsb2,最後選擇中所有的選項即可。
三、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元件的生命週期,包括建立、渲染和銷燬。它們也自動支援了標準的隱藏、顯示以及啟用、禁用等操作。
基本元件——Window、Panel、Button、Grid等
表單元件——Form、Textfield等
工具欄元件——ToolBar、Menu等
第一個應用——Hello World
<link rel=“stylesheet” type=“text/css” href=“../resources/css/ext-all.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.Msg.alert('hello world','Hello World!');
});
</script>
例如:var win = new Ext.Window({ //建立視窗
el: 'window', //渲染
width: 300, //設定視窗寬度
height: 150, //設定視窗高度
title: 'window', //設定視窗標題
});
win.show(); //顯示視窗
例如: 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,表示可摺疊的佈局,也就是說使用該佈局的容器元件中的子元素是可摺疊的形式。
Column佈局由Ext.layout.ColumnLayout類定義,名稱為column。列布局把整個容器元件看成一列,然後往裡面放入子元素的時候,可以通過在子元素中指定使用columnWidth或width來指定子元素所佔的列寬度。columnWidth表示使用百分比的形式指定列寬度,而width則是使用絕物件素的方式指定列寬度,在實際應用中可以混合使用兩種方式。
5.4 Form佈局
Form佈局方式由類Ext.layout.FormLayout提供,定義的名稱為form。一般情況只用於formPanel的佈局,把formPanel中的各子元素按每行一列的方式進行佈局顯示。
5.5 Fit佈局
Fit佈局方式由Ext.layout. FitLayout類定義,名稱為fit。填充佈局方式是把容器中的子元素覆蓋容器的整個區域。
六、總結
Ext JS配置方便且相容各種瀏覽器
基於物件導向程式設計(oop),並且以事件驅動模型為基礎的。
為建立富客戶端應用(RIA)提供了豐富的元件物件
和後臺程式碼無關,不管是C#換是JAVA也或者PHP,都和它沒關係
4.0版本提供了動畫效果,提高了使用者的感知度