Extjs最新框架表单提交代码

zhoutiea

浏览: 38489 次
性别:
来自: 沈阳

最近访客更多访客>>

fuhongyao

adfghzhang

Kanepan

a759681304

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

java

框架 EXT Servlet Ajax json

本人将最近学习Extjs的心血奉献给网络的朋友们，有需要学习Extjs的朋友可以来参考，
平时也没太多时间，今天先介绍一个简单的登陆例子吧。如有问题请留言。
登陆布局及验证：FormPanel+servlet或整合Struts中的Action
页面代码：
页面直接在head中调用ext.js，无须写任何代码。注意更改js的路径
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="js/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="js/resources/css/xtheme-purple.css">
<link rel="stylesheet" type="text/css" href="js/examples.css" />
<script type="text/javascript" src="js/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript" src="js/TabCloseMenu.js"></script>
<script type="text/javascript" src="states.js"></script>
<script type="text/javascript" src="extform.js" ></script>
<style>
</style>
</head>
<body>
</body>

//本例效果样式 ,如要换颜色调用其它Ext中css。
//extform.js代码
Ext.onReady(function(){
      Ext.lib.Ajax.defaultPostHeader += '; charset=UTF-8';
          //使用表单提示
          Ext.QuickTips.init();
          Ext.form.Field.prototype.msgTarget = 'side';

        //定义表单
          var simple = new Ext.FormPanel({
            labelWidth: 75,
            baseCls: 'x-plain',
            defaults: {width: 150},
            defaultType: 'textfield',//默认字段类型

            //定义表单元素
            items: [{
                  fieldLabel: '帐户',
                  name: 'name',//元素名称
                  //anchor:'95%',//也可用此定义自适应宽度
                  allowBlank:false,//不允许为空
                  blankText:'帐户不能为空'//错误提示内容
               },{
                   inputType:'password',
                  fieldLabel: '密码',
                  //anchor:'95%',
                  name: 'pws',
                  allowBlank:false,
                  blankText:'密码不能为空'
               }
            ],
            buttons: [{
               text: '登陆',
               type: 'submit',
               //定义表单提交事件
               handler:function(){

                    if(simple.form.isValid()){ //验证合法后使用加载进度条
                         Ext.MessageBox.show({
                              title: '请稍等',
                              msg: '正在加载...',
                              progressText: '',
                              width:450,
                              progress:true,
                              closable:false,
                              animEl: 'loding'
                           });
                           //控制进度速度
                           var f = function(v){
                            return function(){
                                    var i = v/10;
                                    Ext.MessageBox.updateProgress(i, '');
                                    };
                           };
                           for(var i = 1; i < 11; i++){
                              setTimeout(f(i), i*10);
                           }
                          //提交到服务器操作servlet方法
                           simple.getForm().submit({
                            [url='servlet/Extform'//servlet路径
                         //提交到服务器操作Action方法
                           // simple.form.doAction('submit',{
                          // [url='Action.do',//Action路径
                         // method:'post', //提交方法post或get
                        // params:'', //提交的详细参数
                            //提交成功的回调函数
                            success:function(form,action){
                                 if (action.result.msg=='ok') {
                                    win.hide();
                                    document.location='hello.html';
                                 } else {
                                    Ext.Msg.alert('登陆错误',action.result.msg);
                                 }
                            },
                            //提交失败的回调函数
                            failure:function(form,action){
                            if(action.failureType=="connect"){
                                Ext.Msg.alert('错误','服务器出现错误请稍后再试！');
                               }
                            }
                          });
                        }
               }
            },{
               text: '取消',
               handler:function(){simple.form.reset();}//重置表单
            }]
         });
//                //定义窗体
               win = new Ext.Window({
                  id:'win',
                  title:'用户登陆',
                  layout:'fit', //之前提到的布局方式fit，自适应布局
                  width:300,
                  height:150,
                  plain:true,
                        bodyStyle:'padding:5px;',
                  maximizable:false,//禁止最大化
                  closeAction:'close',
                  closable:false,//禁止关闭
                  collapsible:true,//可折叠
                  plain: true,
                  buttonAlign:'center',
                  items:simple   //将表单作为窗体元素嵌套布局，要不然不显示表单。
               });
               win.show();//显示窗体

       });

//servlet代码:
import org.json.JSONObject;

public class Extform extends HttpServlet {
public Extform() {
super();
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {

response.setContentType("text/json; charset=UTF-8");

        try {
         PrintWriter out = response.getWriter();
        // 得到页面传过来的参数
        String username = request.getParameter("Username");
        String password = request.getParameter("pasword");
        System.out.println("用户名：" + username);
        System.out.println("密码：" + password);
        String msg = null;
        if (username.trim().equals("用户名") && password.trim().equals("密码")) {
            msg = "ok";
        } else {
            msg = "你的帐户或密码错误";
        }
        // 初始化
        Map map = new HashMap();
        map.put("success", true);
        map.put("msg", msg);
        // 转换成对象，不要转换成数组
        JSONObject obj =new JSONObject(map);
        //Extjs提供的Ajax技术,在网上搜JSONObject就有API和架包。
        System.out.println(obj);
        // 输出到列表
        out.print(obj);
        } catch (IOException e) {
            e.printStackTrace();
        }
}