extjs4 学习笔记------表单数据上传

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', // 1
                name : 'hiddenfield1',
                value : '隐藏的文本框'
            }, {
                // 显示文本框，相当于label
                xtype : 'displayfield', // 2
                name : 'displayfield1',
                fieldLabel : 'Display field',
                value : '显示文本框'

            }, {
                // 输入文本框
                xtype : 'textfield', // 3
                name : 'textfield1',
                fieldLabel : 'Text field',
                // value: '输入文本框',
                allowBlank : false,
                emptyText : '陈建强',
                blankText : "提示"
            }, {
                // 输入密码的文本框，输入的字符都会展现为.
                xtype : 'textfield', // 4
                name : 'password1',
                inputType : 'password',
                fieldLabel : 'Password field'
            }, {
                // 多行文本输入框
                xtype : 'textareafield', // 5
                name : 'textarea1',
                fieldLabel : 'TextArea',
                id : "areaid",
                value : '啦啦啦，我是卖报的小行家'
            }, {
                // 上传文件文本框
                xtype : 'filefield', // 6
                name : 'file1',
                fieldLabel : 'File upload'
            }, {
                // 时间文本框
                xtype : 'timefield', // 7
                name : 'time1',
                fieldLabel : 'Time Field',
                minValue : '8:00 AM',
                maxValue : '5:00 PM',
                increment : 30
            }, {
                // 日期文本框
                xtype : 'datefield', // 8
                name : 'date1',
                fieldLabel : 'Date Field',
                value : new Date()
            }, {
                // 下拉列表框
                xtype : 'combobox', // 9
                fieldLabel : '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', // 10
                fieldLabel : 'Number field',
                value : 20,
                minValue : 0,
                maxValue : 50
            }, {
                // 复选框
                xtype : 'checkboxfield', // 11
                name : 'checkbox1',
                fieldLabel : 'Checkbox',
                boxLabel : '复选框'
            }, {
                // 单选框，注意name和下面的单选框相同
                xtype : 'radiofield', // 12
                name : 'radio1',
                value : 'radiovalue1',
                fieldLabel : 'Radio buttons',
                boxLabel : 'radio 1'
            }, {
                // 单选框，注意name和上面的单选框相同
                xtype : 'radiofield', // 13
                name : 'radio1',
                value : 'radiovalue2',
                fieldLabel : '',
                labelSeparator : '',
                hideEmptyLabel : false,
                boxLabel : 'radio 2'
            }, {
                // 拖动组件
                xtype : 'multislider', // 14
                fieldLabel : 'Multi Slider',
                values : [ 25, 50, 75 ],
                increment : 5,
                minValue : 0,
                maxValue : 100
            }, {
                // 拖动组件
                xtype : 'sliderfield', // 15
                fieldLabel : '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";

    }