Extjs4.2.1中的helloworld

時間 2020-06-15

標籤 extjs4.2.1 extjs helloworld 简体版

原文原文鏈接

ExtJS最新正式版4.2.1下載地址：http://pan.baidu.com/s/1qWNt2kkjavascript

(開發api文檔：https://github.com/extjs-doc-cn/ext4api)css

ExtJS爲開發者在開發富客戶的B/S應用中提供豐富的UI組件，具備統一的主題，便於快速開發，提升效率，可是運行效果比較慢html

主要目錄文件介紹

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

如何引入文件

在項目中使用ExtJS，如下文件必需的：git

1 整個resources文件夾
2 ext-all.js或ext-all-debug.js或ext-all-debug-w-comments.js文件
3 ext-lang-zh_CN.js文件github

------------------------------------------------------------------------------------------------------------------------------------------------------------bootstrap

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

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學習

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

一個簡單示例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="ext-js-4.2.1/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-js-4.2.1/ext-all.js"></script>
<!-- <script type="text/javascript" src="ext-js-4.2.1/bootstrap.js"></script> -->
<script type="text/javascript" src="ext-js-4.2.1/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function() {  
            Ext.create('Ext.window.Window', {
                title: 'Hello',
                height: 200,
                width: 400,
                layout: 'fit',
                items: {  
                    xtype: 'grid',
                    border: false,
                    columns: [{header: 'World'}],                 // 僅僅用來顯示一個頭部。沒有數據，
                    store: Ext.create('Ext.data.ArrayStore', {}) // 一個假的空的數據存儲
                }
            }).show();
        });  
</script>
</head>
<body>
</body>
</html>

運行效果：ui

相關標籤/搜索

eclipse+spket+extjs4.2.1

每日一句

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