<%@ 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. Java EE (6) -- Java EE 5 Enterprise Architect Certified Master

    Section 1: Application Design Concepts and Principles Explain the main advantages of an object-orien ...

  2. Apache Curator获得真正的

    Apache Curator获得真正的 Curator它是Netflix一家公司来源Zookeeper顾客,与Zookeeper相比于提供本地客户端,Curator的抽象层次更高,简化了Zookeep ...

  3. W5500 keep-alive的用途及使用

    大家是否遇到过这种问题,W5500作为server已经建立连接,突然网线掉了,然后再去连接W5500.就连不上了. 为什么?以下对这个问题进行解释说明,并提出解决的方法. 图1中的上位机程序作为cli ...

  4. Web Socket rfc6455 握 (C++)

    std::string data((const char*)buf->data(),bytes_transferred); recycle_buffer(buf); std::string ke ...

  5. Nginx+Varnish

    Nginx+Varnish 实现动静分离,为服务器分流,降低服务器负载 相必大家在看加快网站响应速度方面的文章时,都提过这么一条:动静分离.那怎样实现动静分离呢,这里笔者就亲自搭建相关服务实现动静分离 ...

  6. [LeetCode]Palindrome Partitioning 找出所有可能的组合回文

    给定一个字符串,切割字符串,这样每个子字符串是一个回文字符串. 要找出所有可能的组合. 办法:暴力搜索+回溯 class Solution { public: int *b,n; vector< ...

  7. 小强的HTML5移动开发之路（50）——jquerymobile页面初始化过程

    为了方便说明和更加直观的展示jquerymobile的页面初始化过程以及各个事件的触发过程,我绘制了一幅流程图: 图中用红色框圈起来的是界面中的事件,測试代码例如以下: <!DOCTYPE ht ...

  8. Spring Boot 基础

    Spring Boot 基础 Spring Boot 项目(参考1) 提供了一个类似ASP.NET MVC的默认模板一样的标准样板,直接集成了一系列的组件并使用了默认的配置.使用Spring Boot ...

  9. 开展：随笔记录 OSGI的jar增加了一些小问题和注意事项

    在引用jar当包,假设引用的项目包.在需要MANIFEST.MF 它定义 一.外用jar: 实例:外部参考需要包装的Import package里面 定义一下.如:google-gson-2.2.2. ...

  10. 对XSD schema文件中elementFormDefault属性的理解

    Schema中的elementFormDefault elementFormDefault取值:qualified 或者 unqualified 在http://www.velocityreviews ...