extjs_03_grid(弹出框&行编辑器 增删改数据)
浏览数：23 /
时间：2015年06月09日
1.弹出框(新增，删除)
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP "index.jsp" starting page</title>
<link rel="stylesheet" type="text/css" href="./extjs4.1/resources/css/ext-all.css">
<script type="text/javascript" src="./extjs4.1/ext-all-debug.js"></script>
<script type="text/javascript" src="./extjs4.1/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
// 自定义数据模型
var myModel = Ext.define("studentInfo", {
extend : "Ext.data.Model",
fields : [ {
type : "string",
name : "stuNo"
}, {
type : "string",
name : "stuName"
}, {
type : "string",
name : "stuClass"
}, {
type : "number",
name : "chScore"
}, {
type : "number",
name : "maScore"
}, {
type : "number",
name : "enScore"
} ]
});
// 本地数据
var myData = [ [ "No1", "wangzs1", "1年级", 80, 67, 49 ], [ "No2", "wangzs2", "2年级", 65, 57, 79 ],
[ "No3", "wangzs3", "3年级", 45, 77, 59 ], [ "No4", "wangzs4", "4年级", 99, 27, 19 ],
[ "No5", "wangzs5", "5年级", 23, 97, 99 ], [ "No6", "wangzs6", "6年级", 34, 67, 99 ] ];
// 数据存储
var myStore = Ext.create("Ext.data.Store", {
model : "studentInfo",
data : myData
});
// 表格
var myGrid = new Ext.grid.Panel({
columns : [ {
xtype : "rownumberer",
text : "行号"
}, {
text : "学号",
dataIndex : "stuNo"
}, {
text : "姓名",
dataIndex : "stuName"
}, {
text : "班级",
dataIndex : "stuClass"
}, {
text : "语文",
dataIndex : "chScore"
}, {
text : "数学",
dataIndex : "maScore"
}, {
text : "英语",
dataIndex : "enScore"
} ],
store : myStore,
selModel : {
selType : "checkboxmodel"//复选框
},
multiSelect : true
//支持多选
});
// 新增panel
var addPanel = Ext.create("Ext.form.Panel", {
items : [ {
xtype : "textfield",
name : "stuNo",
fieldLabel : "学号"
}, {
xtype : "textfield",
name : "stuName",
fieldLabel : "姓名"
}, {
xtype : "textfield",
name : "stuClass",
fieldLabel : "班级"
}, {
xtype : "numberfield",
name : "chScore",
fieldLabel : "语文"
}, {
xtype : "numberfield",
name : "maScore",
fieldLabel : "数学"
}, {
xtype : "numberfield",
name : "enScore",
fieldLabel : "英语"
} ]
});
// 新增窗口
var addWindow = Ext.create("Ext.window.Window", {
title : "新增学生成绩",
closeAction : "hide",//设置该属性新增窗口关闭的时候是隐藏
width : 300,
height : 300,
items : addPanel,
layout : "fit",
bbar : {
xtype : "toolbar",
items : [ {
xtype : "button",
text : "保存",
listeners : {
"click" : function(btn) {
var form = addPanel.getForm();
var stuNoVal = form.findField("stuNo").getValue();
var stuNameVal = form.findField("stuName").getValue();
var stuClassVal = form.findField("stuClass").getValue();
var chScoreVal = form.findField("chScore").getValue();
var maScoreVal = form.findField("maScore").getValue();
var enScoreVal = form.findField("enScore").getValue();
//Ext.Msg.alert("新增的数据", "{" + stuNo + ":" + stuName + ":" + stuClass + ":" + chScore + ":"
// + maScore + ":" + enScore + "}");
var store = myGrid.getStore();
store.insert(0, {
stuNo : stuNoVal,
stuName : stuNameVal,
stuClass : stuClassVal,
chScore : chScoreVal,
maScore : maScoreVal,
enScore : enScoreVal
});
}
}
}, {
xtype : "button",
text : "取消",
listeners : {
"click" : function(btn) {
btn.ownerCt.ownerCt.close();
}
}
} ]
}
});
// 窗口
var window = Ext.create("Ext.window.Window", {
title : "学生成绩表",
width : 600,
height : 400,
items : myGrid,
layout : "fit",
tbar : {
xtype : "toolbar",
items : [ {
xtype : "button",
text : "新增",
listeners : {
"click" : function(btn) {
addPanel.getForm().reset();//新增前清空表格内容
addWindow.show();
}
}
}, {
xtype : "button",
text : "删除",
listeners : {
"click" : function(btn) {
var records = myGrid.getSelectionModel().getSelection();
myGrid.getStore().remove(records);
}
}
} ]
}
});
window.show();
});
</script>
</head>
<body>
增加，删除表格记录(弹窗口，适用于表字段比较多)
<br>
</body>
</html>
2.行编辑器(新增，修改)
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP "index.jsp" starting page</title>
<link rel="stylesheet" type="text/css" href="./extjs4.1/resources/css/ext-all.css">
<script type="text/javascript" src="./extjs4.1/ext-all-debug.js"></script>
<script type="text/javascript" src="./extjs4.1/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
// 自定义数据模型
var myModel = Ext.define("studentInfo", {
extend : "Ext.data.Model",
fields : [ {
type : "string",
name : "stuNo"
}, {
type : "string",
name : "stuName"
}, {
type : "string",
name : "stuClass"
}, {
type : "number",
name : "chScore"
}, {
type : "number",
name : "maScore"
}, {
type : "number",
name : "enScore"
} ]
});
// 本地数据
var myData = [ [ "No1", "wangzs1", "1年级", 80, 67, 49 ], [ "No2", "wangzs2", "2年级", 65, 57, 79 ],
[ "No3", "wangzs3", "3年级", 45, 77, 59 ], [ "No4", "wangzs4", "4年级", 99, 27, 19 ],
[ "No5", "wangzs5", "5年级", 23, 97, 99 ], [ "No6", "wangzs6", "6年级", 34, 67, 99 ] ];
// 数据存储
var myStore = Ext.create("Ext.data.Store", {
model : "studentInfo",
data : myData
});
// 表格
var myGrid = new Ext.grid.Panel({
columns : [ {
xtype : "rownumberer",
text : "行号"
}, {
text : "学号",
dataIndex : "stuNo",
editor : {//用行编辑器插件需要配置该属性
xtype : "textfield"
}
}, {
text : "姓名",
dataIndex : "stuName",
editor : {
xtype : "textfield"
}
}, {
text : "班级",
dataIndex : "stuClass",
editor : {
xtype : "textfield"
}
}, {
text : "语文",
dataIndex : "chScore",
editor : {
xtype : "numberfield"
}
}, {
text : "数学",
dataIndex : "maScore",
editor : {
xtype : "numberfield"
}
}, {
text : "英语",
dataIndex : "enScore",
editor : {
xtype : "numberfield"
}
} ],
store : myStore,
selModel : {
selType : "checkboxmodel"//复选框
},
multiSelect : true,//支持多选
plugins : [ {
ptype : "rowediting",//行编辑器插件,点击2次编辑
clicksToEdit : 2
} ]
});
// 新增panel
var addPanel = Ext.create("Ext.form.Panel", {
items : [ {
xtype : "textfield",
name : "stuNo",
fieldLabel : "学号"
}, {
xtype : "textfield",
name : "stuName",
fieldLabel : "姓名"
}, {
xtype : "textfield",
name : "stuClass",
fieldLabel : "班级"
}, {
xtype : "numberfield",
name : "chScore",
fieldLabel : "语文"
}, {
xtype : "numberfield",
name : "maScore",
fieldLabel : "数学"
}, {
xtype : "numberfield",
name : "enScore",
fieldLabel : "英语"
} ]
});
// 新增窗口
var addWindow = Ext.create("Ext.window.Window", {
title : "新增学生成绩",
closeAction : "hide",//设置该属性新增窗口关闭的时候是隐藏
width : 300,
height : 300,
items : addPanel,
layout : "fit",
bbar : {
xtype : "toolbar",
items : [ {
xtype : "button",
text : "保存",
listeners : {
"click" : function(btn) {
var form = addPanel.getForm();
var stuNoVal = form.findField("stuNo").getValue();
var stuNameVal = form.findField("stuName").getValue();
var stuClassVal = form.findField("stuClass").getValue();
var chScoreVal = form.findField("chScore").getValue();
var maScoreVal = form.findField("maScore").getValue();
var enScoreVal = form.findField("enScore").getValue();
//Ext.Msg.alert("新增的数据", "{" + stuNo + ":" + stuName + ":" + stuClass + ":" + chScore + ":"
// + maScore + ":" + enScore + "}");
var store = myGrid.getStore();
store.insert(0, {
stuNo : stuNoVal,
stuName : stuNameVal,
stuClass : stuClassVal,
chScore : chScoreVal,
maScore : maScoreVal,
enScore : enScoreVal
});
btn.ownerCt.ownerCt.close();
}
}
}, {
xtype : "button",
text : "取消",
listeners : {
"click" : function(btn) {
btn.ownerCt.ownerCt.close();
}
}
} ]
}
});
// 窗口
var window = Ext.create("Ext.window.Window", {
title : "学生成绩表",
width : 600,
height : 400,
items : myGrid,
layout : "fit",
tbar : {
xtype : "toolbar",
items : [ {
xtype : "button",
text : "新窗口新增",
listeners : {
"click" : function(btn) {
addPanel.getForm().reset();//新增前清空表格内容
addWindow.show();
}
}
}, {
xtype : "button",
text : "行编辑器新增",
listeners : {
"click" : function(btn) {
myGrid.getStore().insert(0, {});
var rowEdit = myGrid.plugins[0];
rowEdit.cancelEdit();
rowEdit.startEdit(0, 0);
}
}
}, {
xtype : "button",
text : "删除",
listeners : {
"click" : function(btn) {
var records = myGrid.getSelectionModel().getSelection();
myGrid.getStore().remove(records);
}
}
} ]
}
});
window.show();
});
</script>
</head>
<body>
增加，删除表格记录(行编辑器，适合修改字段少)
<br>
</body>
</html>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
