|
|
在了解基礎(chǔ)后，可能會(huì)用Ext+ajax開發(fā)一個(gè)簡(jiǎn)單的小項(xiàng)目，會(huì)一點(diǎn)一滴的講解項(xiàng)目開發(fā)過程，希望能給大家?guī)硎斋@！因?yàn)槲冶救艘苍趯W(xué)習(xí)這個(gè)框架，所以對(duì)文章有什么建議請(qǐng)?zhí)岢?，這樣可能會(huì)讓我學(xué)到更多。
看到這幅圖，你可能認(rèn)為是某個(gè)軟件，或者是Flash、Flex、silverlight等等，但這是Javascript+Css實(shí)現(xiàn)的。
在看這樣式與效果，如果加在自己的項(xiàng)目里，用戶視覺與操作的體驗(yàn)應(yīng)該會(huì)很爽吧。 還有更多的特效就不一一截圖了。
下面開始說一下這個(gè)組件，ExtJs是一個(gè)不錯(cuò)的Ajax框架，是用Javascript寫的。效果什么樣上面也看到了。我們能夠把ExtJs應(yīng)用到任何web開發(fā)語言中。他的客戶端效果是非常強(qiáng)大的，同時(shí)Ext也提供了與服務(wù)器交互的機(jī)制，用起來非常方便，Ext與服務(wù)器交互的文章后面會(huì)寫到。
在應(yīng)用之前我們需要先獲得這個(gè)框架，可以去 http://extjs.com/products/extjs/download.php 官網(wǎng)下載，開源的。下載完畢解壓后會(huì)得到如下目錄。
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：無壓縮核心組件
接下來將在一個(gè)純靜態(tài)的html頁面中做測(cè)試，如果想應(yīng)用ExtJs首先需要導(dǎo)入3個(gè)腳本文件一個(gè)樣式表
<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文件加載完畢后，會(huì)執(zhí)行Ext.onReady中指定的函數(shù)，我們可以用簡(jiǎn)單的代碼做一個(gè)測(cè)試。
<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>
兩種寫法可以實(shí)現(xiàn)同一個(gè)效果
注意Ext.onReady(start)不需要加()。
Ext.MessageBox.alert("ok","Extjs框架已加載！");用于輸出一個(gè)對(duì)話框。
Ext.MessageBox.alert('標(biāo)題','彈出內(nèi)容');它也可以寫成Ext.Msg.alert('','');
運(yùn)行效果如下
一個(gè)alert對(duì)話框可以輕松用Extjs來實(shí)現(xiàn)了。prompt('','');在Extjs中同樣存在相對(duì)應(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.");
}
);
}
這個(gè)語法稍有麻煩, Ext.MessageBox.prompt('標(biāo)題','說明:',完畢后執(zhí)行的函數(shù)); 執(zhí)行的函數(shù)需要有兩個(gè)參數(shù),button與text。button用來判斷用戶選擇了取消還是確定選項(xiàng)。確定則為該值為'ok'。text為輸入的文字。 
只列舉兩個(gè)小例子做說明，還有confim等用法都相似。
還有一個(gè)比較常用，也比較容易理解的Window框。
這個(gè)漂亮框框可以拖動(dòng)，點(diǎn)X可以關(guān)閉。
用法如下：
function Window(){
var win=new Ext.Window({title:"hello",width:300,height:200,html:'This is the body.'});
win.show();
}
這里就需要?jiǎng)?chuàng)建一個(gè)Ext.Window的對(duì)象，調(diào)用show方法進(jìn)行顯示。
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)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
