extjs_03_grid(添加数据)

全栈程序员站长

发布于 2022-07-06 02:23:07

50400

代码可运行

文章被收录于专栏：全栈程序员必看全栈程序员必看

运行总次数：0

代码可运行

大家好，又见面了，我是全栈君。

<%@ 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
		});

		// 新增panel
		var addPanel = Ext.create("Ext.form.Panel", {
			items : [ {
				xtype : "textfield",
				fieldLabel : "学号",
				name : "stuNo"
			}, {
				xtype : "textfield",
				fieldLabel : "姓名",
				name : "stuName"
			}, {
				xtype : "textfield",
				fieldLabel : "班级",
				name : "stuClass"
			}, {
				xtype : "numberfield",
				fieldLabel : "语文",
				name : "chScore"
			}, {
				xtype : "numberfield",
				fieldLabel : "数学",
				name : "maScore"
			}, {
				xtype : "numberfield",
				fieldLabel : "英语",
				name : "enScore"
			} ]
		});

		// 新增窗体
		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 stuNo = form.findField("stuNo").getValue();
									var stuName = form.findField("stuName").getValue();
									var stuClass = form.findField("stuClass").getValue();
									var chScore = form.findField("chScore").getValue();
									var maScore = form.findField("maScore").getValue();
									var enScore = form.findField("enScore").getValue();
									Ext.Msg.alert("新增的数据", "{" + stuNo + ":" + stuName + ":" + stuClass + ":" + chScore + ":"
											+ maScore + ":" + enScore + "}");
								}
							}
						}, {
							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();
						}
					}
				}
			}
		});
		window.show();
	});
</script>

</head>

<body>
	显示表格
	<br>
</body>
</html>