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

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

extjs_03_grid(添加数据)的更多相关文章

  1. C#向sql server数据表添加数据源代码

    HoverTree解决方案 学习C#.NET,Sql Server,WinForm等的解决方案. 本文链接http://hovertree.com/h/bjaf/0jteg8cv.htm 使用的技术. ...

  2. js表单动态添加数据并提交

    情景1:已经存在form对象了,动态为form增加对象并提交 function formAppendSubmit(){ var myform=$('#newArticleForm'); //得到for ...

  3. 从零开始，搭建博客系统MVC5+EF6搭建框架（2），测试添加数据、集成Autofac依赖注入

    一.测试仓储层.业务层是否能实现对数据库表的操作 1.创建IsysUserInfoRepository接口来继承IBaseRepository父接口 namespace Wchl.WMBlog.IRe ...

  4. 使用C#类向数据库添加数据的例子源码

    在上一篇中,增加了sql server数据库操作类SqlOperator,用于操作sql server数据库.还有一个SqlStringHelper类,用于处理sql语句的单引号.那么这两个类怎么使用 ...

  5. EF批量添加数据性能慢的问题的解决方案

    //EF批量添加数据性能慢的问题的解决方案 public ActionResult BatchAdd() { using (var db = new ToneRoad.CEA.DbContext.Db ...

  6. mybatis+oracle添加一条数据并返回所添加数据的主键问题

    最近做mybatis+oracle项目的时候解决添加一条数据并返回所添加数据的主键问题 controller层 @RequestMapping("/addplan") public ...

  7. Android 数据库管理— — —添加数据

    <?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android=" ...

  8. Java使用Mysql数据库实现批量添加数据

    EmployeeDao.java //批处理添加数据 public int saveEmploeeBatch(){ int row = 0; try{ con = DBCon.getConn(); S ...

  9. Eclipse中java向数据库中添加数据，更新数据，删除数据

    前面详细写过如何连接数据库的具体操作,下面介绍向数据库中添加数据. 注意事项:如果参考下面代码,需要 改包名,数据库名,数据库账号,密码,和数据表(数据表里面的信息) package com.ning ...

随机推荐

  1. 获取编译学习笔记 （六）—— si、di，双环

    疯狂暑期学习  汇编入门学习笔记 (六)-- si.di,双重循环 參考: <汇编语言> 王爽 第7章 1. and和or指令,与[bx+idata] and和or.就不多说了. [bx+ ...

  2. hdu 4107当卡段树

    其核心思想是记录最大的节点值和最低值,假设max<p要么min>=p时间,在节点只变化add值,不要子树遍历:否则,就往子树递归. #include<iostream> #in ...

  3. 编译gRPC

    编译gRPC 目录 一.概述 二.编译gRPC 三.C#中使用gRPC 四.C++中使用gRPC 无论通过哪种语言调用gRPC,都必须要编译gRPC,因为生成proto访问类时,除了产生标准的数据定义 ...

  4. hdu3873 有约束条件的最短路

    题目大意:美国佬打算入侵火星,火星上有n个城市,有些城市可能受其他城市保护, 如果i城市受j城市保护,那么你必须先攻占j城市才能再攻占i城市,问你攻占城市n的最短时间是多少. 数据解释: 给定t, 表 ...

  5. 批处理bat脚本编写（附详细例子）

                                                        批处理bat脚本编写(附详细例子) 由于在项目开发的过程中经常需要编写bat脚本,而看大牛们编写 ...

  6. C++ 习题 输出日期时间--友元类

    Description 设计一个日期类和时间类,编写display函数用于显示日期和时间.要求:将Time类声明为Date类的友元类,通过Time类中的display函数引用Date类对象的私有数据, ...

  7. Android Widget 小部件(一) 简单实现

    在屏幕上加入Widget:或长按屏幕空白处,或找到WidgetPreview App选择. 原生系统4.0下面使用长按方式,4.0及以上 打开WIDGETS 创建Widget的一般步骤: 在menif ...

  8. Unbound classpath container: &#39;JRE System Library [jdk17060]&#39; in project ***

    项目报告的错误列表 Unbound classpath container: 'JRE System Library [jdk17060]' in project **** 误. 原因是,我升级JDK ...

  9. (转)maven设置内存

    Windows环境中 找到文件%M2_HOME%\bin\mvn.bat ,这就是启动Maven的脚本文件,在该文件中你能看到有一行注释为: @REM set MAVEN_OPTS=-Xdebug - ...

  10. 第九讲：HTML5该canvas推箱子原型实现

    <html> <head> <title>动</title> <script src="../js/jscex.jscexRequire ...