extjs_04_grid(弹出窗口amp;行编辑器 CRUD数据)
2024-04-28 14:44:56
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>
版权声明：本文博客原创文章，博客，未经同意，不得转载。
extjs_04_grid(弹出窗口amp;行编辑器 CRUD数据)相关推荐
- ASP.NET中DataGrid鼠标经过感知以及点击行弹出窗口
选择自 xujh 的 Blog 作者Blog:http://blog.csdn.net/xujh/ 很多人说很难,其实就这几行代码.只要在DataGrid1的ItemDataBound中写入下代 ...
- swing退出子窗口事件_如何创建有效的退出弹出窗口？
如何创建有效的退出弹出窗口? 下面的退出弹出窗口为电子邮件列表增加了4153个订阅者: 这个提供折扣的弹出窗口,帮助Storiarts在60天之内挽回了96个弃单客户,从而额外创造了5000美元的销售 ...
- php 弹窗代码大全,PHP_asp.net弹出窗口代码大全，//关闭,父窗口弹出对话框,子窗 - phpStudy...
asp.net弹出窗口代码大全 //关闭,父窗口弹出对话框,子窗口直接关闭 this.Response.Write(""); //关闭,父窗口和子窗口都不弹出对话框,直接关闭 th ...
- 问题解决：取消Mac下Karabiner-Elements开机时弹出窗口、用Capslock切换中英文输入法、外接机械键盘 option 和 cmd 互换
一.取消Karabiner-Elements开机时弹出窗口 Karabiner-Elements下载地址:https://karabiner-elements.pqrs.org/ Karabiner是 ...
- 弹出窗口以及关闭窗口
按钮弹出,通常在这个窗口里会显示一些注意事项.版权信息.警告.欢迎光顾之类的话或者作者想要特别提示的信息.其实制作这样的页面非常容易,只要往该页面的HTML里加入几段javascript代码即可实现. ...
- 最基本的弹出窗口代码
<SCRIPT LANGUAGE="javascript"> <!-- window.open ('page.html') --> </SCRIPT& ...
- 如何解决弹出窗口固定大小及内容的问题
昨天在做前期DEMO时,要用到点击"查看详细信息"弹出一个页面,但这个页面是以窗口的形式弹出的,而且还固定大小 问题也很简单也解决了,但类似这样的问题在IE7中有些IE7弹出的窗口 ...
- python的窗口处理模块_Python tkinter模块弹出窗口及传值回到主窗口操作详解
本文实例讲述了Python tkinter模块弹出窗口及传值回到主窗口操作.分享给大家供大家参考,具体如下: 有些时候,我们需要使用弹出窗口,对程序的运行参数进行设置.有两种选择 一.标准窗口 如果只 ...
- Matlab弹出窗口
Matlab弹出窗口 Matlab 弹出窗口 1.文件打开操作 uigetfile命令 打开以.m结尾的文件 [FileName,PathName] = uigetfile('*.m','Select ...
最新文章
- TensorFlow 1.8.0正式发布，Bug修复和改进内容都在这里了
- etcd分布式之消息发布与订阅
- python进程数上限_python-使用multiprocessing.Process并发进程数最多
- ArcEngine二次开发_04（鼠标点击图层点显示属性（两个及以上））
- poj 1502 单源最短路径
- [Node.js] BDD和Mocha框架
- 2022年黑马程序员火爆全网的自学Java必刷教程（价值2w+的教程免费分享）
- Javascript Python 翻译 excel trend 函数
- Java调用webservice服务接口步骤详解
- VoLTE SIP代码意义及流程图解
- 状态机编程 (一) 状态机相关概念
- python wmic_wmic linux python
- 【会议预告】第七届上海国际皮革展览会
- python常用单词
- Oracle 考试题 答案
- Win10 发布UWD图形驱动程序 有助于小幅提高性能
- 试题 算法训练 kAc给糖果你吃（贪心）
- 羽毛球比赛规则及场地
- OLAP和数据立方体
- Marvell校招新增数字后端工程师岗位