extjs_03_grid(添加数据)

extjs_03_grid(添加数据)

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

extjs_03_grid(添加数据)

extjs_03_grid(添加数据)

extjs_03_grid(添加数据)

<%@ 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>

版权声明:本文博客原创文章。博客,未经同意,不得转载。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/117265.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • Mysql学习——MySQL导入导出.sql文件及常用命令

    Mysql学习——MySQL导入导出.sql文件及常用命令在日常学习和工作,难免不了使用Mysql数据库,有时候需要导入导出数据库,或者其中的数据表。下面是我自己整理的一些东西!

  • 进销存软件开发视频教程(C#版,共70讲)

    进销存软件开发视频教程(C#版,共70讲)课程出处:学途无忧网课程观看地址:http://www.xuetuwuyou.com/course/28  本教程以进销存管理实务为基础,采用时下主流的开发工具(VisualStudio2008+SQLServer2005),使用流行的C#语言。涵盖软件开发的全部过程,包括需求分析、数据库设计、架构设计、程序编码、软件发布。讲解以深入浅出为主,同时循序渐进。对软件开发过

  • bzero用法_pzero是什么意思

    bzero用法_pzero是什么意思bzero用法linux下串口编程使用到了bzero函数原型:externvoidbzero(void*s,intn);用法:#include  功能:置字节字符串s的前n个字节为零且包括‘\0’。  说明:bzero无返回值。  2#include 3#include 4

    2022年10月13日
  • Ubuntu “Failed to fetch”错误的解决方法

    Ubuntu “Failed to fetch”错误的解决方法设置妥当DNS服务器即可.$sudovim/etc/resolv.conf修改DNS:nameserver8.8.8.8nameserver8.8.4.4然后重启网络服务:sudo

  • Django(66)admin后台管理注册用户「建议收藏」

    Django(66)admin后台管理注册用户「建议收藏」前言我们使用django创建用户可以使用注册接口的方式,也可以使用django自带的后台管理系统,这里就介绍使用后台管理系统创建用户admin后台管理系统在使用之前我们可以使用第三方的插件,来美

  • mysql数据库报错1146_数据库错误代码1146 – 本地与在线

    mysql数据库报错1146_数据库错误代码1146 – 本地与在线我是这个站点的新手-请温和请:Plocalhost上的mySQL数据库适用于插入语句,但只要将数据库连接更改为服务器连接它给了我错误:错误代码1146:1146没有任何错误描述。可能是什么原因?根据我的错误捕获逻辑,连接一直成功到查询运行的一部分。在本地版本上,它就像一个魅力。有任何想法吗?数据库错误代码1146-本地与在线:::::::::::::::::::::::::::::::::…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号