json格式傳遞數據示例，入口html頁面：
~~~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//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>
<script type="text/javascript">
Ext.onReady(function (){
Ext.QuickTips.init();
//Ext.form.Field.prototype.msgTarget = "side";
Ext.BLANK_IMAGE_URL = "../ext2/resources/images/default/s.gif";
new JsonPagingEditorGridPanel();
});
</script>
</head>
<body>
</body>
</html>``
~~~
JsonPagingEditorGridPanel.js：
~~~
/**
* 用JSON格式的數據形式：Ext.data.Store，Ext.data.JsonReader解析器，實現editorGrid的增刪改查
* author: hoojo
* email: hoojo_@126.com
* blog: http://blog.csdn.net/IBM_hoojo
* ext-lib: v2.2
*/
/****************************************************************/
/*******JsonPagingEditorGridPanel*******/
/****************************************************************/
JsonPagingEditorGridPanel = Ext.extend(Ext.grid.EditorGridPanel, {
sexCombo: null,
inserted: [],
constructor: function () {
this.sexCombo = new Ext.form.ComboBox({
mode: "local",
value: "全部",
readOnly: true,
triggerAction: "all",
displayField: "sex",
//listAlign : "bl-tl", //下拉列表的顯示方式 bl-tl是在上方顯示，相反tl-bl是從下方顯示
store: new Ext.data.SimpleStore({
data: ["男", "女", "全部"],
expandData: true,
fields: ["sex"]
}),
listeners: {
"select": {
fn: this.filterSex,
scope: this
}
}
});
this["store"] = new Ext.data.Store({
url: JsonPagingEditorGridPanel.USER_STORE_URL,
reader: new Ext.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: new Ext.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: new Ext.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 "Action 1".');
});
},
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", new Date());
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";
~~~
后臺java code：
~~~
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)
throws ServletException, IOException {
response.setCharacterEncoding("GBK");
PrintWriter out = response.getWriter();
StringBuilder builder = new StringBuilder();
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 void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request, response);
}
}
~~~
至此，ExtJS中常用的3中交互方式的示例全部在此。其中json格式交互方式最為常用。
原因是xml格式體積過于龐大，里面有標簽過多。而array數組格式的文件，雖然提交很小。
傳輸速度快。但在數據量很大的情況下，數據的可讀性幾乎全無。后來出現了json，
它簡化了xml文件提交龐大的問題，可讀性也非常好、在網絡中的傳輸速度也很快，且易于使用、學習。
- 前言
- ExtJS 中用js 操作cookie的方法
- eclipse MyEclipse中安裝 ext插件 spket提示
- eclipse MyEclipse中安裝 spket插件 js文件內容字體變小解決方案
- ExtJS中，在FireFox瀏覽器中字體很小，解決方法
- ExtJS中grid按照中文拼音首字母排序、改變行背景、列背景、靜態數據分頁不再困難
- ExtJS中grid按照使用Expand插件、分組顯示、中文拼音首字母排序、改變行背景、列背景、靜態數據分頁綜合案例
- ExtJS EditorGridPanel 示例之xml格式Store前后臺增刪改查
- ExtJS EditorGridPanel 示例之Array格式（自定義Array解析器）Store前后臺增刪改查
- ExtJS EditorGridPanel 示例之Array格式Store前后臺增刪改查（不支持分頁）
- ExtJS EditorGridPanel 示例之JSON格式Store前后臺增刪改查
- Ext 中，為Ext.form.HtmlEditor添加鍵盤事件
- ExtJS 文件瀏覽器，可以選擇文件和文件夾
- Struts2、Spring3、MyBatis3整合ExtJS，完成ColumnTree 【一】
- Struts2、Spring3、MyBatis3整合ExtJS，完成ColumnTree 【二】
- Struts2、Spring3、MyBatis3整合ExtJS，完成CheckNodeColumnTree
- ExtJS Form擴展組件[ColorFiled, DateTimeFiled, IconCombo, MultiComboBox, DynamicTreeCombox]
- Ext [DDTabPanel、FoodImageField、ImageChooser]擴展組件