ExtJs表单FormPanel

1.简单表单实例

/**  
   简单表单实例(与JSP页面进行交互)  
 */  
function createSimpleFormPanel(){   
    var myFormPanel = new Ext.form.FormPanel({   
        renderTo: document.body,   
        title: '我的表单',   
        width: 250,   
        height: 300,   
        labelWidth: 60,   
        items:[{//设定表单中的元素   
            xtype: 'textfield',   
            name: 'username',   
            fieldLabel: '用户名'  
        },{   
            xtype: 'textfield',   
            name: 'password',   
            inputType: 'password',   
            fieldLabel: '密码'  
        },{   
            xtype: 'textfield',   
            name: 'email',   
            inputType: 'email',   
            fieldLabel: '邮箱'  
        },{   
            xtype: 'datefield',   
            name: 'birthday',   
            fieldLabel: '出生日期'  
        },{   
            xtype: 'textarea',   
            name: 'description',   
            fieldLabel: '简介'  
        }],   
        buttons:[{   
            text: '保存',   
            width: 40,   
            handler: function(){   
                //此处可以用myFormPanel.getForm()和myFormPanel.form两种方法获得表单对象.   
                myFormPanel.getForm().submit({//提交表单数据   
                    url: 'reg.jsp',//处理页面,注意返回内容格式的正确性   
                    method: 'post',   
                    success: function(form, action) {//保存成功   
                        Ext.Msg.alert('Success', action.result.msg);   
                    },   
                    failure: function(form, action) {//保存失败   
                        Ext.Msg.alert('Failure', action.result.msg);   
                    }   
                }) ;   
            }   
        },{   
            text: '重置',   
            width: 40,   
            handler: function(){   
                myFormPanel.form.reset() ;//重置表单   
            }   
        },{   
            text: '加载数据',   
            handler: function(){   
                myFormPanel.form.load({//从后台加载数据   
                    url: 'loadReg.jsp',   
                    params: {   
                        id: 'load'  
                    }   
                }) ;   
            }   
        },{   
            text: '设值',   
            width: 40,   
            handler: function(){   
                myFormPanel.form.setValues({//设置表单的值   
                    username: 'a',   
                    password: 'b',   
                    email: 'a@b.c',   
                    birthday: '7/17/2011',   
                    description: 'd'  
                }) ;   
            }   
        }]   
    }) ;   
}   
Ext.onReady(createSimpleFormPanel);//创建动态树  

 

2.reg.jsp代码

<%@ page language="java" contentType="text/html; charset=UTF-8"  
    pageEncoding="UTF-8"%>   
<%   
    String username = request.getParameter("username") ;   
    System.out.println(username) ;   
    if(username!=null && "ysj".equals(username)){   
%>   
        {"success":true,"msg":"save success"}   
<%   
    }else{   
%>   
        {"success":false,"msg":"save failure"}   
<%       
    }   
%> 

 3.loadReg.jsp代码

 

<%@ page language="java" contentType="text/html; charset=UTF-8"  
    pageEncoding="UTF-8"%>   
<%   
    String id = request.getParameter("id") ;   
    if(id!=null && "load".equals(id)){   
%>   
{   
    success: true,   
    data: {   
        username: "Fred. Olsen Lines喻",   
        password: "FXT",   
        email: "[e-mail]",   
        description: "OSL"  
    }   
}   
<%   
    }else{   
%>   
{   
    success: false,   
    msg: "数据载入错误"  
}   
<%   
    }   
%>