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