鍦ㄥ疄闄呯殑緗戦〉寮€鍙戜腑錛屽ぇ閮ㄥ垎鏃墮棿閮借娑夊強鍒癋orm琛ㄥ崟鐨勫鐞嗐€傚湪Ext妗嗘灦涓篃鎻愪緵浜嗗緢澶氳繖鏂歸潰鐨勬帶浠訛紝鑰屼笖榪樻湁涓€涓笓闂ㄧ殑FormPanel甯?灞€錛岃甯冨眬榛樿涓烘斁鍦ㄩ潰鏉夸笂闈㈢殑鎵€鏈夋帶浠墮兘鏄崲琛屾斁緗紝鑰屽湪瀹為檯搴旂敤涓負(fù)浜嗙編瑙傦紝鏈変簺闇€瑕佹í鎺掞紝鐗瑰埆鏄疪adio鎺т歡錛岃繖涓椂鍊欏氨闇€瑕佹垜浠噸鏂板畾鍒惰繖浜涙帶 浠剁殑甯冨眬浜嗭紝璇ヤ緥瀛愪腑浣跨敤CSS鏉ュ疄鐜拌繖浜涘姛鑳斤紝鍏堣創(chuàng)鍑轟竴寮犳晥鏋滃浘銆?/p>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ext涓璅ormPanel闈㈡澘鍙奆orm鎺т歡妯帓嫻嬭瘯(CSS)</title>
<link rel="stylesheet" type="text/css" media="all" href="../ext/resources/css/ext-all.css" />
<style type="text/css" media="all">
.allow-float {clear:none!important;} /* 鍏佽璇ュ厓绱犳誕鍔?*/
.stop-float {clear:both!important;} /* 闃繪璇ュ厓绱犳誕鍔?*/
.sex-male {float:left;}
.sex-female {float:left;padding:0 0 0 20px;}
.age-field {float:left;padding:0 0 0 58px;*padding:0 0 0 50px!important;*padding:0 0 0 50px;}
</style>
</head>
<body>
<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-all.js"></script>
<script type="text/javascript" src="../ext/build/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">Ext.BLANK_IMAGE_URL = '../ext/resources/images/default/s.gif';</script>
<script type="text/javascript">
Ext.onReady(function() {
//鍒涘緩Form闈㈡澘
var fp = new Ext.form.FormPanel({
buttonAlign:'center',
labelAlign:'right',
labelWidth:40,
frame:true,
bodyStyle:'padding:8px 0 0 0;',
items:[{
xtype:'textfield',
fieldLabel:'濮撳悕',
name:'n_username',
id:'i_username',
width:320
},{
xtype:'radio',
fieldLabel:'鎬у埆',
boxLabel:'鐢?,
name:'sex',
id:'male',
itemCls:'sex-male', //鍚戝乏杈規(guī)誕鍔?澶勭悊鎺т歡妯帓
clearCls:'allow-float', //鍏佽涓よ竟嫻姩,鍦ㄥ疄闄呯敓鎴愮殑HTML緇撴瀯涓湁涓撻棬鐨凞IV闃繪柇嫻姩
checked:true
},{
xtype:'radio',
boxLabel:'濂?,
name:'sex',
id:'female',
itemCls:'sex-female', //鍚戝乏嫻姩,澶勭悊鎺т歡妯帓
clearCls:'allow-float', //鍏佽涓よ竟嫻姩
hideLabel:true //涓嶆樉紺哄墠闈?鎬у埆"鐨勬爣絳?br />
},{
xtype:'textfield',
fieldLabel:'騫撮緞',
name:'n_age',
id:'i_age',
itemCls:'age-field', //鍚戝乏嫻姩,澶勭悊鎺т歡妯帓
width:133
},{
xtype:'textfield',
fieldLabel:'浣忓潃',
name:'n_address',
id:'i_address',
itemCls:'stop-float', //涓嶅厑璁告誕鍔?緇撴潫鎺т歡妯帓
width:320
}],
buttons:[{
text:'紜畾',
handler:onOK //瀹為檯搴旂敤涓€鑸槸澶勭悊fp.getForm.submit()浜嬩歡
}, {
text:'閲嶇疆',
handler:function(){ fp.getForm().reset(); }
}],
keys:[{ //澶勭悊閿洏鍥炶濺浜嬩歡
key:Ext.EventObject.ENTER,
fn:onOK,
scope:this
}]
});
//紜畾鎸夐挳浜嬩歡,榪欓噷鍙槸綆€鍗曡幏鍙栧悇鎺т歡鍊?瀹為檯搴旂敤涓€鑸拰鍚庡彴鑴氭湰緇撳悎
function onOK() {
var strMsg;
strMsg = ‘濮撳悕錛?#8217; + fp.getComponent(’i_username’).getValue() + ‘錛屾€у埆錛?#8217;;
if (fp.getComponent(’male’).checked) strMsg += ‘鐢?#8217;;
if (fp.getComponent(’female’).checked) strMsg += ‘濂?#8217;;
strMsg += ‘錛屽勾榫勶細(xì)’ + fp.getComponent(’i_age’).getValue();
strMsg += ‘錛屼綇鍧€錛?#8217; + fp.getComponent(’i_address’).getValue();
alert(strMsg);
}
//鍒涘緩涓葷獥鍙?br />
new Ext.Window({
title:’Ext涓璅ormPanel闈㈡澘鍙奆orm鎺т歡妯帓嫻嬭瘯(CSS)’,
width:400,
closable:false,
collapsible:true,
draggable:false,
resizable:false,
modal:true,
border:false,
items:[fp],
buttons:[]
}).show();
});
</script>
</body>
</html>
Store:
var resource = new Ext.data.Store({
fields: ['imgpath','typeImage','title', 'type'],
url: 'teaching/resource/resourceAction.evi?method=getResourceList',
reader: new Ext.data.XmlReader(
{
record: "Item",
totalRecords: "TotalCount"
},
[{name:'title',mapping: 'title'}, {name:'type',mapping: 'type'},{name:'imgpath',mapping: 'imgpath'},{name:'typeImage',mapping: 'typeImage'} ]
)
});
resource.addListener('load', function(st, rds, opts) {
// st 鏄綋鍓嶇殑store, rds鏄鍒扮殑Record[], opts鏄痵tore鐨勯厤緗?br />
for( var c=0; c<rds.length; c++ ) {
rds[c].set('typeImage', "<img src='./images/33.gif' width='12' height='12' />");
//寰呭畾綾誨埆錛屽厛瀹氭綾誨埆鍥劇墖
}
});
resource.load({params:{start:0,limit:10}});
var resourceType = new Ext.data.Store({
,
reader: new Ext.data.XmlReader({
record: "Item"
}, [
{name: 'resourceTypeId', mapping: 'resourceTypeId'},
{name: 'resourceType', mapping: 'resourceType'}
])
});
resourceType.load();
var languageType = new Ext.data.Store({
,
reader: new Ext.data.XmlReader({
record: "Item"
}, [
{name: 'languageTypeId', mapping: 'languageTypeId'},
{name: 'languageType', mapping: 'languageType'}
])
});
languageType.load();
瀹冧細(xì)灝嗘暣涓?/span>action涓殑鍙橀噺杞寲涓?/span>JSON鏁版嵁(鏍瑰璞″湪JSON涓暟鎹坊鍔犱竴涓?/span>”root”鏍囪瘑)銆傚鏋滆浣跨敤瀹冿紝Action蹇呴』閬靛驚浠ヤ笅鍑犵偣錛?/span>
1. 榪斿洖鐨勯〉闈㈢被鍨嬩腑”content-type”蹇呴』鏄?/span>”application/json”.(榪欎釜宸茬粡Internet Community閲囩敤).
2. JSON鍐呭蹇呴』鏄鍚堟牸寮忚姹傜殑.
3. Action涓?/span>field蹇呴』鏈?/span>public鐨?/span>set鏂規(guī)硶.(鏄笉鏄病鏈?/span>set鏂規(guī)硶灝變笉浼?xì)灏?/span>field娣誨姞鍒?/span>JSON鏁版嵁涓紝鏈夊緟楠岃瘉).
4. 瀹冩敮鎸佺殑綾誨瀷鏈?/span>: 鍩烘湰綾誨瀷(int,long...String), Date, List, Map, Primitive Arrays, 鍏跺畠class, 瀵硅薄鏁扮粍.
5. 鍦?/span>JSON涓換浣曠殑Object浼?xì)琚珵畞瑁呭?/span>list鎴?/span>map涓紝鏁版嵁浼?xì)琚珵畞瑁吔E?/span>Long錛屽鏋滄槸鍚湁鐨勬暟鎹垯浼?xì)琚珵畞瑁吔E?/span>Double錛屾暟緇勪細(xì)琚皝瑁呯▼List.
涓嬮潰緇欏嚭JSON鐨勬暟鎹牸寮?/span>:
{
"doubleValue": 10.10,
"nestedBean": {
"name": "Mr Bean"
},
"list": ["A", 10, 20.20, {
"firstName": "El Zorro"
}],
"array": [10, 20]
}
璇存槑:
a. 榪欎釜鎻掍歡鏀寔浠ヤ笅鍑犱釜娉ㄩ噴:
娉ㄩ噴鍚?/span> |
綆€浠?/span> |
榛樿鍊?/span> |
搴忓垪鍖?/span> |
鍙嶅簭鍒楀寲 |
name |
閰嶇疆JSON涓?/span>name |
empty |
yes |
no |
serialize |
鍦?/span>serialization涓?/span> |
true |
yes |
no |
deserialize |
鍦?/span>deserialization涓?/span> |
true |
no |
yes |
format |
鏍煎紡鍖?/span>Date瀛楁 |
"yyyy-MM-dd'T'HH:mm:ss" |
yes |
yes |
鍙互閫氳繃閰嶇疆鏉ユ樉紺烘寚鍑鴻鏀懼湪JSON涓?/span>field錛屽叾涓湁涓嚜宸辯殑楠岃瘉瑙勫垯闇€瑕佺爺絀?/span>.
<!-- Result fragment -->
<result type="json">
<param name="excludeProperties">
login.password,
studentList.*".sin
</param>
</result>
<!-- Interceptor fragment -->
<interceptor-ref name="json">
<param name="enableSMD">true</param>
<param name="excludeProperties">
login.password,
studentList.*".sin
</param>
</interceptor-ref>
b. 鏍瑰璞?/span>
<result type="json">
<param name="root">
person.job
</param>
</result>
涔熷彲浠ヤ嬌鐢ㄦ嫤鎴櫒閰嶇疆鎿嶄綔鐖跺璞?/span>
<interceptor-ref name="json">
<param name="root">bean1.bean2</param>
</interceptor-ref>
c. 灝?/span>JSON鏁版嵁鐢ㄦ敞閲婂皝瑁?/span>
濡傛灉wrapWithComments璁劇疆涓?/span>true(榛樿鍊間負(fù)false)錛屽垯鐢熸垚鐨?/span>JSON鏁版嵁浼?xì)鍙樻垚杩欐狓P細(xì)
/* {
"doubleVal": 10.10,
"nestedBean": {
"name": "Mr Bean"
},
"list": ["A", 10, 20.20, {
"firstName": "El Zorro"
}],
"array": [10, 20]
} */
榪欐牱鍋氬彲浠ラ伩鍏?/span>js涓竴浜涙綔鍦ㄧ殑椋庨櫓錛屼嬌鐢ㄦ椂闇€瑕?/span>:
Var responseObject = eval("("+data.substring(data.indexOf(""/"*")+2, data.lastIndexOf(""*"/"))+")");
d. 鐖剁被
“root”瀵硅薄涓埗綾葷殑field涓嶄細(xì)榛樿瀛樻斁鍒?/span>JSON鏁版嵁涓紝濡傛灉涓嶆兂榪欐牱鍋氾紝闇€瑕佸湪閰嶇疆鏃舵寚瀹?/span>ignoreHierarchy涓?/span>false:
<result type="json">
<param name="ignoreHierarchy">false</param>
</result>
e. 鏋氫婦綾誨瀷
榛樿澶勭悊鏋氫婦綾誨瀷鏃訛紝浼?xì)琚鐞嗘?/span>JSON鏁版嵁涓?/span>name絳変簬鏋氫婦涓?/span>value鑰?/span>value絳変簬鏋氫婦涓?/span>name.
public enum AnEnum {
ValueA,
ValueB
}
JSON: "myEnum":"ValueA"
濡傛灉鍦ㄥ鐞嗘灇涓劇被鍨嬫椂錛屽湪xml涓厤緗簡enumAsBean錛屽垯浼?xì)琚綋浣滀竴涓?/span>Bean澶勭悊錛屽湪JSON鏁版嵁涓細(xì)鏈変竴涓壒鍒殑灞炴€?/span>”_name”鍊間負(fù)name().榪欎釜鏋氫婦涓殑鎵€鏈夊睘鎬ч兘浼?xì)琚鐞?/span>.
public enum AnEnum {
ValueA("A"),
ValueB("B");
private String val;
public AnEnum(val) {
this.val = val;
}
public getVal() {
return val;
}
}
JSON: myEnum: { "_name": "ValueA", "val": "A" }
Xml涓厤緗?/span>:
<result type="json">
<param name="enumAsBean">true</param>
</result>
f. 渚嬪瓙
a) Action
import java.util.HashMap;
import java.util.Map;
import com.opensymphony.xwork2.Action;
public class JSONExample {
private String field1 = "str";
private int[] ints = {10, 20};
private Map map = new HashMap();
private String customName = "custom";
//'transient' fields are not serialized
private transient String field2;
//fields without getter method are not serialized
private String field3;
public String execute() {
map.put("John", "Galt");
return Action.SUCCESS;
}
public String getField1() {
return field1;
}
public void setField1(String field1) {
this.field1 = field1;
}
public int[] getInts() {
return ints;
}
public void setInts(int[] ints) {
this.ints = ints;
}
public Map getMap() {
return map;
}
public void setMap(Map map) {
this.map = map;
}
@JSON(name="newName")
public String getCustomName() {
return this.customName;
}
}
b) Xml閰嶇疆
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<package name="example" extends="json-default">
<action name="JSONExample" class="example.JSONExample">
<result type="json"/>
</action>
</package>
</struts>
榪欓噷鏈変袱涓湴鏂歸渶瑕佹敞鎰?/span>:
1) 闇€瑕佺戶鎵?/span>json-default鍖?/span>
2) <result>絳劇殑瀹氫箟
c) JSON鏁版嵁
{
"field1" : "str",
"ints": [10, 20],
"map": {
"John":"Galt"
},
"newName": "custom"
}
d) JSON RPC
JSON鎻掍歡鍙互鍦?/span>js涓皟鐢?/span>action鏂規(guī)硶錛岃繑鍥炴墽琛岀粨鏋溿€傝繖涓凡緇忓湪dojo涓湁浜嗗疄鐜幫紝鍙互鐢?/span>Simple Method Definition璋冪敤榪滅▼鏈嶅姟銆傛潵涓€璧風(fēng)湅鐪嬩笅闈㈢殑渚嬪瓙錛?/span>
棣栧厛鍐欎竴涓?/span>Action錛?/span>
package smd;
import com.googlecode.jsonplugin.annotations.SMDMethod;
import com.opensymphony.xwork2.Action;
public class SMDAction {
public String smd() {
return Action.SUCCESS;
}
@SMDMethod
public Bean doSomething(Bean bean, int quantity) {
bean.setPrice(quantity * 10);
return bean;
}
}
e) 鏂規(guī)硶蹇呴』鐢?/span>SMDMethod鍔犱笂娉ㄨВ錛岃繖鏍鋒墠鑳借榪滅▼璋冪敤錛屼負(fù)浜嗗畨鍏ㄥ洜绱犮€傝繖涓柟娉曚細(xì)浜х敓涓€涓?/span>bean瀵硅薄錛屽疄鐜頒慨鏀逛環(huán)鏍肩殑鍔熻兘銆?/span>Action琚坊鍔犱笂SMD娉ㄨВ浼?xì)鐢熸垚涓€涓?/span>SMD錛屽悓鏃跺弬鏁頒篃浼?xì)琚姞涓?/span>SMDMethodParameter娉ㄨВ銆傚儚浣犳墍鐪嬪埌鐨勶紝Action涓畾涔変簡涓€涓┖鏂規(guī)硶錛?/span>smd銆傝繖涓柟娉曟槸浣滀負(fù)Simple Method Definition (瀹氫箟class涓彁渚涚殑鏈嶅姟)錛屽湪struts.xml閰嶇疆<result>鏃朵嬌鐢?/span>type灞炴€у€間負(fù)”json”銆?/span>
涓嬮潰鏄?/span>bean鐨勫畾涔夛細(xì)
package smd;
public class Bean {
private String type;
private int price;
public String getType() {
return type;
}
public void setType(String type) {
this.type = type;
}
public int getPrice() {
return price;
}
public void setPrice(int price) {
this.price = price;
}
}
Xml鏂囦歡:
<package name="RPC" namespace="/nodecorate" extends="json-default">
<action name="SMDAction" class="smd.SMDAction" method="smd">
<interceptor-ref name="json">
<param name="enableSMD">true</param>
</interceptor-ref>
<result type="json">
<param name="enableSMD">true</param>
</result>
</action>
</package>
榪欓噷闇€瑕佹敞鎰忎竴鐐?/span>:” enableSMD”榪欎釜蹇呴』鍦?/span>interceptor鍜?/span>result閮借閰嶇疆.
Js浠g爜:
<s:url id="smdUrl" namespace="/nodecorate" action="SMDAction" />
<script type="text/javascript">
//load dojo RPC
dojo.require("dojo.rpc.*");
//create service object(proxy) using SMD (generated by the json result)
var service = new dojo.rpc.JsonService("${smdUrl}");
//function called when remote method returns
var callback = function(bean) {
alert("Price for " + bean.name + " is " + bean.price);
};
//parameter
var bean = {name: "Mocca"};
//execute remote method
var defered = service.doSomething(bean, 5);
//attach callback to defered object
defered.addCallback(callback);
</script>
JsonService浼?xì)鍙戝囖Z竴涓姹傚埌action鍔犺澆SMD錛屽悓鏃惰繙紼嬫柟娉曚細(xì)榪斿洖涓€涓?/span>JSON瀵硅薄錛岃繖涓繃紼嬫槸Dojo緇?/span>action涓殑鏂規(guī)硶鍒涘緩浜嗕竴涓?/span>Proxy銆傚洜涓鴻繖鏄紓姝ヨ皟鐢ㄨ繃紼嬶紝褰撹繙紼嬫柟娉曟墽琛岀殑鏃跺€欙紝瀹冧細(xì)榪斿洖涓€涓璞″埌callback鏂規(guī)硶涓€?/span>
f) 浠g悊鐨勫璞?/span>
褰撲嬌鐢ㄧ殑娉ㄨВ涓嶆槸緇ф壙鑷?/span>Java錛屽彲鑳戒綘浣跨敤浠g悊浼?xì)鍑虹庮C竴浜涢棶棰樸€傛瘮濡傦細(xì)褰撲綘浣跨敤aop鎷︽埅浣犵殑action鐨勬椂鍊欍€傚湪榪欑鎯呭喌涓嬶紝榪欎釜鎻掍歡涓嶄細(xì)鑷姩鍙戠幇娉ㄨВ鐨勬柟娉曘€備負(fù)浜嗛伩鍏嶈繖縐嶆儏鍐靛彂鐢燂紝浣犻渶瑕佸湪xml涓厤緗?/span>ignoreInterfaces涓?/span>false錛岃繖鏍鋒彃浠朵細(xì)鑷繁鏌ユ壘娉ㄨВ鐨勬墍鏈夋帴鍙e拰鐖剁被銆?/span>
娉ㄦ剰錛氳繖涓弬鏁板彧鏈夊湪Action鎵ц鐨勮繃紼嬫槸閫氳繃娉ㄨВ鏉ヨ繍琛岀殑鏃跺€欐墠搴旇璁句負(fù)false銆?/span>
<action name="contact" class="package.ContactAction" method="smd">
<interceptor-ref name="json">
<param name="enableSMD">true</param>
<param name="ignoreInterfaces">false</param>
</interceptor-ref>
<result type="json">
<param name="enableSMD">true</param>
<param name="ignoreInterfaces">false</param>
</result>
<interceptor-ref name="default"/>
</action>