<%@ 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. s有一天，教你开始truts2

    写在前面 他也是一个java和java web新秀.此前有过接触java web发展 我想一个小项目.要熟悉struts2开发过程 一个有趣的想法源于教研室项目上的一个功能实现–自己主动识别运营商,去 ...

  2. MFC漆摘要-截图，获得DIB/DDB图形Pixel

    1.       当前Screen进行Copy屏幕,获得BITMAP 当前屏幕Copy.须要获取当前屏幕的HDC, 一种是直接从屏幕DC抓原始图. 一种是然后使用兼容MemDC进行抓图,然后能够附加图 ...

  3. 采用SharePoint Designer将JavaScript而他们的网站页面集成的定义

    采用SharePoint Designer将JavaScript而他们的网站页面集成的定义 像JavaScript这种动态脚本语言可以给你的页面震撼效果.为了加盟JavaScript要定义自己的网站页 ...

  4. ASP.NET执行循序

    首先第一次运行一个应用程序(WebSite或者WebApplication都是Web应用程序)第一次请求 -> 1,IIS -> 2,aspnet_isapi(非托管dll) -> ...

  5. HDU 4311 Meeting point-1 && HDU 4312 Meeting point-2

    这俩个题  题意::给出N(<1e5)个点求找到一个点作为聚会的地方,使每个点到达这里的距离最小.4311是 曼哈顿距离 4312是 切比雪夫距离: 曼哈顿距离 :大家都知道 对于二维坐标系a( ...

  6. async And await异步编程活用基础

    原文:async And await异步编程活用基础 好久没写博客了,时隔5个月,奉上一篇精心准备的文章,希望大家能有所收获,对async 和 await 的理解有更深一层的理解. async 和 a ...

  7. 解决mysqldb查询大量数据导致内存使用过高的问题

    1.源码 connection=MySQLdb.connect( host="thehost",user="theuser", passwd="the ...

  8. xml它解析----DOM解析

    DOM模型(documentobject model) •DOM解析器在解析XML文档时,会把文档中的全部元素,依照其出现的层次关系.解析成一个个Node对象(节点). •在dom中.节点之间关系例如 ...

  9. 【C语言探索之旅】 第一部分第九课：函数

    内容简介 1.课程大纲 2.第一部分第九课:函数 3.第一部分第十课预告: 练习题+习作 课程大纲 我们的课程分为四大部分,每一个部分结束后都会有练习题,并会公布答案.还会带大家用C语言编写三个游戏. ...

  10. 了解HTML5和“她”的 API (二)

    Communication(通信)     Cross Document Messaging (跨文档消息通信) postMessage API   origin security(源安全) chat ...