shmily2038
- 浏览: 831007 次
- 性别:
- 来自: 厦门
-
文章分类
- 全部博客 (363)
- 2010年3月 (3)
- 2010年4月 (3)
- Java (116)
- ExtJs (22)
- EJB3.0 (11)
- JQuery (28)
- SqlServer (5)
- Oracle (17)
- hibernate (21)
- struts2 (14)
- php (10)
- JavaScript (11)
- jbpm (6)
- spring (24)
- lucene (2)
- ibatis (7)
- C# (8)
- mysql (11)
- json (3)
- webservice (3)
- 设计模式 (1)
- jdbc (1)
- servlet (2)
- ice (6)
- 日常软件问题 (2)
- 生活 (2)
- iphone (1)
- rest (3)
- ruby (2)
- linux (13)
- quartz (1)
- poi (1)
- redis (13)
- memcached (4)
- nosql (2)
- tomcat调优 (1)
- 项目管理 (0)
最新评论
-
天使建站：
jquery里和数组相关的操作 附带具体的实例 ...
jquery对象数组 -
Cy0941：
$('#formId').form('submit',...) ...
easyui的form表单提交处理 -
shmily2038：
swifth 写道楼主，，你的命令写错啦，，[root@ser ...
centos直接yum安装nginx -
swifth：
楼主，，你的命令写错啦，，[root@server ~]# y ...
centos直接yum安装nginx -
随遇而安DXX：
...
REST
文章摘要：JSON------由键值组成的字符串。大括号对，表示对象，中括号表集合（即数组）。键要用双引号括起来，其后要加冒号，再跟值。一组键值之后，要再跟一组键修值要用逗号间隔。转义符是左倾斜线”” 在javaScript 中，很方便的把json字符串，转换成一系列对象.
-
JSON------由键值组成的字符串。大括号对，表示对象，中括号表集合（即数组）。
键要用双引号括起来，其后要加冒号，再跟值。一组键值之后，要再跟一组键修值要用逗号间隔。转义符是左倾斜线””
在javaScript 中，很方便的把json字符串，转换成一系列对象.
例1：运行跳出一个窗口：a:66"dd
<html>
<head>
<meta name="vs_defaultClientScript" content="JavaScript">
<script>
function jsontest(){
var jsontext = '{"man":{"weight":"75kg","age":"24"},
"ar":["1","2","3"],"name":"a:66\"dd"}';
var aman = eval("("+jsontext+")");
alert(aman.man.weight);
alert(aman.name);
}
</script>
</head>
<body onload="jsontest();">
</body>
</html>
例2：
<html>
<head>
<meta name="vs_defaultClientScript" content="JavaScript">
<script>
function jsontest(){
var aman= {"man":{"weight":"7115kg","age":"24"},
"ar":["1","2","3"]};
alert(aman.man.weight);
alert(aman.ar[0]);
}
</script>
</head>
<body onload="jsontest();">
</body>
</html>
JSON-LIB
这是把一个bean 或map 或list 或xml 转成json字符串，也能把json字符串转成bean,xml
所依赖的包及下载点如下：
Json-lib： http://json-lib.sourceforge.net/
EZMorph： http://ezmorph.sourceforge.net
Collections： http://jakarta.apache.org/commons/collections/
Commons-Lang： http://jakarta.apache.org/commons/lang/
Commons-BeanUtils：http://commons.apache.org/beanutils/
commons-logging： http://commons.apache.org/logging/
bean、map、list 、xml 与Json 相互转换源码
1 User.java
package javaapplication2;
public class User {
private String no;
private String name;
public User(){}
public void setNo(String no){ this.no=no; }
public String getNo(){ return no; }
public void setName(String name){ this.name=name; }
public String getName(){ return name; }
}
2 test.java
package javaapplication2;
import java.lang.reflect.InvocationTargetException;
import java.util.List;
import java.util.ArrayList;
import java.util.Map;
import java.util.HashMap;
import net.sf.json.JSONObject;
import net.sf.json.JSONArray;
import org.apache.commons.beanutils.PropertyUtils;
import net.sf.json.xml.XMLSerializer;
public class test {
public static void main(String args[]) throws IllegalAccessException, InvocationTargetException, NoSuchMethodException{
// list to jsonstr
List list = new ArrayList();
list.add( "first" );
list.add( "second" );
JSONArray jsonArray = JSONArray.fromObject( list );
System.out.println("----1----" );
System.out.println( jsonArray );
System.out.println();
// map to jsonstr
Map map=new HashMap();
map.put("d", list);
map.put("e", "e1");
JSONObject jobj=JSONObject.fromObject(map);
System.out.println("----2----" );
System.out.println(jobj );
System.out.println();
// bean to jsonstr
User user=new User();
user.setNo("001");
user.setName("李四");
jobj=JSONObject.fromObject(user);
System.out.println("----3----" );
System.out.println( jobj );
System.out.println();
// jsonstr to object
String str="{"d":["first","second"],"e":"e1"}";
jobj=JSONObject.fromObject(str);
System.out.println("----4----" );
System.out.println( jobj.get("d"));
System.out.println();
Object bean = JSONObject.toBean( jobj );
System.out.println("----5----" );
System.out.println(PropertyUtils.getProperty( bean, "d" ) ) ;
System.out.println();
// jsonstr to bean
str="{"name":"李四1","no":"002"}";
jobj=JSONObject.fromObject(str);
user = (User) JSONObject.toBean( jobj, User.class );
System.out.println("----6----" );
System.out.println(user.getName() ) ;
System.out.println();
/**
* XML和JSON之间的转换,需要用到xom
*/
jobj = new JSONObject( true );
XMLSerializer xmls = new XMLSerializer();
String xml = xmls.write(jobj);
System.out.println("***7*** = " + xml);
jobj = JSONObject.fromObject("{"name":"json","bool":true,"int":1}");
xmls = new XMLSerializer();
xml = xmls.write(jobj);
System.out.println("***8*** = " + xml);
jsonArray = JSONArray.fromObject("[1,2,3]");
xmls = new XMLSerializer();
xml = xmls.write( jsonArray );
System.out.println("***9*** = " + xml);
xml = "<a class="array"><e type="function" params="i,j">return matrix[i][j];</e></a> ";
xmls = new XMLSerializer();
jsonArray = (JSONArray) xmls.read( xml);
System.out.println("***10*** = " + jsonArray );
}
}
Ext 之框架篇
Ext2 相关包放在netbean6.1的 web resources下。
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!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">
<link rel="stylesheet" type="text/css" href="resources/ext21/resources/css/ext-all.css" />
<script type="text/javascript" src="resources/ext21/adapter/ext/ext-base.js"> </script>
<script type="text/javascript"
src="resources/ext21/ext-all.js"></script>
</head>
<script>
function fn() { alert('Hello World'); }
Ext.onReady(fn);
</script>
<body>
<h2>ss</h2>
</body>
</html>
javaScript调试
下载firefox.
下载fireBug插件。fireFox浏览器中的插件管理器中，可在线安装
Ext2.0之外观改变
Ext2组件的外观分成许多部份，这些部份通过css进行控控制。其中定义了一个核心的css,由baseCls参数指定。其他部份（css）的命名必须前缀baseCls值。当修改了baseCls的值时，ext2自动修改相关css的前缀。
fomPanel外观改变
源代码:aaa.jsp
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!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">
<link rel="stylesheet" type="text/css" href="resources/ext21/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="resources/ext21/resources/css/fyhC.css" />
<script type="text/javascript" src="resources/ext21/adapter/ext/ext-base.js"> </script>
<script type="text/javascript" src="resources/ext21/ext-all.js"></script>
</head>
<script>
Ext.onReady( function (){
var f=new Ext.form.FormPanel({
renderTo:"hello",//定位到名为hello的Div节点
title:"用户信息录入框",
url:"login.do",
baseParams:{aa:"bb"},
baseCls:"fyh-panel",//外观核心参数
itemCls:"fyh-panel-mc",
height:600,
width:800,
labelWidth:200,
labelAlign:"right",
frame:true,
defaults:{width:180,xtype:"textfield"},
items:[
{
xtype:"textfield",
name:"username",
fieldLabel:"姓名"
},
{
xtype:"textfield",
name:"password",
fieldLabel:"密码"
}
],
buttons:[{
text:"加载表单数据"
}]
});
});
</script>
<body>
<div id="hello"/>
</body>
</html>
fyhC.css
fyh-panel {
border:0pt solid yellow;
}
fyh-panel-tl { /* 标题左 */
background:transparent url(../images/default/panel/corners-sprite.gif) no-repeat scroll 0pt 0pt;
border-bottom:1px solid #99BBE8;
padding-left:6px;
}
.x-panel-tr { /* 标题右 */
background:transparent url(../images/default/panel/corners-sprite.gif) no-repeat scroll right 0pt;
padding-right:6px;
}
.fyh-panel-tc { /* 标题正中间 */
background:transparent url(../images/default/dd/drop-add.gif) repeat-x scroll 0pt 0pt;
overflow:hidden;
}
.fyh-panel-tl .fyh-panel-header { /* 标题文本 */
-x-system-font:none;
background:transparent none repeat scroll 0% 0%;
border:0pt none;
color:#15428B;
font-family:tahoma,arial,verdana,sans-serif;
font-size:72px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:normal;
padding:5px 0pt 4px;
}
.fyh-panel-bwrap {
overflow:hidden;
}
.fyh-panel-ml {/* 正中左 */
background:#FFFFFF url(../images/default/panel/left-right.gif) repeat-y scroll 0pt 0pt;
padding-left:6px;
}
.fyh-panel-mr {/* 正中右 */
background:transparent url(../images/default/panel/left-right.gif) repeat-y scroll right 0pt;
padding-right:6px;
}
.fyh-panel-mc {/* 正中 */
-x-system-font:none;
background:red none repeat scroll 0% 0%;
border:0pt none;
font-family:tahoma,arial,helvetica,sans-serif;
font-size:24px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
margin:0pt;
padding:6px 0pt 0pt;
}
.fyh-panel-body {
overflow:hidden;
}
.fyh-panel-btns-ct {
padding:16px;
}
.fyh-panel-btns-ct .fyh-panel-btns-center {
text-align:center;
}
.fyh-panel-bc .x-panel-footer { /*脚下*/
padding-bottom:6px;
}
.fyh-panel-bl { /*脚左*/
background:transparent url(../images/default/panel/corners-sprite.gif) no-repeat scroll 0pt bottom;
padding-left:6px;
}
.fyh-panel-br { /*脚右*/
background:transparent url(../images/default/panel/corners-sprite.gif) no-repeat scroll right bottom;
padding-right:6px;
}
.fyh-panel-bc { /*脚中*/
background:transparent url(../images/default/panel/top-bottom.gif) repeat-x scroll 0pt bottom;
}
Ext 乱码解决
客记端加入以下语句：Ext.lib.Ajax.defaultPostHeader += '; charset=utf-8';
服务器端加入以下语句：arg1.setContentType("text/json; charset=utf-8");
Ext 得标签或dom节点，与服务器通信
Ext.get、Ext.select得到的节点与Ext.query得到的节点是不一样的。前者，与ext紧密结合；而后者与dom的节点紧密结合
Ext.get与Ext.select得到的节点，有一个load方法，与服务器进行通信。
客户端源码:aaa.jsp
其中
dd.addClass("red”)是在ExtStart.css文件中定义的滤镜
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!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">
<link rel="stylesheet" type="text/css" href="resources/ext21/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="resources/ext21/resources/css/ExtStart.css" />
<script type="text/javascript" src="resources/ext21/adapter/ext/ext-base.js"> </script>
<script type="text/javascript"
src="resources/ext21/ext-all.js"></script>
</head>
<script>
Ext.onReady(function(){
var dd= Ext.get('ss');//得id 值的标签
dd.addClass("red");
dd=Ext.select("h2") ;//得多个节点
dd.addClass("green");
Ext.select('h2').on('click', function() {
alert("hello")
});
var dd1 =Ext.query("#ss");//得id值为ss的dom节点
dd1 =Ext.query("span");//得节点名span的dom节点
dd1 =Ext.query("*[id=bar]");//得节点名span的dom节点
dd1=Ext.query("div ss");//取得div节点中id名为ss的dom节点
dd1 =Ext.query(".bar");//得class为bar的dom节点
dd1 =Ext.query("*");//得所有的dom节点
dd1= Ext.query("*[class^=f]");//得所有class名开头是b的dom节点
dd1= Ext.query("*[class$=r]");//得所有class名结尾是r的dom节点
dd1= Ext.query("*[class*=o]");//得所有class名中有o的dom节点
dd1= Ext.query("*{color=red}");//大括号表示取css中满足
alert(dd1[0].tagName) ;
alert(dd1[0].nodeName);
alert(dd1[0].innerHTML);
var dd= Ext.get('ss');//得id 值为ss的标签
//dd.load与服务器通信
dd.load({url:"login.do", //服务器网址
params: 'aa=bar', text: 'Updating...' }); //向服务器传递参数
dd.show();//更改标签为服务器内容
});
</script>
<body>
<h2>hello</h2>
<div id="ss">dd</div>
<h2 ><a href="http://www.sina.com.cn"> Hello World!</a></h2>
<input id="btn" type="button" name="add" value="新窗口" />
<input id="btnToBack" type="button" name="add" value="放到后台" />
<input id="btnHide" type="button" name="add" value="隐" />
<div id="bar" class="foo">
I'm a div ==> my id: bar, my class: foo
<span class="bar">
I'm a span within the div with a foo class
</span>
<a href="http://www.extjs.com" target="_blank">An ExtJs link</a>
</div>
<div id="foo" class="bar"> my id: foo, my class: bar
<p>I'm a P tag within the foo div</p>
<span class="bar">I'm a span within the div with a bar class</span>
<a href="#">An internal link</a>
</div>
</body>
</html>
服务器端，部份源码：
其中：arg0是HttpServletRequest对象
arg1 是HttpServletResponse对象
完整源码见: ext与服务交互之Ext.Ajax.request
if (arg0.getParameter("aa").equals("bar")){
arg1.getWriter().write(jsonArray.toString());
arg1.getWriter().flush();
}
对话框使用
确定框
<script>
Ext.onReady(function(){
Ext.MessageBox.confirm('登 陆', '确定吗?',fun);
});
function fun(btn) {
if(btn=='yes'){ alert(btn+'ss') }
return false;
}
</script>
消息框
<script>
Ext.onReady(function(){
Ext.MessageBox.alert('Hello', '确定吗',fun);
});
function fun(btn) { alert(btn+'Hello') }
</script>
输入框1
<script>
Ext.onReady(function(){
Ext.MessageBox.prompt('输入框', '随便输入一些东西', fun);
});
function fun(btn,text) {
alert('你刚刚点击了 ' + btn + '，刚刚输入了 ' + text);
}
</script>
输入框2
<script>
Ext.onReady(function(){
Ext.MessageBox.show({
title: '多行输入框',
msg: '你可以输入好几行',
width:300,
buttons: Ext.MessageBox.OKCANCEL,
multiline: true,
fn:fun
});
});
function fun(btn,text) {
alert('你刚刚点击了 ' + btn + '，刚刚输入了 ' + text);
}
</script>
进度条
<script>
Ext.onReady(function(){
Ext.MessageBox.show({
title: '请等待',
msg: '读取数据中',
width:240,
progress:true,
closable:false
});
});
var f = function(v){
return function(){
if(v == 11){
Ext.MessageBox.hide();
}else{
Ext.MessageBox.updateProgress(v/10, '正在读取第 ' + v + ' 个，一共10个。');
}
};
};
for(var i = 1; i < 12; i++){
setTimeout(f(i), i*1000);
}
</script>
布局管理
Panel window 等都可指定布局管理器进行管理界面。
在panel的组件构建对象中，都有一个html属性，它可指一个div子节点。
而ext的大多数组件都可通过renderTo，让该组件挂在html指定节点中，这样就从外观上完成了面板的组件装配任务
表格布局管理器Ext.layout.TableLayou
最看好的一个管理器。像EXCEL一样，把一个板面分成具有统一大小的单元格构成的表格。一个组件在存放时，也可像excel一样合并单元格。即通过合并，让一个组件可占用多个单元格的位置。
表格布局管理器，要先指定总列数，而总行数不用指定。
表格布局管理器，是按先行后列的原则顺序装配对象。注意下面例子中的5678的编号。
例:把9个panel装配到一个panel中去。
效果图
总共是4行3列的表格Dragme1 与dragme6占了两行，而dragme2占了两列，看着怪是因为他们居中了。
Window 一样。把例中的panel改成window就行了
源代码
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!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">
<link rel="stylesheet" type="text/css" href="resources/ext21/resources/css/ext-all.css" />
<script type="text/javascript" src="resources/ext21/adapter/ext/ext-base.js"> </script>
<script type="text/javascript" src="resources/ext21/ext-all.js"></script>
</head>
<script>
Ext.onReady( function (){
var dd= new Ext.Panel({
title: 'Drag me',
x: 100,
y: 100,
id:"dd",
renderTo: Ext.getBody(),
floating: true,//注意在ext2.中，在下面的panel中不能指定，否则显//示不出。严重郁闷。不过，也就是一个阴影属性罢了。
frame: true,
width: 350,
height: 300,
layout:"table",//指定了布局管理器为tableLayout
layoutConfig: {//配置对象
//定义了总列数
columns: 3
},
// items 指定了要装配的对象。在这里都通过html装配了一个div
//节点。在这个节点中，将要挂接panel对象。在这个节点中，
//可指定一些css样式，控制要挂接对象的位置大小等。
items: [{
html: '<div id="aa1" ></div>',
rowspan: 2,//占用两行
colspan: 1 //占用一列
},{
html: '<div id="aa2" align=center ></div>',//这里的align=center
//指定了要挂接对象居中显示
rowspan: 1,
colspan: 2
},{
html: '<div id="aa3"></div>',
cellCls: 'highlight',
rowspan: 1,
colspan: 1
},{
html: '<div id="aa4"></div>',
rowspan: 1,
colspan: 1
},{
html: '<div id="aa5"></div>',
rowspan: 1,
本文来自[Svn中文网]转发请保留本站地址：http://www.svn8.com/SVNSY/20080930/1037.html
-
JSON------由键值组成的字符串。大括号对，表示对象，中括号表集合（即数组）。
键要用双引号括起来，其后要加冒号，再跟值。一组键值之后，要再跟一组键修值要用逗号间隔。转义符是左倾斜线””
在javaScript 中，很方便的把json字符串，转换成一系列对象.
例1：运行跳出一个窗口：a:66"dd
<html>
<head>
<meta name="vs_defaultClientScript" content="JavaScript">
<script>
function jsontest(){
var jsontext = '{"man":{"weight":"75kg","age":"24"},
"ar":["1","2","3"],"name":"a:66\"dd"}';
var aman = eval("("+jsontext+")");
alert(aman.man.weight);
alert(aman.name);
}
</script>
</head>
<body onload="jsontest();">
</body>
</html>
例2：
<html>
<head>
<meta name="vs_defaultClientScript" content="JavaScript">
<script>
function jsontest(){
var aman= {"man":{"weight":"7115kg","age":"24"},
"ar":["1","2","3"]};
alert(aman.man.weight);
alert(aman.ar[0]);
}
</script>
</head>
<body onload="jsontest();">
</body>
</html>
JSON-LIB
这是把一个bean 或map 或list 或xml 转成json字符串，也能把json字符串转成bean,xml
所依赖的包及下载点如下：
Json-lib： http://json-lib.sourceforge.net/
EZMorph： http://ezmorph.sourceforge.net
Collections： http://jakarta.apache.org/commons/collections/
Commons-Lang： http://jakarta.apache.org/commons/lang/
Commons-BeanUtils：http://commons.apache.org/beanutils/
commons-logging： http://commons.apache.org/logging/
bean、map、list 、xml 与Json 相互转换源码
1 User.java
package javaapplication2;
public class User {
private String no;
private String name;
public User(){}
public void setNo(String no){ this.no=no; }
public String getNo(){ return no; }
public void setName(String name){ this.name=name; }
public String getName(){ return name; }
}
2 test.java
package javaapplication2;
import java.lang.reflect.InvocationTargetException;
import java.util.List;
import java.util.ArrayList;
import java.util.Map;
import java.util.HashMap;
import net.sf.json.JSONObject;
import net.sf.json.JSONArray;
import org.apache.commons.beanutils.PropertyUtils;
import net.sf.json.xml.XMLSerializer;
public class test {
public static void main(String args[]) throws IllegalAccessException, InvocationTargetException, NoSuchMethodException{
// list to jsonstr
List list = new ArrayList();
list.add( "first" );
list.add( "second" );
JSONArray jsonArray = JSONArray.fromObject( list );
System.out.println("----1----" );
System.out.println( jsonArray );
System.out.println();
// map to jsonstr
Map map=new HashMap();
map.put("d", list);
map.put("e", "e1");
JSONObject jobj=JSONObject.fromObject(map);
System.out.println("----2----" );
System.out.println(jobj );
System.out.println();
// bean to jsonstr
User user=new User();
user.setNo("001");
user.setName("李四");
jobj=JSONObject.fromObject(user);
System.out.println("----3----" );
System.out.println( jobj );
System.out.println();
// jsonstr to object
String str="{"d":["first","second"],"e":"e1"}";
jobj=JSONObject.fromObject(str);
System.out.println("----4----" );
System.out.println( jobj.get("d"));
System.out.println();
Object bean = JSONObject.toBean( jobj );
System.out.println("----5----" );
System.out.println(PropertyUtils.getProperty( bean, "d" ) ) ;
System.out.println();
// jsonstr to bean
str="{"name":"李四1","no":"002"}";
jobj=JSONObject.fromObject(str);
user = (User) JSONObject.toBean( jobj, User.class );
System.out.println("----6----" );
System.out.println(user.getName() ) ;
System.out.println();
/**
* XML和JSON之间的转换,需要用到xom
*/
jobj = new JSONObject( true );
XMLSerializer xmls = new XMLSerializer();
String xml = xmls.write(jobj);
System.out.println("***7*** = " + xml);
jobj = JSONObject.fromObject("{"name":"json","bool":true,"int":1}");
xmls = new XMLSerializer();
xml = xmls.write(jobj);
System.out.println("***8*** = " + xml);
jsonArray = JSONArray.fromObject("[1,2,3]");
xmls = new XMLSerializer();
xml = xmls.write( jsonArray );
System.out.println("***9*** = " + xml);
xml = "<a class="array"><e type="function" params="i,j">return matrix[i][j];</e></a> ";
xmls = new XMLSerializer();
jsonArray = (JSONArray) xmls.read( xml);
System.out.println("***10*** = " + jsonArray );
}
}
Ext 之框架篇
Ext2 相关包放在netbean6.1的 web resources下。
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!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">
<link rel="stylesheet" type="text/css" href="resources/ext21/resources/css/ext-all.css" />
<script type="text/javascript" src="resources/ext21/adapter/ext/ext-base.js"> </script>
<script type="text/javascript"
src="resources/ext21/ext-all.js"></script>
</head>
<script>
function fn() { alert('Hello World'); }
Ext.onReady(fn);
</script>
<body>
<h2>ss</h2>
</body>
</html>
javaScript调试
下载firefox.
下载fireBug插件。fireFox浏览器中的插件管理器中，可在线安装
Ext2.0之外观改变
Ext2组件的外观分成许多部份，这些部份通过css进行控控制。其中定义了一个核心的css,由baseCls参数指定。其他部份（css）的命名必须前缀baseCls值。当修改了baseCls的值时，ext2自动修改相关css的前缀。
fomPanel外观改变
源代码:aaa.jsp
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!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">
<link rel="stylesheet" type="text/css" href="resources/ext21/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="resources/ext21/resources/css/fyhC.css" />
<script type="text/javascript" src="resources/ext21/adapter/ext/ext-base.js"> </script>
<script type="text/javascript" src="resources/ext21/ext-all.js"></script>
</head>
<script>
Ext.onReady( function (){
var f=new Ext.form.FormPanel({
renderTo:"hello",//定位到名为hello的Div节点
title:"用户信息录入框",
url:"login.do",
baseParams:{aa:"bb"},
baseCls:"fyh-panel",//外观核心参数
itemCls:"fyh-panel-mc",
height:600,
width:800,
labelWidth:200,
labelAlign:"right",
frame:true,
defaults:{width:180,xtype:"textfield"},
items:[
{
xtype:"textfield",
name:"username",
fieldLabel:"姓名"
},
{
xtype:"textfield",
name:"password",
fieldLabel:"密码"
}
],
buttons:[{
text:"加载表单数据"
}]
});
});
</script>
<body>
<div id="hello"/>
</body>
</html>
fyhC.css
fyh-panel {
border:0pt solid yellow;
}
fyh-panel-tl { /* 标题左 */
background:transparent url(../images/default/panel/corners-sprite.gif) no-repeat scroll 0pt 0pt;
border-bottom:1px solid #99BBE8;
padding-left:6px;
}
.x-panel-tr { /* 标题右 */
background:transparent url(../images/default/panel/corners-sprite.gif) no-repeat scroll right 0pt;
padding-right:6px;
}
.fyh-panel-tc { /* 标题正中间 */
background:transparent url(../images/default/dd/drop-add.gif) repeat-x scroll 0pt 0pt;
overflow:hidden;
}
.fyh-panel-tl .fyh-panel-header { /* 标题文本 */
-x-system-font:none;
background:transparent none repeat scroll 0% 0%;
border:0pt none;
color:#15428B;
font-family:tahoma,arial,verdana,sans-serif;
font-size:72px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:normal;
padding:5px 0pt 4px;
}
.fyh-panel-bwrap {
overflow:hidden;
}
.fyh-panel-ml {/* 正中左 */
background:#FFFFFF url(../images/default/panel/left-right.gif) repeat-y scroll 0pt 0pt;
padding-left:6px;
}
.fyh-panel-mr {/* 正中右 */
background:transparent url(../images/default/panel/left-right.gif) repeat-y scroll right 0pt;
padding-right:6px;
}
.fyh-panel-mc {/* 正中 */
-x-system-font:none;
background:red none repeat scroll 0% 0%;
border:0pt none;
font-family:tahoma,arial,helvetica,sans-serif;
font-size:24px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
margin:0pt;
padding:6px 0pt 0pt;
}
.fyh-panel-body {
overflow:hidden;
}
.fyh-panel-btns-ct {
padding:16px;
}
.fyh-panel-btns-ct .fyh-panel-btns-center {
text-align:center;
}
.fyh-panel-bc .x-panel-footer { /*脚下*/
padding-bottom:6px;
}
.fyh-panel-bl { /*脚左*/
background:transparent url(../images/default/panel/corners-sprite.gif) no-repeat scroll 0pt bottom;
padding-left:6px;
}
.fyh-panel-br { /*脚右*/
background:transparent url(../images/default/panel/corners-sprite.gif) no-repeat scroll right bottom;
padding-right:6px;
}
.fyh-panel-bc { /*脚中*/
background:transparent url(../images/default/panel/top-bottom.gif) repeat-x scroll 0pt bottom;
}
Ext 乱码解决
客记端加入以下语句：Ext.lib.Ajax.defaultPostHeader += '; charset=utf-8';
服务器端加入以下语句：arg1.setContentType("text/json; charset=utf-8");
Ext 得标签或dom节点，与服务器通信
Ext.get、Ext.select得到的节点与Ext.query得到的节点是不一样的。前者，与ext紧密结合；而后者与dom的节点紧密结合
Ext.get与Ext.select得到的节点，有一个load方法，与服务器进行通信。
客户端源码:aaa.jsp
其中
dd.addClass("red”)是在ExtStart.css文件中定义的滤镜
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!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">
<link rel="stylesheet" type="text/css" href="resources/ext21/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="resources/ext21/resources/css/ExtStart.css" />
<script type="text/javascript" src="resources/ext21/adapter/ext/ext-base.js"> </script>
<script type="text/javascript"
src="resources/ext21/ext-all.js"></script>
</head>
<script>
Ext.onReady(function(){
var dd= Ext.get('ss');//得id 值的标签
dd.addClass("red");
dd=Ext.select("h2") ;//得多个节点
dd.addClass("green");
Ext.select('h2').on('click', function() {
alert("hello")
});
var dd1 =Ext.query("#ss");//得id值为ss的dom节点
dd1 =Ext.query("span");//得节点名span的dom节点
dd1 =Ext.query("*[id=bar]");//得节点名span的dom节点
dd1=Ext.query("div ss");//取得div节点中id名为ss的dom节点
dd1 =Ext.query(".bar");//得class为bar的dom节点
dd1 =Ext.query("*");//得所有的dom节点
dd1= Ext.query("*[class^=f]");//得所有class名开头是b的dom节点
dd1= Ext.query("*[class$=r]");//得所有class名结尾是r的dom节点
dd1= Ext.query("*[class*=o]");//得所有class名中有o的dom节点
dd1= Ext.query("*{color=red}");//大括号表示取css中满足
alert(dd1[0].tagName) ;
alert(dd1[0].nodeName);
alert(dd1[0].innerHTML);
var dd= Ext.get('ss');//得id 值为ss的标签
//dd.load与服务器通信
dd.load({url:"login.do", //服务器网址
params: 'aa=bar', text: 'Updating...' }); //向服务器传递参数
dd.show();//更改标签为服务器内容
});
</script>
<body>
<h2>hello</h2>
<div id="ss">dd</div>
<h2 ><a href="http://www.sina.com.cn"> Hello World!</a></h2>
<input id="btn" type="button" name="add" value="新窗口" />
<input id="btnToBack" type="button" name="add" value="放到后台" />
<input id="btnHide" type="button" name="add" value="隐" />
<div id="bar" class="foo">
I'm a div ==> my id: bar, my class: foo
<span class="bar">
I'm a span within the div with a foo class
</span>
<a href="http://www.extjs.com" target="_blank">An ExtJs link</a>
</div>
<div id="foo" class="bar"> my id: foo, my class: bar
<p>I'm a P tag within the foo div</p>
<span class="bar">I'm a span within the div with a bar class</span>
<a href="#">An internal link</a>
</div>
</body>
</html>
服务器端，部份源码：
其中：arg0是HttpServletRequest对象
arg1 是HttpServletResponse对象
完整源码见: ext与服务交互之Ext.Ajax.request
if (arg0.getParameter("aa").equals("bar")){
arg1.getWriter().write(jsonArray.toString());
arg1.getWriter().flush();
}
对话框使用
确定框
<script>
Ext.onReady(function(){
Ext.MessageBox.confirm('登 陆', '确定吗?',fun);
});
function fun(btn) {
if(btn=='yes'){ alert(btn+'ss') }
return false;
}
</script>
消息框
<script>
Ext.onReady(function(){
Ext.MessageBox.alert('Hello', '确定吗',fun);
});
function fun(btn) { alert(btn+'Hello') }
</script>
输入框1
<script>
Ext.onReady(function(){
Ext.MessageBox.prompt('输入框', '随便输入一些东西', fun);
});
function fun(btn,text) {
alert('你刚刚点击了 ' + btn + '，刚刚输入了 ' + text);
}
</script>
输入框2
<script>
Ext.onReady(function(){
Ext.MessageBox.show({
title: '多行输入框',
msg: '你可以输入好几行',
width:300,
buttons: Ext.MessageBox.OKCANCEL,
multiline: true,
fn:fun
});
});
function fun(btn,text) {
alert('你刚刚点击了 ' + btn + '，刚刚输入了 ' + text);
}
</script>
进度条
<script>
Ext.onReady(function(){
Ext.MessageBox.show({
title: '请等待',
msg: '读取数据中',
width:240,
progress:true,
closable:false
});
});
var f = function(v){
return function(){
if(v == 11){
Ext.MessageBox.hide();
}else{
Ext.MessageBox.updateProgress(v/10, '正在读取第 ' + v + ' 个，一共10个。');
}
};
};
for(var i = 1; i < 12; i++){
setTimeout(f(i), i*1000);
}
</script>
布局管理
Panel window 等都可指定布局管理器进行管理界面。
在panel的组件构建对象中，都有一个html属性，它可指一个div子节点。
而ext的大多数组件都可通过renderTo，让该组件挂在html指定节点中，这样就从外观上完成了面板的组件装配任务
表格布局管理器Ext.layout.TableLayou
最看好的一个管理器。像EXCEL一样，把一个板面分成具有统一大小的单元格构成的表格。一个组件在存放时，也可像excel一样合并单元格。即通过合并，让一个组件可占用多个单元格的位置。
表格布局管理器，要先指定总列数，而总行数不用指定。
表格布局管理器，是按先行后列的原则顺序装配对象。注意下面例子中的5678的编号。
例:把9个panel装配到一个panel中去。
效果图
总共是4行3列的表格Dragme1 与dragme6占了两行，而dragme2占了两列，看着怪是因为他们居中了。
Window 一样。把例中的panel改成window就行了
源代码
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!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">
<link rel="stylesheet" type="text/css" href="resources/ext21/resources/css/ext-all.css" />
<script type="text/javascript" src="resources/ext21/adapter/ext/ext-base.js"> </script>
<script type="text/javascript" src="resources/ext21/ext-all.js"></script>
</head>
<script>
Ext.onReady( function (){
var dd= new Ext.Panel({
title: 'Drag me',
x: 100,
y: 100,
id:"dd",
renderTo: Ext.getBody(),
floating: true,//注意在ext2.中，在下面的panel中不能指定，否则显//示不出。严重郁闷。不过，也就是一个阴影属性罢了。
frame: true,
width: 350,
height: 300,
layout:"table",//指定了布局管理器为tableLayout
layoutConfig: {//配置对象
//定义了总列数
columns: 3
},
// items 指定了要装配的对象。在这里都通过html装配了一个div
//节点。在这个节点中，将要挂接panel对象。在这个节点中，
//可指定一些css样式，控制要挂接对象的位置大小等。
items: [{
html: '<div id="aa1" ></div>',
rowspan: 2,//占用两行
colspan: 1 //占用一列
},{
html: '<div id="aa2" align=center ></div>',//这里的align=center
//指定了要挂接对象居中显示
rowspan: 1,
colspan: 2
},{
html: '<div id="aa3"></div>',
cellCls: 'highlight',
rowspan: 1,
colspan: 1
},{
html: '<div id="aa4"></div>',
rowspan: 1,
colspan: 1
},{
html: '<div id="aa5"></div>',
rowspan: 1,
本文来自[Svn中文网]转发请保留本站地址：http://www.svn8.com/SVNSY/20080930/1037.html
分享到：
发表评论
-
Jackson2.x通用工具类
2014-11-03 11:38 4894import java.io.IOException; i ... -
面试题
2013-02-27 09:04 1705从1加到100（考虑减少循环次数）使用数学公式 首先要知道 ... -
单例延迟实例化
2013-01-23 08:55 13231.如果出于性能的考虑而需要对实例域使用延迟初始化，就使用双 ... -
java中重载与重写的区别
2013-01-21 10:03 922首先我们来讲讲：重载(Overloading) （ ... -
自定义标签
2012-12-15 12:58 996package com.fsti.tag; import ... -
JAXB格式化beanToXml
2012-12-14 15:03 1250context = JAXBContext.n ... -
面向对象的特征有哪些方面？
2012-12-13 09:36 1001计算机软件系统是现实 ... -
java nio缓冲器
2012-12-05 17:03 3598缓冲器仅仅是一个" 多功能 " 的数组。可 ... -
面向对象三大特性一句话概括
2012-12-04 15:58 1549封装可以隐藏实现细节，使得代码模块化； 继承可以扩 ... -
Java序列化高级认识
2012-12-04 09:13 1061将 Java 对象序列化为二进制文件的 Java 序列化技术是 ... -
面向接口编程——提升系统多态性和可扩展性
2012-12-03 14:10 1277接口的本质 接口，在表面上是由几个没有主体代码的方 ... -
面向对象之多态
2012-11-23 19:22 868多态性（polymorphisn）是允许你将父对象设置成为和一 ... -
我对"秒杀"在技术性上的一些看法
2012-11-22 11:31 1007秒杀，是指电子商务 ... -
项目编码
2012-11-16 13:59 1147看两个项目所用的编码是否一样 Java的乱码问题: ... -
SVN错误：Attempted to lock an already-locked dir
2012-11-07 09:08 1023出现这个问题后使用“ ... -
面向对象的三个基本特征
2012-11-04 08:31 1083面向对象的三个基本特征是：封装、继承、多态。 封装 封装最 ... -
预编译防sql注入
2012-11-03 20:23 1968prepareStatement会先初始化SQL，先把这个SQ ... -
Java类与对象的初始化
2012-10-19 09:33 892Java类与对象的初始化 面试的时候，经常会遇到这样的笔试题 ... -
commons bean
2012-10-19 09:15 884这是两个javabean对象 package com.bea ... -
java工具DateUtil
2012-10-12 14:42 1050//一年内的周一 public final class Da ...
相关推荐
ext学习笔记代码 ext学习笔记代码 ext学习笔记代码
在阅读《Gwt-ext学习笔记.pdf》这份资料时，应重点学习上述知识点，并通过实践项目来加深理解。同时，关注Gwt-ext的更新和社区资源，以便获取最新的API信息和最佳实践。不断练习和探索，你将能够熟练运用Gwt-ext构建...
【Yui_ext 学习笔记】 Yui_ext 是基于 Yahoo! UI Library (YUI) 的扩展，主要用于构建富客户端的 Web 应用程序。这篇学习笔记主要介绍了 Yui_ext 的基础知识，适合对 JavaScript 和 HTML DOM 有一定了解的初学者。 ...
这份"ext学习资料 20篇详细学习笔记 初学者ext学习的文档"是针对EXT初学者的一份宝贵资源，旨在帮助初学者快速入门EXT开发。 EXT的学习通常包括以下几个核心部分： 1. **EXT基础**：首先，你需要了解EXT的基本概念...
Ext JS4学习教程+笔记（一） Ext JS4学习教程+笔记（二）事件处理 Ext JS4学习教程+笔记（六）DataView面板 Ext JS4学习教程+笔记（七）树面板Tree Panel Ext JS4学习教程+笔记（三）Ajax请求 ...Ext学习网址
这篇EXT学习笔记主要涵盖了EXTJS中面向对象编程的一些关键概念和实践，包括命名空间、类定义、构造函数、属性与方法的访问控制（私有和公有）、静态属性与方法以及继承机制。 1. **命名空间**：在EXTJS中，命名空间...
里面包括Ext学习.doc和Ext学习笔记.doc两份资料。来自网上。
### Gwt-ext学习笔记之基础篇 #### 一、安装CypalStudio工具 为了能够开始Gwt-ext的学习之旅，首先需要确保开发环境已经搭建好。CypalStudio是一款非常实用的工具，它能帮助开发者更高效地进行GWT项目的开发。 1....
以下是对EXT学习笔记中涉及的关键知识点的详细说明： 1. **EXT Form**: EXT中的表单组件是构建用户交互界面的重要部分。它们允许用户输入数据并将其提交到服务器。EXT Form支持多种字段类型，如文本框、选择框、...
在EXT学习笔记中，"What_is_that_Scope_all_about2.htm"可能涉及的是JavaScript作用域和EXT中的scope概念，这对于理解和调试EXT应用中的事件处理和回调函数至关重要。"JsonTool.htm"可能介绍了EXT如何与JSON数据进行...
EXT学习笔记，是本人在一个月的学习期间整理的
在GWT-Ext的学习过程中，首先你需要了解如何定义和实现远程服务。这是GWT的一个核心特性，它允许客户端和服务器之间的安全通信。在GWT中，远程服务调用通常涉及以下几部分： 1. **远程服务接口（Remote Service ...
Ext是一个JavaScript库，主要用于构建富客户端应用程序，尤其是那些基于Web的桌面级应用。它提供了一套完整的组件模型、布局管理、数据绑定以及丰富的用户界面组件，使得开发者能够创建出功能强大的交互式网页应用。...