Extjs基礎知識

一、環境的搭建

從官網下載Extjs 4.1 的工具包，裡面的東西很多，我們在開發階段並不需要太多的東西，因此保留 了我們需要用到的最少的幾個檔案：

其中resources為資源和一些Extjs樣式檔案，local為語言套件，Extjs4.0新增加了bootstrap.js這樣一 個檔案，我們可以看下它的源碼來瞭解一下它的作用：

if (isDevelopment === null) {        for (i = 0, ln = localhostTests.length; i < ln; i++) {            test = localhostTests[i];                if (host.search(test) !== -1) {                isDevelopment = true;                break;            }        }    }        if (isDevelopment === null && window.location.protocol === 'file:') {        isDevelopment = true;    }        document.write('<script type="text/javascript" charset="UTF-8" src="' +         path + 'ext-all' + (isDevelopment ? '-dev' : '') + '.js"></script>');

我們可以瞭解到，其實它的作用就是判斷我們是處於開發模式還是偵錯模式，然後動態給我們引入 所需要的js檔案。因此如果我們需要在頁面內編寫Extjs，只需要為Extjs引入這樣兩個檔案：

<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css">
<script type="text/javascript" src="../ext/bootstrap.js"></script>

這樣我們最簡單的一個環境就搭建完成了。

二、Hello World

學習每個語言必定都是從Hello World開始的，在javascript中我們使用alert來彈出提示框，而在 Extjs中我們採用如下的方式：

1 (function(){
2     Ext.onReady(function(){
3         Ext.MessageBox.alert("hello","Hello World! ");
4         }）
5 })();