extjs_03_grid(添加数据)

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

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

时间: 2024-10-17 00:10:13

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

用PHP向数据库中添加数据

显示页面(用户可见) <body><form action="chuli.php" method="post">  //将该页面接收的数据,交给chuli页面来处理<div>民族代号:<input type="text" name="code" /></div>       //创建一个div,放入接收器来接收code值<div>民族名称:<inpu

如何自定义添加数据列表(数据单元格)

在我们的项目中有时需要我们自己来添加数据单元格,而不是使用DataGrid或者是ListView等控件来填充数据,在我们下面的这个例子当中,我们只使用Grid和Label控件来实现类似DataGrid这种形式的单元格,下面我们通过一个例子来说明,这里只是贴出重点的代码形式. <Grid Grid.Row="2">     <Grid.RowDefinitions>       <RowDefinition Height="15*">

3_SQL Server通过代码的方式添加数据

--通过代码添加数据 --第一种方式--insert into 表名(列名1,列名2,...)values (值1,值2,...)insert into Department(DepName, DepDesc) values ('研发部','研发的')--添加数据显示的是受影响的行数 --第二种方式--insert into 表名 values (值)insert into Department values ('行政部','就是搞行政的') --第三种方式,一次插入多条数据insert int

向后端请求数据 以及像后端发送数据要求(删除数据和添加数据)

删除数据和添加数据只能后端操作 删除数据和添加数据都要用到的html(一)部分 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../css/bootstrap.min.css"

Yii2如何批量添加数据

批量添加这个操作,在实际开发中经常用得到,今天小编抽空给大家整理些有关yii2批量添加的问题,感兴趣的朋友一起看看吧. 在上篇文章给大家介绍了关于浅析Yii2 gridview实现批量删除教程,当然,着重点在于怎么去操作gridview了,今儿我们来好好谈谈yii2如何批量添加数据? 有同学嚷嚷了,这还不简单,我foreach一循环,每个循环里面直接把数据插入到数据库,简单粗暴完事!我擦嘞,哥,你要是跟我在一个公司,我觉得第二天见到你的概率可就不大了! 话不多说,说多了你在骂我,我们步入正题,先

php处理登录、添加数据、删除数据和修改数据

php 处理登录 :需要先建一个登录的页面,用form表单就可以很轻松的完成,(这里的示例是我根据数据库现成的表做的 是一个teacher表格 根据老师的工号和姓名登录的) <form action="chuli.php" method="post"> <div> 工号: <input type="text" name="tno"/> </div> <div> 姓名:

Android之ListView动态添加数据(SQLiteOpenHelper类添加数据)

一.SQLiteOpenHelper类: 这次我们通过sqlite来动态添加数据,接下来我们创建一个openHelper.java,在前面sqlite博客中我们已经详细的讲了SQLite的创建及使用等操作,我们将在onCreate 创建方法中创建一张表和插入相关的值,通过db.execSQL()完成Sqlite的运行. ①openHelper2.java文件: public class openHelper2 extends SQLiteOpenHelper { private static f

Eclipse中java向数据库中添加数据

前面详细写过如何连接数据库的具体操作,下面介绍向数据库中添加数据. 注意事项:如果参考下面代码,需要 改包名,数据库名,数据库账号,密码,和数据表(数据表里面的信息) 1 package com.ningmeng; 2 3 import java.sql.*; 4 5 /** 6 * 1:向数据库中添加数据 7 * @author biexiansheng 8 * 9 */ 10 public class Test01 { 11 12 public static void main(String

Oracle数据库建表+添加数据练习

SQL脚本: 1 --建表 2 --student表+注释 3 create table student( 4 sno varchar2(3) not null, 5 sname varchar2(9) not null, 6 ssex varchar2(3) not null, 7 sbirthday date, 8 sclass varchar2(5), 9 constraint pk_student primary key(sno) 10 ); 11 comment on column s