ExtJS初探：在專案中使用ExtJS

Liam Wang發表於2013-07-03
JS

注意：本文寫作時間是 2013 年，所講的 ExtJS 如今早已過時，請勿學習！

--------------------------------

 

今天ExtJS官網釋出了ExtJS最新正式版4.2.1。Ext JS 4.2.1 正式版 下載

ExtJS為開發者在開發富客戶的B/S應用中提供豐富的UI元件，具有統一的主題，便於快速開發，提高效率。但顯然它並不適合網際網路站的開發。

主要目錄檔案介紹

builds：壓縮後的ExtJS程式碼，體積更小，更快；
docs：開發文件；
examples：官方演示示例；
locale：多國語言資原始檔；
pkgs：ExtJS各部分功能的打包檔案；
resource：ExtJS所需要的CSS與圖片檔案；
src：未壓縮的原始碼目錄；
bootstarp.js：ExtJS庫引導檔案,可自動切換ext-all.js與ext-all-debug.js；
ext-all.js：ExtJS核心庫；
ext-all-debug.js：ExtJS核心庫的除錯版,除錯時使用。
ext-all-debug-w-comments.js：帶註釋的ExtJS核心庫除錯版。

如何引入檔案

在專案中使用ExtJS，以下檔案必需的：1 整個resources資料夾
2 ext-all.js或ext-all-debug.js或ext-all-debug-w-comments.js檔案
3 ext-lang-zh_CN.js檔案

在頁面中用到ExtJS至少引入以下檔案：

1 resources\css\ext-all.css
2 ext-all.js（如果要對ExtJS程式碼進行除錯或學習可引入ext-all-debug.js或ext-all-debug-w-comments.js）
3 ext-lang-zh_CN.js

一個簡單示例

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>ExtJs</title>
    <link href="ExtJs/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <script src="ExtJs/ext-all-debug-w-comments.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>
    <script type="text/javascript">
        Ext.onReady(function () {
            //建立一個窗體
            var win = new Ext.Window({
                width: 300,
                height:300,
                items: [],
                modal: true,
                buttonAlign: 'center',
                buttons: [{
                    text: '測試', id: 'btnTest', handler: function () {
                        Ext.Msg.show({
                            title: '詢問',
                            msg: '您喜歡 ExtJs 嗎？',
                            fn: processResult,
                            icon: Ext.Msg.QUESTION,
                            buttons: Ext.Msg.YESNO
                        });
                    }
                }
                ]
            });
            win.show();
        });

        //詢問對話方塊處理Handler
        function processResult(btn) {
            Ext.Msg.alert('結果', btn);
        }
    </script>
</head>
<body>
    <div>
    </div>
</body>
</html>

 

 

相關文章