extjs_04_grid(弹出框&行编辑器 增删改数据)
来源：互联网 发布：美国劳工局数据 编辑：程序博客网 时间：2024/05/22 02:11
1.弹出框(新增，删除)
<%@ 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//支持多选});// 新增panelvar 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} ]});// 新增panelvar 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> 2 0
- extjs_04_grid(弹出框&行编辑器 增删改数据)
- 批量增删改数据
- 数据的增删改
- 数据的增删改
- 04增删改数据
- oracle数据增删改
- 数据字段的增删改
- Extjs4-数据的增删改
- hbase数据增删改查
- 数据的增删改查
- Mysql数据增删改查
- MySQL增删改数据_CDU
- ElasticSearch 数据增删改实现
- MySQL数据增删查改
- 数据的增删改查
- 数据 增删改查 (inter)
- 初学Oracle-------表增删改、字段增删改、数据增删改
- jqgrid 增删查改 添加toolbar 不保存到数据库 artdialog 弹出框编辑
- 设计模式C++实现——工厂模式
- 统计完全数
- linux重新创建oracle实例dbca
- Android的开始
- 【#253_DIV2】-A B D
- extjs_04_grid(弹出框&行编辑器 增删改数据)
- tomcat错误信息解决方案【严重:StandardServer.await: create[8005]】
- source Insight添加.s文件到工程中
- POJ-2019（二维RMQ + 滚动数组）
- PHP get_called_class
- ARM体系结构介绍
- android 布局方式 像素单位
- centos安装oracle补丁libaio
- DMA寄存器设置
