貌似听说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的
一些特有的功能给磨灭了,先把基础学了下,以后要用的时候就不会那么不知所措了.
花了一天的时间学到了一些,浪曦有相应的视频教程,是位美女讲解的,大家可以去下载看看
- 大小: 32.8 KB
分享到:
相关推荐
这份"ext学习资料 20篇详细学习笔记 初学者ext学习的文档"是针对EXT初学者的一份宝贵资源,旨在帮助初学者快速入门EXT开发。 EXT的学习通常包括以下几个核心部分: 1. **EXT基础**:首先,你需要了解EXT的基本概念...
《gwtext学习三部曲》是一份专为GWT初学者设计的教程资源,它涵盖了gwtext和GWT Ext的相关知识。gwtext是Google Web Toolkit (GWT) 的一个扩展库,提供了丰富的用户界面组件和样式,使得在GWT平台上构建复杂的Web...
在探讨“不错ext学习网站”这一主题时,我们首先需要明确“ext”在这里指的是什么。在IT领域,“ext”通常与Linux文件系统有关,比如ext2、ext3、ext4等,但根据提供的链接和上下文,这里的“ext”更可能指的是Ext ...
Ext Js 是一个强大的JavaScript库,专门用于构建富客户端的Web应用程序。...在本文中,我们将深入探讨Ext Js的核心组件,...通过深入学习和实践,开发者可以充分利用这个框架的强大功能,创造出令人印象深刻的Web应用。
Ext JS4学习教程+笔记(一) Ext JS4学习教程+笔记(二)事件处理 Ext JS4学习教程+笔记(六)DataView面板 Ext JS4学习教程+笔记(七)树面板Tree Panel Ext JS4学习教程+笔记(三)Ajax请求 ...Ext学习网址
在这个名为"EXT学习小例子"的项目中,我们将深入探讨EXTJS如何实现数据的增加、删除和修改功能。 EXTJS的核心是其组件系统,它提供了各种UI组件,如表格、表单、面板、树形视图等,这些组件可以方便地组合在一起...
### Ext JS 学习文档详解 #### 极致体验与技术背景 Ext JS,作为一套卓越的 AJAX 控件集合,自问世以来便以其强大的功能、优雅的界面设计赢得了广泛赞誉。它不仅提供了一系列丰富的 UI 组件,还拥有高度可定制性,...
"EXT学习手册"是针对EXT库的学习资源,分为中英文两个版本,主要涵盖了EXT的常用方法、属性以及整个EXT框架的介绍。对于初学者和有经验的开发者来说,这都是一个非常有价值的参考资料。 CHM(Compiled HTML Help)...
EXT3.3学习文档主要涉及的是Linux操作系统中的EXT3文件系统的一个特定版本——EXT3.3。EXT3,全称为“Third Extended File System”,是Linux系统中广泛使用的日志文件系统之一,尤其在早期的发行版中非常常见。EXT...
### EXT学习心得与关键知识点详解 #### 布局Center的重要性 在EXT框架中,`layout: 'center'`是一个非常关键的配置属性,尤其是在创建面板(Panel)时。如果一个面板没有设置中心布局(center),它可能不会按预期...
### EXT学习文档知识点详解 #### 1. EXT简介 EXT是一个功能强大的JavaScript库,用于构建交互式的Web应用程序。它提供了一系列工具和API,使得开发者能够更容易地创建动态且丰富的用户界面。EXT支持多种浏览器,并...
可以帮助刚开始学习Ext的朋友,快速的掌握基本的方法
在阅读《Gwt-ext学习笔记.pdf》这份资料时,应重点学习上述知识点,并通过实践项目来加深理解。同时,关注Gwt-ext的更新和社区资源,以便获取最新的API信息和最佳实践。不断练习和探索,你将能够熟练运用Gwt-ext构建...
### Ext JS 学习资料详解 #### 一、Ext JS 概述 Ext JS 是一款基于 JavaScript 的前端框架,主要用于构建复杂的企业级 Web 应用程序。它提供了一套丰富的 UI 组件库以及一系列用于数据处理、应用架构设计等功能...
"有利于EXT学习的小程序"是一个专门为EXT初学者设计的项目,它包含了一个使用EXT框架开发的应用实例,可以帮助学习者更好地理解和掌握EXT的各种功能和用法。项目中可能包含了EXT的基本组件,如表格(Grid)、面板...
Ext 最新文档下载,Ext中文文档下载,Ext+3.0.CHM,Ext学习文档,实用,且实惠咯...
这篇EXT学习笔记主要涵盖了EXTJS中面向对象编程的一些关键概念和实践,包括命名空间、类定义、构造函数、属性与方法的访问控制(私有和公有)、静态属性与方法以及继承机制。 1. **命名空间**:在EXTJS中,命名空间...
收集的Ext资料. 博文链接:https://dayone.iteye.com/blog/238610