ext学习1

linpyi

浏览: 62963 次
性别:
来自: 北京

最近访客更多访客>>

神父酱

ceoajun

一枕行云

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

EXT CSS JavaScript Servlet IE

貌似听说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的

一些特有的功能给磨灭了,先把基础学了下,以后要用的时候就不会那么不知所措了.