json格式传递数据示例,入口html页面:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>用户数据编辑 用JsonReader实现分页</title>
<meta http-equiv="Content-Type" content="text/html;charset=gbk" />
<meta http-equiv="author"content="hoojo">
<meta http-equiv="email" content="hoojo_@126.com">
<meta http-equiv="blog" content="http://blog.csdn.net/IBM_hoojo">
<link rel="stylesheet" type="text/css"href="../ext2/resources/css/ext-all.css"></link>
<script type="text/javascript"src="../ext2/adapter/ext/ext-base.js"></script>
<script type="text/javascript"src="../ext2/ext-all.js"></script>
<script type="text/javascript"src="../ext2/build/locale/ext-lang-zh_CN-min.js"></script>
<script type="text/javascript"src="JsonPagingEditorGridPanel.js"></script>
<scripttype="text/javascript">
Ext.onReady(function (){
Ext.QuickTips.init();
//Ext.form.Field.prototype.msgTarget ="side";
Ext.BLANK_IMAGE_URL ="../ext2/resources/images/default/s.gif";
newJsonPagingEditorGridPanel();
});
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>用户数据编辑用JsonReader 实现分页</title>
<meta http-equiv="Content-Type"content="text/html; charset=gbk" />
<meta http-equiv="author"content="hoojo">
<meta http-equiv="email" content="hoojo_@126.com">
<meta http-equiv="blog" content="http://blog.csdn.net/IBM_hoojo">
<link rel="stylesheet"type="text/css"href="../ext2/resources/css/ext-all.css"></link>
<script type="text/javascript"src="../ext2/adapter/ext/ext-base.js"></script>
<script type="text/javascript"src="../ext2/ext-all.js"></script>
<script type="text/javascript"src="../ext2/build/locale/ext-lang-zh_CN-min.js"></script>
<script type="text/javascript"src="JsonPagingEditorGridPanel.js"></script>
<scripttype="text/javascript">
Ext.onReady(function (){
Ext.QuickTips.init();
//Ext.form.Field.prototype.msgTarget= "side";
Ext.BLANK_IMAGE_URL= "../ext2/resources/images/default/s.gif";
newJsonPagingEditorGridPanel();
});
</script>
</head>
<body>
</body>
</html>
JsonPagingEditorGridPanel.js:
JsonPagingEditorGridPanel = Ext.extend(Ext.grid.EditorGridPanel,{
sexCombo:null,
inserted:[],
constructor:function () {
this.sexCombo = newExt.form.ComboBox({
mode: "local",
value: "全部",
readOnly: true,
triggerAction: "all",
displayField: "sex",
//listAlign : "bl-tl", //下拉列表的显示方式bl-tl是在上方显示,相反tl-bl是从下方显示
store: newExt.data.SimpleStore({
data: ["男", "女", "全部"],
expandData: true,
fields: ["sex"]
}),
listeners: {
"select": {
fn: this.filterSex,
scope: this
}
}
});
this["store"] = newExt.data.Store({
url:JsonPagingEditorGridPanel.USER_STORE_URL,
reader: newExt.data.JsonReader({
id: "id",//维护当前数据的唯一性(和数据库主键类似,避免数据重复--过滤重复数据)
root: "users",
totalProperty: "totals"
},
Ext.data.Record.create(["id","name",
{name: "age", type: "int"},"sex",
{name: "birthday", type: "date", dateFormat:"Y-m-d"}
])
),
sortInfo:{field:"id", direction:"ASC"}//排序
});
JsonPagingEditorGridPanel.superclass.constructor.call(this,{
renderTo: Ext.getBody(),
width: 480,
height: 300,
frame: true,
//loadMask:true,//显示加载旋转条
stripeRows: true,//隔行变色,区分表格行
clicksToEdit: 2,//表示点击多少次数才可以编辑表格
collapsible: true,//是否在右上角显示收缩按钮
animCollapse: true,//表示收缩(闭合)面板时,显示动画效果
trackMouseOver: true,//鼠标在行上移动时显示高亮
enableColumnMove:false,//禁止用户拖动表头
//disableSelection:true,
autoExpandColumn: "name", //这里指定的name的id ,此属性可以根据当前列填充空白区域
title:"用户数据编辑器",
tbar: [
"->","查看方式:",
this.sexCombo,
{
text: "添加数据",
handler: this.onAddClick,
scope: this
},"-",{
text: "删除数据",
handler:this.onRemoveClick,
scope: this
},"-",{
text:"保存数据",
handler:this.onCommitStore,
scope: this
}
],
bbar: newExt.PagingToolbar({
//width: 480,//如果pagingToolbar不在bbar[]括号中就不需要width,否则就要指定宽度才能显示displayInfo
pageSize: 5,
store: this.store,
displayInfo: true,
displayMsg:"显示第{0}-{1}条,共有{2}条记录",
emptyMsg: "没有记录"
}),
columns:[{
id: "name",
header: "姓名",
align: "center",
dataIndex: "name",
editor: newExt.form.TextField({
allowBlank: false,
blankText: "姓名不能为空,必须输入"
})
},{
header: "年龄",
align: "center",
dataIndex: "age",
editor: newExt.form.NumberField({
allowBlank: false,
allowNegative: false,//只能为正数
//maxValue: 1000000000,
grow: true,//前半部分显示正在改的数据,后半部分显示以前的老数据
selectOnFocus: true,//当获得焦点时,选中所有的文本内容
minValue: 1
})
},{
header: "性别",
align: "center",
dataIndex: "sex",
editor: newExt.form.ComboBox({
mode:"local",
value: "男",
readOnly: true,
displayField: "sex",
triggerAction:"all",
store: newExt.data.SimpleStore({
data: ["男", "女"],
expandData: true,
fields: ["sex"]
})
})
},{
header: "生日",
align: "center",
sortable: true,
dataIndex: "birthday",
renderer:Ext.util.Format.dateRenderer('Y-m-d'),
editor: newExt.form.DateField({
format: "Y-m-d",
minValue: "1950-01-01",
disabledDays: [0,7],//datefield的第0列:周日和第7列:周六不能编辑
disabledDaysText: "周末不能选择"
})
}],
sm: newExt.grid.RowSelectionModel({
singleSelect: true
})
});
this.store.load({params: {start: 0, limit:5}});
Ext.Ajax.on("requestcomplete", function (conn, response, options){
//alert(response.responseText);
Ext.example.msg('Click','You clicked on "Action1".');
});
},
filterSex:function (cob) {
if (cob.getValue() =="全部"){
this.store.clearFilter();
}
else
this.store.filter("sex",cob.value);
},
onAddClick:function () {
var rs = new Ext.data.Record({id: "",name: "", age: 1, sex: "",birthday: 0000-00-00});
this.getStore().add(rs);
rs.set("name", "ext");
rs.set("age", 22);
rs.set("sex", "男");
rs.set("birthday", newDate());
this.inserted.push(rs);
this.startEditing(this.store.getCount() - 1,0);
},
saveInsertData: function (conn, response){
var xml =response.responseXML;
var root =xml.documentElement;
for (var i = 0; i < root.childNodes.length; i++){
this.inserted[i].set("id",root.childNodes[i].text);
}
this.getStore().commitChanges();
this.inserted = [];
},
onCommitStore: function (){
var mf =this.getStore().modified;
var temp = [];
for (var i = 0; i < mf.length; i ++){
if (mf[i].get("id") ==""){
continue;
}
var data = {};
for (var j in mf[i].modified){
data[j] = mf[i].get(j);
}
temp.push(Ext.apply(data, {id:mf[i].get("id")}));
}
for (var i = 0; i < this.inserted.length; i ++){
temp.push(this.inserted[i].data);
}
Ext.Ajax.on("requestcomplete", function (conn, response, options){
alert(response.responseText);
});
//Ext.Ajax.on("requestcomplete", this.saveInsertData,this);
//想服务器发送请求,传递修改的数据(只含修改的数据)
Ext.Ajax.request({url: "../ServiceServlet?method=edit", params:{content:Ext.util.JSON.encode(temp)}});
this.store.commitChanges();
this.filterSex(this.sexCombo);
},
onRemoveClick: function (){
var rs =this.getSelectionModel();
try{
if (rs.getCount() == 0) {
Ext.Msg.alert("系统提示","没有选定数据,请选择数据行!");
}else {
Ext.Msg.confirm("系统提示", "您确定要删除当前数据吗?", this.removeUserInfo,this);
}
}catch(er) {
Ext.Msg.alert("系统提示",er.discription);
}
},
removeUserInfo: function (btnText){
if (btnText == "yes"){
var rs =this.getSelectionModel().getSelected();
this.getStore().remove(rs);
if (rs.get("id") != "") {
Ext.Ajax.on("requestcomplete", function (conn, response, options){
if (response.responseText == "success"){
alert("success");
}else {
alert("failure");
}
});
Ext.Ajax.request({url: "../ServiceServlet?method=remove", params:{id:rs.get("id")}});
}else{
this.inserted.remove(rs);
//this.getStore().modified.romove(rs);
}
}
}
});
JsonPagingEditorGridPanel.USER_STORE_URL = "http://localhost:8080/Demo3/ServiceServlet?method=json";
JsonPagingEditorGridPanel = Ext.extend(Ext.grid.EditorGridPanel,{
sexCombo: null,
inserted: [],
constructor: function () {
this.sexCombo = newExt.form.ComboBox({
mode:"local",
value:"全部",
readOnly:true,
triggerAction:"all",
displayField:"sex",
//listAlign :"bl-tl", //下拉列表的显示方式 bl-tl是在上方显示,相反tl-bl是从下方显示
store: newExt.data.SimpleStore({
data:["男", "女", "全部"],
expandData:true,
fields:["sex"]
}),
listeners:{
"select":{
fn:this.filterSex,
scope:this
}
}
});
this["store"] = newExt.data.Store({
url:JsonPagingEditorGridPanel.USER_STORE_URL,
reader: newExt.data.JsonReader({
id:"id", //维护当前数据的唯一性(和数据库主键类似,避免数据重复--过滤重复数据)
root:"users",
totalProperty:"totals"
},
Ext.data.Record.create(["id","name",
{name:"age", type: "int"}, "sex",
{name:"birthday", type: "date", dateFormat: "Y-m-d"}
])
),
sortInfo:{field:"id",direction:"ASC"} //排序
});
JsonPagingEditorGridPanel.superclass.constructor.call(this,{
renderTo:Ext.getBody(),
width:480,
height:300,
frame:true,
//loadMask:true,//显示加载旋转条
stripeRows:true, //隔行变色,区分表格行
clicksToEdit:2, //表示点击多少次数才可以编辑表格
collapsible:true, //是否在右上角显示收缩按钮
animCollapse:true, //表示收缩(闭合)面板时,显示动画效果
trackMouseOver:true, //鼠标在行上移动时显示高亮
enableColumnMove:false,//禁止用户拖动表头
//disableSelection:true,
autoExpandColumn:"name", //这里指定的name的id ,此属性可以根据当前列 填充空白区域
title:"用户数据编辑器",
tbar: [
"->","查看方式:",
this.sexCombo,
{
text:"添加数据",
handler:this.onAddClick,
scope:this
},"-",{
text:"删除数据",
handler:this.onRemoveClick,
scope:this
},"-",{
text:"保存数据",
handler:this.onCommitStore,
scope:this
}
],
bbar: newExt.PagingToolbar({
//width:480,//如果pagingToolbar不在bbar[]括号中就不需要width,否则就要指定宽度才能显示displayInfo
pageSize:5,
store:this.store,
displayInfo:true,
displayMsg:"显示第{0}-{1}条,共有{2}条记录",
emptyMsg:"没有记录"
}),
columns:[{
id:"name",
header:"姓名",
align:"center",
dataIndex:"name",
editor:new Ext.form.TextField({
allowBlank:false,
blankText:"姓名不能为空,必须输入"
})
},{
header:"年龄",
align:"center",
dataIndex:"age",
editor:new Ext.form.NumberField({
allowBlank:false,
allowNegative:false, //只能为正数
//maxValue:1000000000,
grow:true, //前半部分显示正在改的数据,后半部分显示以前的老数据
selectOnFocus:true, //当获得焦点时,选中所有的文本内容
minValue:1
})
},{
header:"性别",
align:"center",
dataIndex:"sex",
editor:new Ext.form.ComboBox({
mode:"local",
value:"男",
readOnly:true,
displayField:"sex",
triggerAction:"all",
store:new Ext.data.SimpleStore({
data:["男", "女"],
expandData:true,
fields:["sex"]
})
})
},{
header:"生日",
align:"center",
sortable:true,
dataIndex:"birthday",
renderer:Ext.util.Format.dateRenderer('Y-m-d'),
editor:new Ext.form.DateField({
format:"Y-m-d",
minValue:"1950-01-01",
disabledDays:[0, 7],//datefield的第0列:周日和第7列:周六不能编辑
disabledDaysText:"周末不能选择"
})
}],
sm: newExt.grid.RowSelectionModel({
singleSelect:true
})
});
this.store.load({params:{start: 0, limit: 5}});
Ext.Ajax.on("requestcomplete",function (conn, response, options) {
//alert(response.responseText);
Ext.example.msg('Click','Youclicked on "Action 1".');
});
},
filterSex: function (cob) {
if (cob.getValue() =="全部"){
this.store.clearFilter();
}
else
this.store.filter("sex",cob.value);
},
onAddClick: function () {
var rs = newExt.data.Record({id: "",name: "", age: 1, sex: "", birthday:0000-00-00});
this.getStore().add(rs);
rs.set("name", "ext");
rs.set("age", 22);
rs.set("sex", "男");
rs.set("birthday", newDate());
this.inserted.push(rs);
this.startEditing(this.store.getCount()- 1, 0);
},
saveInsertData: function (conn, response) {
var xml =response.responseXML;
var root =xml.documentElement;
for (var i = 0; i< root.childNodes.length; i++) {
this.inserted[i].set("id",root.childNodes[i].text);
}
this.getStore().commitChanges();
this.inserted = [];
},
onCommitStore: function () {
var mf =this.getStore().modified;
var temp = [];
for (var i = 0; i< mf.length; i ++) {
if(mf[i].get("id") == ""){
continue;
}
var data ={};
for (var j inmf[i].modified) {
data[j]= mf[i].get(j);
}
temp.push(Ext.apply(data,{id:mf[i].get("id")}));
}
for (var i = 0; i< this.inserted.length; i ++) {
temp.push(this.inserted[i].data);
}
Ext.Ajax.on("requestcomplete",function (conn, response, options) {
alert(response.responseText);
});
//Ext.Ajax.on("requestcomplete",this.saveInsertData, this);
//想服务器发送请求,传递修改的数据(只含修改的数据)
Ext.Ajax.request({url:"../ServiceServlet?method=edit", params:{content:Ext.util.JSON.encode(temp)}});
this.store.commitChanges();
this.filterSex(this.sexCombo);
},
onRemoveClick: function () {
var rs =this.getSelectionModel();
try{
if(rs.getCount() == 0) {
Ext.Msg.alert("系统提示","没有选定数据,请选择数据行!");
}else {
Ext.Msg.confirm("系统提示","您确定要删除当前数据吗?", this.removeUserInfo, this);
}
}catch(er) {
Ext.Msg.alert("系统提示",er.discription);
}
},
removeUserInfo: function (btnText) {
if (btnText == "yes"){
var rs =this.getSelectionModel().getSelected();
this.getStore().remove(rs);
if(rs.get("id") != "") {
Ext.Ajax.on("requestcomplete",function (conn, response, options) {
if(response.responseText == "success") {
alert("success");
}else{
alert("failure");
}
});
Ext.Ajax.request({url:"../ServiceServlet?method=remove", params:{id:rs.get("id")}});
}else{
this.inserted.remove(rs);
//this.getStore().modified.romove(rs);
}
}
}
});
JsonPagingEditorGridPanel.USER_STORE_URL = "http://localhost:8080/Demo3/ServiceServlet?method=json";
后台java code:
importjava.io.PrintWriter;
import java.util.List;
importjavax.servlet.ServletException;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
import com.hoo.dao.IUser;
importcom.hoo.dao.impl.UserDao;
importcom.hoo.entity.UserInfo;
@SuppressWarnings({"unchecked","serial"})
public class ServiceServlet extends HttpServlet{
privateIUser dao = newUserDao();
public voiddoGet(HttpServletRequest request, HttpServletResponseresponse)
throws ServletException, IOException{
response.setCharacterEncoding("GBK");
PrintWriter out =response.getWriter();
StringBuilder builder = newStringBuilder();
String method =request.getParameter("method");
if ("json".equals(method)){
int start =Integer.parseInt(request.getParameter("start"));
int limit =Integer.parseInt(request.getParameter("limit"));
Object[] obj = dao.loadUserInfo(start,limit);
List<UserInfo> list =(List<UserInfo>)obj[1];
builder.append("{totals:").append(obj[0]).append(",users:[");
for (int i = 0; i < list.size(); i++){
UserInfo u = (UserInfo)list.get(i);
builder.append("{id:"").append(u.getId())
.append("",name:"").append(u.getName())
.append("",age:").append(u.getAge())
.append(",sex:"").append(u.getSex())
.append("",birthday:"").append(u.getBirthday())
.append(""}");
if (i < list.size()-1){
builder.append(",");
}
}
builder.append("]}");
out.write(builder.toString());
}
if ("edit".equals(method)){
String content =request.getParameter("content");
out.print(content);
}
if ("remove".equals(method)){
Integer id =Integer.parseInt(request.getParameter("id"));
if (dao.removeUserInfo(id)){
out.print("success");
}else {
out.print("failure");
}
}
out.flush();
out.close();
}
public voiddoPost(HttpServletRequest request, HttpServletResponseresponse)
throws ServletException, IOException{
this.doGet(request,response);
}
}
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.hoo.dao.IUser;
import com.hoo.dao.impl.UserDao;
import com.hoo.entity.UserInfo;
@SuppressWarnings({"unchecked", "serial"})
public class ServiceServlet extends HttpServlet {
private IUser dao = new UserDao();
public void doGet(HttpServletRequest request,HttpServletResponse response)
throwsServletException, IOException {
response.setCharacterEncoding("GBK");
PrintWriter out =response.getWriter();
StringBuilder builder = newStringBuilder();
String method =request.getParameter("method");
if ("json".equals(method)){
int start =Integer.parseInt(request.getParameter("start"));
int limit =Integer.parseInt(request.getParameter("limit"));
Object[] obj= dao.loadUserInfo(start, limit);
List<UserInfo>list = (List<UserInfo>) obj[1];
builder.append("{totals:").append(obj[0]).append(",users:[");
for (int i =0; i < list.size(); i++) {
UserInfou = (UserInfo) list.get(i);
builder.append("{id:"").append(u.getId())
.append("",name:"").append(u.getName())
.append("",age:").append(u.getAge())
.append(",sex:"").append(u.getSex())
.append("",birthday:"").append(u.getBirthday())
.append(""}");
if(i < list.size()-1) {
builder.append(",");
}
}
builder.append("]}");
out.write(builder.toString());
}
if ("edit".equals(method)){
Stringcontent = request.getParameter("content");
out.print(content);
}
if ("remove".equals(method)){
Integer id =Integer.parseInt(request.getParameter("id"));
if(dao.removeUserInfo(id)) {
out.print("success");
}else {
out.print("failure");
}
}
out.flush();
out.close();
}
public void doPost(HttpServletRequest request,HttpServletResponse response)
throwsServletException, IOException {
this.doGet(request,response);
}
}
至此,ExtJS中常用的3中交互方式的示例全部在此。其中json格式交互方式最为常用。
原因是xml格式体积过于庞大,里面有标签过多。而array数组格式的文件,虽然提交很小。
传输速度快。但在数据量很大的情况下,数据的可读性几乎全无。后来出现了json,
它简化了xml文件提交庞大的问题,可读性也非常好、在网络中的传输速度也很快,且易于使用、学习。