关于ext入门的例子讲解

      由于最近刚接触的项目需要用到ext，因为以前也没有接触过，所以现在也算是现学现卖了，下面就借助一个模仿登陆的例子来讲解一下ext的使用

      1、先引入ext的资源如下：

       <link rel="stylesheet" type="text/css" href="js/resources/css/ext-all.css" />
       <script type="text/javascript" src="js/adapter/ext/ext-base.js"></script>
       <script type="text/javascript" src="js/ext-all.js"></script>

 

      2、构造ext构件

       Ext.onReady(function(){   
          //使用表单提示
          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',//元素名称
                        allowBlank:false,//不允许为空
                        blankText:'帐户不能为空'//错误提示内容
                    },{
                        inputType:'password',
                        fieldLabel: '密码',
                        name: 'pws',
                        allowBlank:false,
                        blankText:'密码不能为空'
                    }
                ],

                buttons: [{
                    text: '登录',
                    type: 'submit',  //类型
                    //定义表单提交事件
                    handler:function(){
                              if(simple.form.isValid()){//验证合法后使用加载进度条
                                  //提交到服务器操作
                                  simple.form.doAction('submit',{
                                     url:'servlet/Login',//文件路径
                                     method:'post',//提交方法
                                     params:'param:ddd',
                                     //提交成功的回调函数
                                     success:function(form,action){
                                            if (action.result.msg=='ok') {
                                                document.location='index.html';
                                            } else {
                                                Ext.Msg.alert('登陆错误',action.result.msg);
                                            }
                                     },
                                     //提交失败的回调函数
                                     failure:function(){
                                            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();//显示窗体
             simple.render("show");    //与下页的div的ID相对应
         });

        3、在body里面加如下代码：

      <form action="servlet/Login" method="post">
      <input type="submit"/>
     </form>
      <div id="show" style="width:300,height:150">
      </div>

 

 

       关于servlet/Login这是一个HttpServlet，里面编写着登录的业务逻辑，程序登录成功后转向index.html