概述
ExtJS是一个用javascript、CSS和HTML等技术实现的主要用于创建RIA即富客户端,且与后台技术无关的前端Ajax框架。
GPL协议版本下载 :http://cdn.sencha.com/ext/gpl/ext-4.2.1-gpl.zip
API :http://docs.sencha.com/extjs/4.2.1/#!/api
实例 :http://docs.sencha.com/extjs/4.2.1/#!/example
中文API(4.1.0版本) :http://extjs-doc-cn.github.io/ext4api/
Hello Extjs4.2
为便捷,这里我们使用hbuilder 进行开发。下载地址:http://www.dcloud.io/
hbuilder编辑器中创建web项目”extjs” , 解压我们刚刚下载好的extjs-4.3.1-gpl.zip , 删除hbuilder为我们创建好的js,img,css目录,新建extjs目录,结构图如下
复制我们解压文件目录中的ext-all.js到我们项目中的extjs/根目录
复制“resources”目录(含所有文件)到extjs/resources目录
复制“locale”目录(只要ext-lang-zh_CN.js)导extjs/locale目录
这时的结构图如下:
3.编辑index.html,引入css,js,locale文件,内容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/ext-all.js" ></script>
<script type="text/javascript" src="extjs/locale/ext-lang-zh_CN.js"></script>
<script>
Ext.onReady(function(){
Ext.Msg.alert("信息", "Hello Extjs4.2");
})
</script>
</head>
<body>
</body>
</html>
点击工具栏的浏览器,选择在浏览器中浏览,查看运行结果
结果
extjs4.2为我们提供了4中css样式,classic(经典:默认此主题)、access(稳重/黑色)、gray(灰色)、neptune(海王星) ,在
我们的项目路径下的“resources”可以看到。引入不同的css,可以看到不同的样式
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all-access.css" />
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all-gray.css" />
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all-neptune.css" />
access样式:
gray样式:
neptune样式: