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>
版权声明：本文博客原创文章。博客，未经同意，不得转载。
extjs_03_grid(添加数据)的更多相关文章
- C#向sql server数据表添加数据源代码
HoverTree解决方案 学习C#.NET,Sql Server,WinForm等的解决方案. 本文链接http://hovertree.com/h/bjaf/0jteg8cv.htm 使用的技术. ...
- js表单动态添加数据并提交
情景1:已经存在form对象了,动态为form增加对象并提交 function formAppendSubmit(){ var myform=$('#newArticleForm'); //得到for ...
- 从零开始，搭建博客系统MVC5+EF6搭建框架（2），测试添加数据、集成Autofac依赖注入
一.测试仓储层.业务层是否能实现对数据库表的操作 1.创建IsysUserInfoRepository接口来继承IBaseRepository父接口 namespace Wchl.WMBlog.IRe ...
- 使用C#类向数据库添加数据的例子源码
在上一篇中,增加了sql server数据库操作类SqlOperator,用于操作sql server数据库.还有一个SqlStringHelper类,用于处理sql语句的单引号.那么这两个类怎么使用 ...
- EF批量添加数据性能慢的问题的解决方案
//EF批量添加数据性能慢的问题的解决方案 public ActionResult BatchAdd() { using (var db = new ToneRoad.CEA.DbContext.Db ...
- mybatis+oracle添加一条数据并返回所添加数据的主键问题
最近做mybatis+oracle项目的时候解决添加一条数据并返回所添加数据的主键问题 controller层 @RequestMapping("/addplan") public ...
- Android 数据库管理— — —添加数据
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android=" ...
- Java使用Mysql数据库实现批量添加数据
EmployeeDao.java //批处理添加数据 public int saveEmploeeBatch(){ int row = 0; try{ con = DBCon.getConn(); S ...
- Eclipse中java向数据库中添加数据，更新数据，删除数据
前面详细写过如何连接数据库的具体操作,下面介绍向数据库中添加数据. 注意事项:如果参考下面代码,需要 改包名,数据库名,数据库账号,密码,和数据表(数据表里面的信息) package com.ning ...
随机推荐
- js中escape的用法----前端页面简单加密
escape() 方法,它用于转义不能用明文正确发送的任何字符.比如,电话号码中的空格将被转换成字符 %20,从而能够在 URL 中传递这些字符. http://localhost:8080/a?na ...
- bootstrap的popover在trigger设置为hover时不隐藏popover
使用bootstrap的popover,trigger设置为hover时,可以实现当鼠标放置到目标元素上时显示popover,可是无法实现当鼠标移动到popover上时不隐藏popover,在网上找了 ...
- 重新想象 Windows 8 Store Apps (12) - 控件之 GridView 特性: 拖动项, 项尺寸可变, 分组显示
原文:重新想象 Windows 8 Store Apps (12) - 控件之 GridView 特性: 拖动项, 项尺寸可变, 分组显示 [源码下载] 重新想象 Windows 8 Store Ap ...
- C# Windows Phone App 开发，自制LockScreen 锁定画面类别(Class)，从【网路图片】、【Assets资源】、【UI】修改锁定画面。
原文:C# Windows Phone App 开发,自制LockScreen 锁定画面类别(Class),从[网路图片].[Assets资源].[UI]修改锁定画面. 一般我们在开发Windows ...
- 采用SharePoint Designer将JavaScript而他们的网站页面集成的定义
采用SharePoint Designer将JavaScript而他们的网站页面集成的定义 像JavaScript这种动态脚本语言可以给你的页面震撼效果.为了加盟JavaScript要定义自己的网站页 ...
- Thread.join()分析方法
API: join public final void join() throws InterruptedException 等待该线程终止. 抛出: InterruptedException - 假 ...
- Sliverlight之 控件模板
1,控件模板 (见Project22) (1) 什么是控件模板,查中文帮助 说明:当控件自身属性已经无法达到你对控件外观设置的要求时(比如将按钮作成圆形),此时控件模板就发挥了很大的作用 使用: &l ...
- C++面试宝典2011版
1.new.delete.malloc.free关系 delete会调用对象的析构函数,和new相应free仅仅会释放内存,new调用构造函数.malloc与free是C++/C语言的标准库函数,ne ...
- SqlBulkCopy批量插入数据时，不执行触发器和约束的解决方法
原文:SqlBulkCopy批量插入数据时,不执行触发器和约束的解决方法 在new SqlBulkCopy对象的时候,设置一下SqlBulkCopyOptions选项即可,按位或运算 SqlBulkC ...
- 点击搜索取消UISearchDisplayController的搜索状态
一般,我们用到UISearchDisplayController的时候,都是须要对一个数据源进行刷选,在UISearchDisplayController自带的tableView中展示出来,然后点击退 ...