ext学习笔记（转）

最新推荐文章于 2024-11-08 11:17:16 发布

shmily2oo8

最新推荐文章于 2024-11-08 11:17:16 发布

阅读量151

点赞数

分类专栏： Java 文章标签： EXT json CSS Bean XML

Java 专栏收录该内容

115 篇文章 0 订阅

订阅专栏

文章摘要：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 οnlοad="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 οnlοad="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