Fork me on GitHub

Extjs4.2.1中的helloworld

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

(开发api文档：https://github.com/extjs-doc-cn/ext4api)

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

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

运行效果：

posted on 2015-04-27 15:28  骑着乌龟漫步  阅读(534)  评论(0)  编辑  收藏  举报

导航