<%@ 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. hihocoder第41周 骨牌覆盖（矩阵快速幂）

    由于棋盘只有两行,所以如果第i列的骨牌竖着放,那么就转移为第1列到第i-1列骨牌有多少种摆法 如果第一行第i列骨牌横着放,那么第二行第i列也要横着放,那么就转移为了第1列到第i-2列骨牌有多少种方法 ...

  2. 从字节码层面看“HelloWorld” (转)

    一.HelloWorld 字节码生成 众所周知,Java 程序是在 JVM 上运行的,不过 JVM 运行的其实不是 Java 语言本身,而是 Java 程序编译成的字节码文件.可能一开始 JVM 是为 ...

  3. IntelliJ IDEA常见问题解决办法汇总

    (1)SVN相关的操作: 启用:方法1:VCS菜单下Enable Version Control Integration,点击之后选择相应的版本控制工具方法2:Setting中Version Cont ...

  4. C语言中的static 具体分析

    google了近三页的关于C语言中static的内容,发现可用的信息非常少,要么长篇大论不知所云要么在关键之处几个字略过,对于想挖掘底层原理的刚開始学习的人来说參考性不是非常大.所以,我这篇博文博採众 ...

  5. T-SQL基础(7) - 透视，逆透视和分组集

    透视转换: use tempdb;if object_id('dbo.Orders', 'U') is not null drop table dbo.Orders;create table dbo. ...

  6. Mongodb入门——安装与配置

    作者:zhanhailiang 日期:2014-11-07 1. 安装mongodb: [root@~/wade/nodejs/nodeclub]# yum search mongodb [root@ ...

  7. (一个）kafka-jstorm集群实时日志分析 它 ---------kafka实时日志处理

    package com.doctor.logbackextend; import java.util.HashMap; import java.util.List; import java.util. ...

  8. effective c++ 条款9 do not call virtual function in constructor or deconstructor

    在构造函数中不要调用virtual函数,调用了也不会有预期的效果. 举个例子 class Transaction { public: Transaction() { log(); } ; } clas ...

  9. CentOS 5 安装Oracle10g

    原创作品.离 "深蓝的blog" 博客.欢迎转载.转载时请务必注明下面出处,否则追究版权法律责任. 深蓝的blog:http://blog.csdn.net/huangyanlon ...

  10. POJ 2152 Fire

    算是我的第一个树形DP 的题: 题目意思:N个城市形成树状结构.现在建立一些消防站在某些城市:每个城市有两个树形cost(在这个城市建立消防站的花费),limit : 我们要是每个城镇都是安全的:就是 ...