ExtJs 學習筆記 Hello World!第1/2頁

2019-11-21 01:30:05

字體：大中小

來源：轉載

供稿：網友

在了解基礎后，可能會用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個腳本文件一個樣式表

這里要說明一下，在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可以關閉。
      用法如下：