码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-06-01 09:35:59      阅读:372      评论:0      收藏:0      [点我收藏+]

标签:c   style   class   blog   code   a   

从官网下载了ExtJs的3.2版本的SDK,包含了代码依赖的详细说明、文档、范例和其他文件。其中,adapter和resources文件是Ext正常运行所必须的,其他的仅在开发过程中使用到。

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

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

docs:文档中心(仅当运行在服务器上时能够正常访问)

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>

程序截图:bubuko.com,布布扣

效果还是很好看的,而且这个对话框是可以随意拖拽的,当然只限制在页面的区域内,因为这毕竟不是真正的对话框,而是一系列DIV标签和图片的组合模拟而成的。这样以后写出的HTML的前台效果就很好了。

ExtJs学习笔记(1)---ExtJs安装及其使用,布布扣,bubuko.com

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

标签:c   style   class   blog   code   a   

原文地址:http://blog.csdn.net/xuejiawei123/article/details/27794865

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!