extjs4 学习笔记------表单数据上传
2024-05-10 16:58:09
extjs 表单数据上传
js代码
Ext.onReady(function(ite) {// 所有的操作定义在函数showform中var showform = function() {var add_winForm = Ext.create('Ext.form.Panel', {frame : true, // frame属性// title: 'Form Fields',width : 340,bodyPadding : 5,baseParams : {create : true},// renderTo:"panel21",fieldDefaults : {labelAlign : 'left',labelWidth : 90,anchor : '100%'},items : [ {// 隐藏的文本框xtype : 'hiddenfield', // 1name : 'hiddenfield1',value : '隐藏的文本框'}, {// 显示文本框，相当于labelxtype : 'displayfield', // 2name : 'displayfield1',fieldLabel : 'Display field',value : '显示文本框'}, {// 输入文本框xtype : 'textfield', // 3name : 'textfield1',fieldLabel : 'Text field',// value: '输入文本框',allowBlank : false,emptyText : '陈建强',blankText : "提示"}, {// 输入密码的文本框，输入的字符都会展现为.xtype : 'textfield', // 4name : 'password1',inputType : 'password',fieldLabel : 'Password field'}, {// 多行文本输入框xtype : 'textareafield', // 5name : 'textarea1',fieldLabel : 'TextArea',id : "areaid",value : '啦啦啦，我是卖报的小行家'}, {// 上传文件文本框xtype : 'filefield', // 6name : 'file1',fieldLabel : 'File upload'}, {// 时间文本框xtype : 'timefield', // 7name : 'time1',fieldLabel : 'Time Field',minValue : '8:00 AM',maxValue : '5:00 PM',increment : 30}, {// 日期文本框xtype : 'datefield', // 8name : 'date1',fieldLabel : 'Date Field',value : new Date()}, {// 下拉列表框xtype : 'combobox', // 9fieldLabel : 'Combobox',displayField : 'name',store : Ext.create('Ext.data.Store', {fields : [ {type : 'string',name : 'name'} ],data : [ {"name" : "Alabama"}, {"name" : "Alaska"}, {"name" : "Arizona"}, {"name" : "Arkansas"}, {"name" : "California"} ]}),queryMode : 'local',typeAhead : true}, {// 只能输入数字的文本框xtype : 'numberfield',name : 'numberfield1', // 10fieldLabel : 'Number field',value : 20,minValue : 0,maxValue : 50}, {// 复选框xtype : 'checkboxfield', // 11name : 'checkbox1',fieldLabel : 'Checkbox',boxLabel : '复选框'}, {// 单选框，注意name和下面的单选框相同xtype : 'radiofield', // 12name : 'radio1',value : 'radiovalue1',fieldLabel : 'Radio buttons',boxLabel : 'radio 1'}, {// 单选框，注意name和上面的单选框相同xtype : 'radiofield', // 13name : 'radio1',value : 'radiovalue2',fieldLabel : '',labelSeparator : '',hideEmptyLabel : false,boxLabel : 'radio 2'}, {// 拖动组件xtype : 'multislider', // 14fieldLabel : 'Multi Slider',values : [ 25, 50, 75 ],increment : 5,minValue : 0,maxValue : 100}, {// 拖动组件xtype : 'sliderfield', // 15fieldLabel : 'Single Slider',value : 50,increment : 10,minValue : 0,maxValue : 100} ]// ,// buttons:[{text:"确定",handler:function(){// varform1=this.up("form").getForm();// //alert(form1);// Ext.get("panel21").dom.submit();// }},{text:"取消",handler:function(){alert("事件！");}}],// buttonAlign:'center'});// alert(add_winForm);// 创建window面板，表单面板是依托window面板显示的var syswin = Ext.create('Ext.window.Window', {title : "新建属性",width : 350,// height : 120,// plain : true,iconCls : "addicon",// 不可以随意改变大小resizable : false,// 是否可以拖动// draggable:false,collapsible : true, // 允许缩放条closeAction : 'close',closable : true,// 弹出模态窗体modal : 'true',buttonAlign : "center",bodyStyle : "padding:0 0 0 0",items : [ add_winForm ],buttons : [ {text : "保存",minWidth : 70,handler : function() {if (add_winForm.getForm().isValid()) {var add = add_winForm.getForm().getValues();console.log();$.ajax({async : false,type : "post",url : "form.action",data : JSON.stringify(add),dataType : "json",contentType : "application/json; charset=UTF-8",success : function(data) {Ext.Msg.alert("提示", "批量保存成功", function() {var gridd = Ext.getCmp('gridd');/*gridd.store.reload();*/});}});/** add_winForm.getForm().submit({* * url : 'form.action', //等待时显示 等待 waitTitle : '请稍等...',* waitMsg : '正在提交信息...', method: 'POST', params : {* 'FORM':JSON.stringify(add) },* * success : function(fp, o) {* //alert(o);success函数，成功提交后，根据返回信息判断情况 if (o.result ==* true) { Ext.MessageBox.alert("信息提示", "保存成功!");* syswin.close(); //关闭窗口 // Store1.reload(); } else {* msg('信息提示', '添加时出现异常！'); } }, failure : function() {* } });*/}}}, {text : "关闭",minWidth : 70,handler : function() {syswin.close();}} ]});syswin.show();};showform(); // 调用showform显示整个包含表单面板的window面板
});jsp代码
<%@ page language="java" isELIgnored="false"contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="eam" value="${pageContext.request.contextPath}" />
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css"href="${eam}/ext/resources/ext-theme-gray/ext-theme-gray-all.css" />
<link rel="stylesheet" type="text/css"href="${eam}/ext/resources/css/css/icon.css" />
<script type="text/javascript" src="${eam}/ext/ext-all-debug.js"></script>
<script type="text/javascript" src="${eam}/ui/tree7.js"></script>
<script type="text/javascript" src="${eam}/jquery/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="${eam}/ext/locale/ext-lang-zh_CN.js"></script>
</head>
<body>
</body>
</html>后台测试代码
@ResponseBody@RequestMapping("/form")public String fromPanal(@RequestBody Map<String,Object> map){System.out.println(map);System.out.println(map.get("textarea1"));return "true";}extjs4 学习笔记------表单数据上传相关推荐
- Laravel学习笔记4，文件上传，分页，验证码，数据表和迁移
目录 一.文件上传 二.数据分页 三.验证码 Return Image Return URL Return HTML 六.响应处理 一.文件上传 在laravel, 里面实现文件的上传是很简单的,压根 ...
- 【PHP】如何将表单数据上传至数据库
表单上传数据至数据库 首先我们需要创建一个可以录入数据的表单,我们将其命名为"表单验证.php",这个php将要实现的功能位将用户输入的数据保存下来,并传给另一个负责上传数据的ph ...
- 【信安学习笔记三】文件上传
个人学习参考用笔记 目录 前言 一.文件上传 **定义** **危害** **查找及判断** **分类** 二.验证与绕过 前端防护 后端防护 (一)黑名单 (二)白名单 (三)内容及其他 三.漏洞 ...
- 树莓派学习笔记——定时向yeelink上传树莓派CPU温度
0 前言 本文通过python文件IO操作获得树莓派CPU温度信息,通过python request库周期性向yeelink平台上传温度,修改rc.local脚本使得该python脚本在开机时便在后台 ...
- 前后端交互总结2:使用PHP进行表单数据上传与更新
1:使用PHP进行表单上传 1.1 form表单的数据收集 HTML页面: 代码解释:核心模块是form的属性: --提交方式 : method="post" --指定 name ...
- 大前端涉猎之前后端交互总结2:使用PHP进行表单数据上传与更新
1:使用PHP进行表单上传 1.1 form表单的数据收集 HTML页面: 代码解释:核心模块是form的属性: --提交方式 : method="post" --指定 name ...
- android学习笔记---32_文件断点上传器,解决多用户并发,以及自定义协议,注意协议中的漏洞
32_文件断点上传器 --------------------------- 1.当文件很大的时候就无法通过http协议进行上传了,因为get,post的安全原因,很多服 务器会 禁止这些协议,而 ...
- 学习笔记二：OSS上传视频截帧
简介 这章主要是上传视频截帧,公司需求对动态上传需求是OSS上传和截帧(最开始时没有需求,自己用的是FFmpeg 多媒体处理工具截取的),最后因为服务器上没有FFmpeg 工具,导致上传docker报 ...
- 第三十二天学习笔记-web漏洞-文件上传的条件竞争、.htaccess文件与.user.ini文件使用前提、二次渲染
目录 二次渲染原理 绕过方法 htaccess配置文件 .user.ini 二次渲染原理 在我们上传文件后,网站会对图片进行二次处理(格式.尺寸,保存,删除 要求等),服务器会把里面的内容进行替换更新 ...
最新文章
- 转： Android ListView 滑动背景为黑色的解决办法
- python推荐系统-基于Python的推荐系统的设计与实现
- 用rapid-framework开源工具快速生成SSH的网站框架MVC模式
- qt 进度条_Qt开源作品12-硬盘容量控件
- python数据分析方向_python数据分析方向，面试题解答
- html不换行溢出省略号代替,css控制不溢出,不换行,溢出部分省略号显示
- 技术实践：大规模知识图谱预训练及电商应用
- 虚拟的云服务器需要重启吗,虚拟主机重启服务器吗
- 2017.10.29 染色方案 思考记录
- Java IO实战操作(四)
- python3.3psutil模块安装_详解Python3.6安装psutil模块和功能简介
- mysql sqrt_详解MySQL中的SQRT函数的使用方法
- 常用c语言代码大全,C语言的一些常用代码
- jenkins测试人员的使用
- 【渝粤题库】陕西师范大学 《道德教育案例研究》作业
- JavaSE进阶篇【6】——2022年7月2日
- IFD-x 微型红外成像仪（模块）的温度测量和成像精度
- mysql取分组最新的一条_mysql group by之后取每个分组最新的一条
- Linux下打包压缩war和解压war包
- mysql查询用户留存语法（用户留存和用户留存率问题）
热门文章
- note: how userspace relates to netdevice rings
- Ubuntu 20.0.4 linux生信服务器笔记
- 计算机毕业设计基于Android的在线相册管理系统
- 2019软件外包平台有哪些？
- 互联网+智能停车4.0管理系统，只为停车更方便
- orbslam2-基础理论（六）-g2o（常用的优化算法）
- python 串口读取地磅仪表_串口读取称或是地磅数据
- python关键词讲解大全_python实现关键词提取的示例讲解
- 【termux终端】安卓手机运行青龙面板免root 7月17号
- 006永磁电机永磁体的类型：何为凸极性、隐极性，表贴式、内置式，傻瓜式讲解，专为零基础编写。