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: '[email protected]',
                    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: "[email protected]",
        description: "OSL"
    }
}
<%
	}else{
%>
{
    success: false,
    msg: "数据载入错误"
}
<%
	}
%>