|
|
在了解基礎后，可能會用Ext+ajax開發一個簡單的小項目，會一點一滴的講解項目開發過程，希望能給大家帶來收獲！因為我本人也在學習這個框架，所以對文章有什么建議請提出，這樣可能會讓我學到更多。
看到這幅圖，你可能認為是某個軟件，或者是Flash、Flex、silverlight等等，但這是Javascript+Css實現的。
在看這樣式與效果，如果加在自己的項目里，用戶視覺與操作的體驗應該會很爽吧。 還有更多的特效就不一一截圖了。
下面開始說一下這個組件，ExtJs是一個不錯的Ajax框架，是用Javascript寫的。效果什么樣上面也看到了。我們能夠把ExtJs應用到任何web開發語言中。他的客戶端效果是非常強大的，同時Ext也提供了與服務器交互的機制，用起來非常方便，Ext與服務器交互的文章后面會寫到。
在應用之前我們需要先獲得這個框架，可以去 http://extjs.com/products/extjs/download.php 官網下載，開源的。下載完畢解壓后會得到如下目錄。
adapter：負責將里面提供的第三方底層庫（包括Ext自帶的）映射為Ext所支持的底層庫。
build：壓縮后Ext全部源碼（分類存放）
docs：API幫助文檔
examples：一些Extjs做出的效果示例
resources：Ext UI資源文件目錄，css、圖片都在這
source：無壓縮Ext全部的源碼
ext-all.js ：壓縮后Ext全部源碼，關鍵文件啊，500多K
ext-all-debug.js：無壓縮Ext全部源碼（用于調試）
ext-core.js ：核心組件，包括source/core下所有類
ext-core-debug.js：無壓縮核心組件
接下來將在一個純靜態的html頁面中做測試，如果想應用ExtJs首先需要導入3個腳本文件一個樣式表
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" /> <script src="extjs/ext-base.js" type="text/Javascript"></script> <script src="extjs/ext-all.js" type="text/Javascript"></script> <script src="extjs/ext-lang-zh_CN.js" type="text/Javascript"></script> 這里要說明一下，在Extjs文件加載完畢后，會執行Ext.onReady中指定的函數，我們可以用簡單的代碼做一個測試。
<script language="Javascaript">
function start(){
Ext.MessageBox.alert("ok","Extjs框架已加載！");
}
Ext.onReady(start);
</script>
<script language="Javascaript">
Ext.onReady(
function{
Ext.MessageBox.alert("ok","Extjs框架已加載！");
}
);
</script>
兩種寫法可以實現同一個效果
注意Ext.onReady(start)不需要加()。
Ext.MessageBox.alert("ok","Extjs框架已加載！");用于輸出一個對話框。
Ext.MessageBox.alert('標題','彈出內容');它也可以寫成Ext.Msg.alert('','');
運行效果如下
一個alert對話框可以輕松用Extjs來實現了。prompt('','');在Extjs中同樣存在相對應用法。
function Prompt(){
Ext.MessageBox.prompt(
"Input",
"input a number:",
function(button,text){
if(button=="ok")
Ext.MessageBox.alert("number","the number is "+text);
else
Ext.MessageBox.alert("sorry","the number is null.");
}
);
}
這個語法稍有麻煩, Ext.MessageBox.prompt('標題','說明:',完畢后執行的函數); 執行的函數需要有兩個參數,button與text。button用來判斷用戶選擇了取消還是確定選項。確定則為該值為'ok'。text為輸入的文字。 
只列舉兩個小例子做說明，還有confim等用法都相似。
還有一個比較常用，也比較容易理解的Window框。
這個漂亮框框可以拖動，點X可以關閉。
用法如下：
function Window(){
var win=new Ext.Window({title:"hello",width:300,height:200,html:'This is the body.'});
win.show();
}
這里就需要創建一個Ext.Window的對象，調用show方法進行顯示。
Ext.Window在構造函數中可以傳入很多參數，這里只用到了title、width、height和body區域顯示的內容。
new Ext.Window({title:"",width:300,height:200,html:'This is the body.'});
title:"" 設置標題
width:300 寬度
height:200 高度
html:'xxxx' 可以放置任何html代碼
JavaScript技術：ExtJs 學習筆記 Hello World!第1/2頁，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
