什麼是 ext.js

時間 2019-12-13

原文原文鏈接

ExtJS是一個基於JavaScript編寫、

主要用於建立前端用戶界面、

與後臺技術無關的前端AJAX框架，能夠用來開發富客戶端的AJAX應用，功能至關豐富。

主要目錄文件介紹

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核心庫調試版。javascript

如何引入文件

在項目中使用ExtJS，如下文件必需的：1 整個resources文件夾
2 ext-all.js或ext-all-debug.js或ext-all-debug-w-comments.js文件
3 ext-lang-zh_CN.js文件
css

在頁面中用到ExtJS至少引入如下文件：html

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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。