extjs_03_grid(弹出框&行编辑器增删改数据)

2022-09-30 11:27:56

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>

extjs_03_grid(弹出框&行编辑器增删改数据),布布扣,bubuko.com

extjs_03_grid(弹出框&行编辑器增删改数据)

码农公寓

1.弹出框(新增，删除)

2.行编辑器(新增，修改)

相关文章