在了解基礎(chǔ)后，可能會用Ext+ajax開發(fā)一個簡單的小項(xiàng)目，會一點(diǎn)一滴的講解項(xiàng)目開發(fā)過程，希望能給大家?guī)硎斋@！因?yàn)槲冶救艘苍趯W(xué)習(xí)這個框架，所以對文章有什么建議請?zhí)岢?，這樣可能會讓我學(xué)到更多。


看到這幅圖，你可能認(rèn)為是某個軟件，或者是Flash、Flex、silverlight等等，但這是javascript+Css實(shí)現(xiàn)的。



      在看這樣式與效果，如果加在自己的項(xiàng)目里，用戶視覺與操作的體驗(yàn)應(yīng)該會很爽吧。 還有更多的特效就不一一截圖了。
      下面開始說一下這個組件，ExtJs是一個不錯的Ajax框架，是用javascript寫的。效果什么樣上面也看到了。我們能夠把ExtJs應(yīng)用到任何web開發(fā)語言中。他的客戶端效果是非常強(qiáng)大的，同時(shí)Ext也提供了與服務(wù)器交互的機(jī)制，用起來非常方便，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>

      兩種寫法可以實(shí)現(xiàn)同一個效果
      注意Ext.onReady(start)不需要加()。
      Ext.MessageBox.alert("ok","Extjs框架已加載！");用于輸出一個對話框。
      Ext.MessageBox.alert('標(biāo)題','彈出內(nèi)容');它也可以寫成Ext.Msg.alert('','');
運(yùn)行效果如下

     一個alert對話框可以輕松用Extjs來實(shí)現(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用來判斷用戶選擇了取消還是確定選項(xiàng)。確定則為該值為'ok'。text為輸入的文字。


      只列舉兩個小例子做說明，還有confim等用法都相似。
      還有一個比較常用，也比較容易理解的Window框。
     
      這個漂亮框框可以拖動，點(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();
} 

      這里就需要創(chuàng)建一個Ext.Window的對象，調(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代碼 

最新評論