<%@ 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. 一些Android框架

    从网上收集一些框架,敲代码偷懒这些框架非常实用,必须记下来,为了以后少写代码,用别人好的框架 ThinkAndroid ThinkAndroid(一个ThinkAndroid教程地址:http://m ...

  2. crm2011js子网格导航栏字段事件操作

  3. Java 中泛型的全面解析（转）

    Java泛型(generics) 是JDK 5中引入的一个新特性,允许在定义类和接口的时候使用类型参数(type parameter).声明的类型参数在使用时用具体的类型来替换.泛型最主要的应用是在J ...

  4. 查看linux系统版本号命令

    一.查看内核版本号命令: 1) [root@SOR_SYS ~]# cat /proc/version Linux version 2.6.18-238.el5 (mockbuild@x86-012. ...

  5. Java获取的一天、本星期、这个月、本季度、一年等 开始和结束时间

    1.代码 package com.zhaochao.utils; import java.text.SimpleDateFormat; import java.util.Calendar; impor ...

  6. 移动web：Tips消息弹出框

    在web开发中经常会用到像alert这样的弹出消息,每个浏览器自带的消息弹出框都不相同.为了统一外观,实现自定义的功能,动手写一个弹出框插件. 对弹出框的实现要求如下: 1. 仿照IOS系统弹出外观 ...

  7. ZeroMQ注意事项

    Request-Reply状态 供client它必须是严肃的格在根据第一呼叫zmq_send() 函数,然后调用zmq_recv()函数的顺序来运行 对于server来说,运行时序相反 假设不依照这个 ...

  8. hdu3844 Mining Your Own Business，无向双连接组件

    点击打开链接 无向图的双连通分量 #include<cstdio> #include<stack> #include<vector> #include<map ...

  9. 对ESB概念的理解（转）

    http://www.ibm.com/developerworks/cn/webservices/0811_magy_esb/ 什么是 ESB?ESB 严格来说不是某一个产品,而是一种框架,设计模式. ...

  10. Java 打开文件的两种方式

    import java.awt.Desktop; import java.io.File; import java.io.IOException; public class LnkDemo { pub ...