1. 程式人生 > >ExtJs-5.1.0入門學習

ExtJs-5.1.0入門學習

早就聽說ext,只是簡單的認為是和Jquery類似的js框架,並沒有實際應用或者深入學習過,因工作需要進行深入學習。

從ExtJs發展到現在已經發布到5.1.0了,最新的入門資料ExtJs的版本比較老,下載的原始碼包目錄也不一樣,學習時真是費了不少功夫。

入門就感覺拿過原始碼包,簡單放到專案寫個HelloWorld例子就算入門了。可是實際上也沒那麼容易,最新包下載下來,真是很龐大,後來被自己精簡到自認為不能再簡了。

看一下


ext-locale:語言包,只留了中文,在頁面引入後,自帶的控制元件可以支援中文,例如,表格中的排序篩選,如果不加這個js的引用,會是英文,加上就顯示中文了
ext-theme-crisp:主題我只留了一個最新加的主題,其他主題也暫時沒加進來,對於ext-theme-crisp這個主題包,是全部放進來的,不知道是不是都有用

目錄精簡這部分是參考:

精簡後加入自己的java web 專案,然後寫一個index.html,當時選擇html模板的時候,考慮了一下,選了html5,沒有特別的,只是簡單
執行,沒問題。

第一個HelloWorld專案算是完成了。

下面是在
Sencha中文站
學習資料的時候看到的一個MVC的例子,感興趣,也拿來試了一把
參考資料地址:


其中mvc.html程式碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MVC</title>
<script src="ext-5.1.0/ext-all.js"></script>
<script src="ext-5.1.0/packages/ext-locale/ext-locale-zh_CN.js"></script>
<link href="ext-5.1.0/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css" rel="stylesheet" />

<script src="app/app.js"></script>
</head>
<body>

</body>
</html>
執行後: