ExtJs是一个很不错的Ajax框架，可以用来开发带有华丽外观的客户端应用，使得我们的b/s应用更加具有活力及生命力！
ExtJs是一个用javascript编写，与后台技术无关的前端ajax框架。
adapter：负责将里面提供第三方底层库(包括Ext自带的底层库)，映射为Ext所支持的底层库
docs:API帮助文档
examples:提供使用ExtJs技术做出的小实例
paks:全部ext源码
resources:Ext UI资源文件目录，如：css、图片文件都存放在这里
应用ExtJS：
应用extjs需要在页面中引入extjs样式，样式文件为resources/css/ext-all.css ，extjs的js库文件主要包含两个adapter/ext/ext-base.js 、ext-all.js，ext-base.js表示框架基础库，ext-all.js是extjs的核心库，adapter表示适配器，也就是说可以有多种适配器
要是使用ExtJs库，要在页面中使用以下几句：
<link rel="stylesheet" type="text/css" href="script/ext/css/ext-all.css" />
<script type="text/javascript" src="script/ext/js/ext-base.js"></script
<script type="text/javascript" src="script/ext/js/ext-all.js"></script>
//路径根据情况可做修改
一般情况下，每一个用户的ExtJs应用都是从Ext.onReady开始的，使用ExtJs应用程序代码大致如下：
<script>
function fn(){
}
Ext.onReady(fn);
</script>
这里fn可以写成一个匿名函数的形式，因此上面的代码可以改成下面的形式：
<script>
function fn(){
alert(“hello”);}
Ext.onReady(function(){
alert(“hello”);
});
</script>
第一个ExtJs版的helloworld
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ext.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="script/ext/css/ext-all.css" />
<script type="text/javascript" src="script/ext/js/ext-base.js"></script>
<script type="text/javascript" src="script/ext/js/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.Msg.alert("hello","hello world");
});
</script>
</head>
<body>
</body>
</html>
下面是一个窗口的例子：
Ext.onReady(function(){
var vin=new Ext.Window({
title:"hello",
width:300,
height:300,
html:'<h1>hello</h1>'
});
vin.show();
});
下面是一个面板的例子：
Ext.onReady(function(){
//Ext.Msg.alert("hello","hello liulimin jiwenfneg");
var obj={title:"hello",
width:300,
height:200,
html:'<h1>hello jiwenfeng</h1>'};
var panel= new Ext.Panel(obj);
panel.render("hello");
});
扫一扫
1556
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
