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