extjs_04_grid(弹出窗口&行编辑器 CRUD数据)
1.弹出窗口(添加。删除)
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYWRhbV93enM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
<%@ 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,
selModel : {
selType : "checkboxmodel"//复选框
},
multiSelect : true
//支持多选
}); // 新增panel
var addPanel = Ext.create("Ext.form.Panel", {
items : [ {
xtype : "textfield",
name : "stuNo",
fieldLabel : "学号"
}, {
xtype : "textfield",
name : "stuName",
fieldLabel : "姓名"
}, {
xtype : "textfield",
name : "stuClass",
fieldLabel : "班级"
}, {
xtype : "numberfield",
name : "chScore",
fieldLabel : "语文"
}, {
xtype : "numberfield",
name : "maScore",
fieldLabel : "数学"
}, {
xtype : "numberfield",
name : "enScore",
fieldLabel : "英语"
} ]
}); // 新增窗体
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 stuNoVal = form.findField("stuNo").getValue();
var stuNameVal = form.findField("stuName").getValue();
var stuClassVal = form.findField("stuClass").getValue();
var chScoreVal = form.findField("chScore").getValue();
var maScoreVal = form.findField("maScore").getValue();
var enScoreVal = form.findField("enScore").getValue();
//Ext.Msg.alert("新增的数据", "{" + stuNo + ":" + stuName + ":" + stuClass + ":" + chScore + ":"
// + maScore + ":" + enScore + "}");
var store = myGrid.getStore();
store.insert(0, {
stuNo : stuNoVal,
stuName : stuNameVal,
stuClass : stuClassVal,
chScore : chScoreVal,
maScore : maScoreVal,
enScore : enScoreVal
});
}
}
}, {
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();
}
}
}, {
xtype : "button",
text : "删除",
listeners : {
"click" : function(btn) {
var records = myGrid.getSelectionModel().getSelection();
myGrid.getStore().remove(records);
}
}
} ]
}
});
window.show();
});
</script> </head> <body>
添加，删除表格记录(弹窗体，适用于表字段比較多)
<br>
</body>
</html>
2.行编辑器(新增。改动)
<%@ 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",
editor : {//用行编辑器插件须要配置该属性
xtype : "textfield"
}
}, {
text : "姓名",
dataIndex : "stuName",
editor : {
xtype : "textfield"
}
}, {
text : "班级",
dataIndex : "stuClass",
editor : {
xtype : "textfield"
}
}, {
text : "语文",
dataIndex : "chScore",
editor : {
xtype : "numberfield"
}
}, {
text : "数学",
dataIndex : "maScore",
editor : {
xtype : "numberfield"
}
}, {
text : "英语",
dataIndex : "enScore",
editor : {
xtype : "numberfield"
}
} ],
store : myStore,
selModel : {
selType : "checkboxmodel"//复选框
},
multiSelect : true,//支持多选
plugins : [ {
ptype : "rowediting",//行编辑器插件,点击2次编辑
clicksToEdit : 2
} ]
}); // 新增panel
var addPanel = Ext.create("Ext.form.Panel", {
items : [ {
xtype : "textfield",
name : "stuNo",
fieldLabel : "学号"
}, {
xtype : "textfield",
name : "stuName",
fieldLabel : "姓名"
}, {
xtype : "textfield",
name : "stuClass",
fieldLabel : "班级"
}, {
xtype : "numberfield",
name : "chScore",
fieldLabel : "语文"
}, {
xtype : "numberfield",
name : "maScore",
fieldLabel : "数学"
}, {
xtype : "numberfield",
name : "enScore",
fieldLabel : "英语"
} ]
}); // 新增窗体
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 stuNoVal = form.findField("stuNo").getValue();
var stuNameVal = form.findField("stuName").getValue();
var stuClassVal = form.findField("stuClass").getValue();
var chScoreVal = form.findField("chScore").getValue();
var maScoreVal = form.findField("maScore").getValue();
var enScoreVal = form.findField("enScore").getValue();
//Ext.Msg.alert("新增的数据", "{" + stuNo + ":" + stuName + ":" + stuClass + ":" + chScore + ":"
// + maScore + ":" + enScore + "}");
var store = myGrid.getStore();
store.insert(0, {
stuNo : stuNoVal,
stuName : stuNameVal,
stuClass : stuClassVal,
chScore : chScoreVal,
maScore : maScoreVal,
enScore : enScoreVal
});
btn.ownerCt.ownerCt.close();
}
}
}, {
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();
}
}
}, {
xtype : "button",
text : "行编辑器新增",
listeners : {
"click" : function(btn) {
myGrid.getStore().insert(0, {});
var rowEdit = myGrid.plugins[0];
rowEdit.cancelEdit();
rowEdit.startEdit(0, 0);
}
}
}, {
xtype : "button",
text : "删除",
listeners : {
"click" : function(btn) {
var records = myGrid.getSelectionModel().getSelection();
myGrid.getStore().remove(records);
}
}
} ]
}
});
window.show();
});
</script> </head> <body>
添加。删除表格记录(行编辑器，适合改动字段少)
<br>
</body>
</html>
版权声明：本文博客原创文章，博客，未经同意，不得转载。
extjs_04_grid(弹出窗口&行编辑器 CRUD数据)的更多相关文章
- C# GridView弹出窗口新增行 删除行
<%@ Page Language="C#" AutoEventWireup="true" EnableViewState="true" ...
- [转]js来弹出窗口的详细说明
1.警告对话框 <script> alert("警告文字") </script> 2.确认对话框 <script> confirm(" ...
- 在HTML网页中设置弹出窗口的办法
[1.最基本的弹出窗口代码] 其实代码非常简单: <SCRIPT LANGUAGE="javascript"> <!-- window.open ('page.h ...
- JS弹出窗口代码大全(详细整理)
1.弹启一个全屏窗口 复制代码代码如下: <html> <body http://www.jb51.net','脚本之家','fullscreen');">; < ...
- 深入浅出ExtJS 第七章 弹出窗口
7.1 Ext.MessageBox 7.1 Ext.MessageBox //Ext.MessageBox为我们提供的alert/confirm/prompt等完全可以代替浏览器原生; 7.1.1 ...
- asp .NET弹出窗口 汇总（精华，麒麟创想）
asp .NET弹出窗口 汇总(精华,麒麟创想) 注://关闭,父窗口弹出对话框,子窗口直接关闭 this.Response.Write("<script language=javas ...
- EPUB弹出窗口式脚注
网上搜到一些国学典籍的EPUB版,虽有古人的注解,但正文和注解混排在一起,当我只想迅速读正文的时候比较碍眼.于是研究了一下 EPUB3 中有关脚注(footnote)的规格定义,写了一个 Python ...
- [置顶] html学习笔记，锚点，超链接，table布局，表头，h,sub,blockquote,ul,li,ol.dl,加入收藏，打印，弹出窗口
<a name="shouye"></a> <strong>strong加粗</strong> <br> 没有加粗 &l ...
- jQuery弹出窗口完整代码
jQuery弹出窗口完整代码 效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/1.htm 1 <!DOCTYPE html PUBLIC "- ...
随机推荐
- filezilla Can't open data connection.
(000003)2016/7/4 9:31:42 - (not logged in) (10.61.41.57)> Connected, sending welcome message... ( ...
- pycurl，Python cURL library
pycurl — A Python interface to the cURL library Pycurl包是一个libcurl的Python接口.pycurl已经成功的在Python2.2到Pyt ...
- codeblocks快捷键及设置
==日常编辑== • 按住Ctrl滚滚轮,代码的字体会随你心意变大变小.• 在编辑区按住右键可拖动代码,省去拉(尤其是横向)滚动条之麻烦:相关设置:Mouse Drag Scrolling.• Ctr ...
- 复习知识点：GCD多线程
GCD的基础 #pragma mark - 使用GCD 创建一个 串行 队列 // 第一种:系统提供的创建串行队列的方法 // 在真正的开发中如果需要创建串行队列,比较习惯用这种 // dispatc ...
- DataGridView的Validating事件注册后删除操作的处理
我们在处理DataGridView必填项判断时,一般使用DataGridView的RowValidating事件判断,具体代码如下: protected override void OnRowVali ...
- 转百度前辈的Trados使用心得
我用Trados的时间不长,可以说是一个新手.但我在较短的时间内就已经初步掌握这个工具,说明它并不是那么神秘,并不是那么深不可测.这里,我说一说学习它的一点体会.在我转发的文章中有的内容,我就少讲一些 ...
- 增进离岸Java开发效率的10个提示
本文来源于我在InfoQ中文站原创的文章,原文地址是:http://www.infoq.com/cn/news/2013/12/10-tips-offshore-java-effective Cygn ...
- PLSQL Developer使用技巧整理（转）
一.工具-首选项-用户界面-编辑器-其它-显示行号二.工具-首选项-窗口类型-SQL窗口-显示隔号(行号) 在使用PL/SQL Developer对Procedure进行Debug时,突然发现无法Se ...
- wifi密码破解方法总结(含破解软件下载链接)
眼下网上流行有非常多无线password的破解方法,总结起来最有用的还是这两种:第一种是Wirelessnetview+WinAirCrackPack软件组合,这个方法简单方便:另外一种就是大家熟悉的 ...
- Linux内核空间-用户空间通信之debugfs
一.debugfs文件系统简介 debugfs虚拟文件系统是一种内核空间与用户空间的接口,基于libfs库实现,专用于开发人员调试,便于向用户空间导出内核空间数据(当然,反方向也可以).debugfs ...