代码改变世界

ExtJs学习笔记(1)---ExtJs安装及其使用

2017-06-02 17:25  tlnshuju  阅读(239)  评论(0)  编辑  收藏  举报

从官网下载了ExtJs的3.2版本号的SDK，包括了代码依赖的具体说明、文档、范例和其它文件。当中，adapter和resources文件是Ext正常执行所必须的，其它的仅在开发过程中使用到。

Adapter：支持把Ext和其它代码库一同使用的文件

build：用于自己定义构建ext-all.js的文件

docs：文档中心（仅当执行在server上时可以正常訪问）

examples：大量令人印象深刻富有洞察力的范例

resources：Ext依赖的文件，比如CSS和图片

source：ext的全部代码

在使用Ext之前，我们须要如今页面中引入Ext的库文件，为了达到这个目的，我们须要在HTML页面的head标签区域内引入刚才下载的SDK文件。

<html>
<head>
<title>ExtJs起步</title>
<link rel="stylesheet" type="text/css" href="lib/extjs/resources/css/ext-all.css" />
<script src="lib/extjs/adapter/ext/ext-base.js"></script>
<script src="lib/extjs/ext-all-debug.js"></script>
</head>
<body>
<!--nothing in the body-->
</body>
</html>
Ext文件的引用路径必须是正确的。而且是HTML页面的相对路径。

这些文件必须依赖一下的顺序一次引入。

1.ext-all.css  Ext中基本的CSS文件

2.外部JS库文件 假设有须要能够引入

3.ext-base.js Ext代码库的“适配器”

4.ext-all.js或者ext-all-debug.js 基本的Ext代码库文件

5.在这个位置引入主题文件，也能够在Ext基本的CSS文件引入后的任何位置引用。


前提知识已经准备完成了，開始进行我们的第一个ExtJs页面的编写了。

<html>
<head>
<title>ExtJs起步</title>
<link rel="stylesheet" type="text/css" href="lib/extjs/resources/css/ext-all.css" />
<script src="lib/extjs/adapter/ext/ext-base.js"></script>
<script src="lib/extjs/ext-all-debug.js"></script>
<script>
	Ext.onReady(function(){
		Ext.Msg.alert('Beyole','Hello World');
	});
</script>
</head>
<body>
<!--nothing in the body-->
</body>
</html>

程序截图：

效果还是非常好看的，并且这个对话框是能够任意拖拽的，当然仅仅限制在页面的区域内，由于这毕竟不是真正的对话框，而是一系列DIV标签和图片的组合模拟而成的。

这样以后写出的HTML的前台效果就非常好了。