貌似听说EXT写AJAX不错,界面很绚,网上看了一些家伙贴出的图片,的确不错.
其实写AJAX的东西挺多的,EXT也不止在AJAX上有不错的地方,在界面上,也非常的漂亮,自己可以GOOGLE搜索下
最早看到的EXT例子是一个酒店管理系统,部署上去,才发现对IE不兼容.......
只能在OPERA和FILEFOX上一睹真容.
的确不错,废话不多说了,网上下了一些说明文档,里面的说明也不错,今天记些笔记
首先最简单的,每个新东西,都喜欢写Helloworld
1.下载EXT包,里面包含了CSS,JS,很大,也是有些人不喜欢的原因
把EXT解压出来,里面有很多文件,初学,只要拷贝以下一些文件
ext-2.1\adapter\ext\ext-base.js
ext-2.1\resources 下面的CSS还有图片,因为很多效果都是用这里面的样式和图片,最好是全部拷,老鸟的话那再说了
ext-2.1\ext-all.js all.js和base.js这2个是有联系的,都需要拷
我个人比较懒,把所有的东西都拷贝到项目里面了
2.创建一个WEB项目,在WEBROOT下,把上面的文件放在一个你认为你比较熟悉的位置
我是放在scripts/ext底下,可以参照我上传的图片
3.接着开始写代码吧,配置没有什么
EXT里面基本只有JS,CSS和DIV,就我目前看到的系统中,好象还没出现其他的东西
先写一个HELLOWORLD
创建一个HTML文件 demo.html 里面的JS
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="./scripts/ext/resources/css/ext-all.css">
<script type="text/javascript" src="./scripts/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="./scripts/ext/ext-all.js"></script>
<script>
Ext.onReady(function() {
Ext.Msg.alert('Status', 'Changes saved successfully.');
})
</script>
</head>
<body>
</body>
</html>
其实里面就一个JS函数,还有一些JS和CSS引用
Ext.onReady可能是你接触的第一个方法。这个方法是指当前DOM加载完毕后,保证页面内的所有元素能被Script引用
(reference)。
这里要提一个问题,ext对IE的支持不是很好,有些代码在OPERA和FILEFOX上可以跑的起来,在IE上会报错,
在这里一个最简单的就是,使用EXT的时候,body中不能出现直接文本,如果你要有文本,那么它必须要以div等标签对里出
现。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="./scripts/ext/resources/css/ext-all.css">
<script type="text/javascript" src="./scripts/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="./scripts/ext/ext-all.js"></script>
<script>
Ext.onReady(function() {
Ext.Msg.alert('Status', 'Changes saved successfully.');
})
</script>
</head>
<body>
this is no something<br/>
</body>
</html>
上面如果在body中有些东西,在IE中可能导致你的弹出框的按纽没办法使用,FIREFOX应该没这问题
具体的不在介绍,直接贴代码,在代码里面写注释
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="./scripts/ext/resources/css/ext-all.css">
<script type="text/javascript" src="./scripts/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="./scripts/ext/ext-all.js"></script>
<script>
Ext.onReady(function() {
//1. 弹出一个框
// Ext.Msg.alert('Status', 'Changes saved successfully.');
//2. 获取一个DIV
// var myDiv = Ext.get('myDiv');
// myDiv.highlight(); //黄色高亮显示然后渐退
// myDiv.addClass('red'); // 添加自定义CSS类 (在ExtStart.css定义)
// myDiv.center(); //在视图中将元素居中
// myDiv.setOpacity(.25); // 使元素半透明
//3. 获取多个DOM的节点
// Ext.select('p').highlight();
//4.1 这里使用的是匿名函数(anonymous function)即是没有名的的函数。你也可以自己写函数,可以参考下面的一个方法
// Ext.select('p').on('click', function() {
// alert("You clicked a paragraph");
// });
//4.2 实名函数,和上面的匿名函数不同
// var paragraphClicked = function(e) {
//e.target是DOM节点,所以我们首先将其转换成为EXT的Elemnet元素,然后执行欲完成的事件,这个例子中,我们看见段落是高亮显示的。
// Ext.get(e.target).highlight();
// }
// Ext.select('p').on('click', paragraphClicked);//函数名对应上面的
//5. message的使用
// var paragraphClicked = function(e) {
// var paragraph = Ext.get(e.target);//创建了一个局部变量(Local Variable)来保存某个元素的引用
// paragraph.highlight();
//传入到MessageBox.show的只有一个参数:一个Object literal,包含一组属性和属性值。
//在Javascript中,Object Literal是动态的,你可在任何时候用{和}创建一个典型的对象(object)。其中的字符由一系列的name/value组成的属性,属性的格式是[property name]:[property value]。
// Ext.MessageBox.show({
// title: 'Paragraph Clicked',
// msg: paragraph.dom.innerHTML,
// width:400,
// buttons: Ext.MessageBox.OK,
// animEl: paragraph
// });
// }
// Ext.select('p').on('click', paragraphClicked);//函数名对应上面的
//6. ext实现AJAX
Ext.get('oKButton').on('click', function(){
var msg = Ext.get('msg');
msg.load({
url: "DemoTest", //换成你的URL
params: 'name=' + Ext.get('name').dom.value,
text: 'Updating...'
});
msg.show();
});
})
</script>
</head>
<body>
<div id="mydiv">
</div>
<p>11
</p>
<p>22
</p>
<div id="msg" style="visibility: hidden"></div>
Name: <input type="text" id="name" /><br />
<input type="button" id="oKButton" value="OK" />
</body>
</html>
里面写了6个例子.可以按顺序下来,看看效果,最后一个是一个访问servlet的简单返回
web.xml
<servlet>
<description></description>
<display-name>DemoTest</display-name>
<servlet-name>DemoTest</servlet-name>
<servlet-class>com.linpyi.test.DemoTest</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>DemoTest</servlet-name>
<url-pattern>/DemoTest</url-pattern>
</servlet-mapping>
DomoTest.java
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
String name = request.getParameter("name");
response.setContentType("text/xml;charset=utf-8");
response.setHeader("Cache-Control", "no-cache");
if(name!=null){
System.out.println("name==="+name);
PrintWriter out = response.getWriter();
out.write(name);
out.flush();
out.close();
}
}
觉的EXT功能的确很强大,稍微看了下,EXT可以和很多当前的框架结合(例如:struts2.0), 不过不知道会不会把strtus2.0的
一些特有的功能给磨灭了,先把基础学了下,以后要用的时候就不会那么不知所措了.
花了一天的时间学到了一些,浪曦有相应的视频教程,是位美女讲解的,大家可以去下载看看