zoukankan      html  css  js  c++  java
  • 初学Ext.FormPanel

    用extjs写了个form,还没有响应后代的操作

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Ext 2.0 Desktop Sample App</title>
       <link rel="stylesheet" type="text/css" href="E:/校宿管管理资料/ext-2.0.2/resources/css/ext-all.css"/>
     
        <script type="text/javascript" src="E:/校宿管管理资料/ext-2.0.2/adapter/ext/ext-base.js"></script>
      
        <script type="text/javascript" src="E:/校宿管管理资料/ext-2.0.2/ext-all.js"></script>
        


     <script type="text/javascript">
    Ext.f=function(){
               return{
                  init:function(){
                   Ext.QuickTips.init();//将提示消息初始化为消息球,通常是在函数的开头
          var movie_form = new Ext.FormPanel({//new 出一个movie_form表单
            renderTo:document.body,//表单的位置body
            frame:true,
            title:'表单提交',//表单标题
            250,
            items:[ //定义表单里的字段域,类似jsp表单里面的输入框
             
               {
                 xtype:'textfield',//文本框
                 fieldLabel:'用户名',
                 name:'username',
           allowBlank: false,//extjs自带的校验,不能为空
                vtype:'checkusername'//自定义的检验checkusername

            },
             new Ext.form.TextField({
             inputType: 'password',//密码本文框
                            id: 'pass1',
                          maxLength: 6,
                             fieldLabel: '输入密码',
                             allowBlank: false //extjs自带的校验,不能为空
             }),
          new Ext.form.TextField({
                             inputType: 'password',
                             id: 'pass2',
                             maxLength: 6,
                             fieldLabel: '重复密码',
                            allowBlank: false, //extjs自带的校验,不能为空
                            vtype: 'repetition',  //自定义校验repetition(指定repetition验证类型)
                            repetition: { targetCmpId: 'pass1' }  //配置repetition验证,提供目标组件(表单)ID
                         }),
           {
                 xtype:'datefield',//日期文本框
                 fieldLabel:'日期',
                 name:'date',
                 disabledDays:[1,2,3,4,5]//禁用了除周六周日之外的日期,0代表周日,6代表周六
            },
         {
               xtype: 'button',//按钮
                      height: 50,
                      120,
                      text: '注册',
                      x: 80,
                      y: 160
                        }

            ]
          });
         }
               };
              
           }();
         
           //自定义的检验函数
           Ext.apply(Ext.form.VTypes, {
             //用户名校验
             checkusername: function(val,field) {     //var是用户名输入框里面的值,field是指checkusername所在的表单movie_form。返回true,则验证通过,否则验证失败
               var reg = /[^u4e00-u9fa5]+$/i; //(/[^u4E00-u9FA5]/g  //中文正则表达式
       if(!reg.test(val))  //判断输入框里面的值是否为中文,
         { 
        return false; //不是中文 
       } 
       return true; 


        },
         checkusernameText: '请输中文',//校验错误时提示信息

            
         //密码检验
          repetition: function(val, field) {     //返回true,则验证通过,否则验证失败
              if (field.repetition) {               //如果表单有使用repetition配置,repetition配置是一个JSON对象,该对象提供了一个名为targetCmpId的字段,该字段指定了需要进行比较的另一个组件ID。
                  var cmp = Ext.getCmp(field.repetition.targetCmpId);   //通过targetCmpId的字段查找组件
                 if (Ext.isEmpty(cmp)) {      //如果组件(表单)不存在,提示错误
                      Ext.MessageBox.show({
                          title: '错误',
                          msg: '发生异常错误,指定的组件未找到',
                          icon: Ext.Msg.ERROR,
                         buttons: Ext.Msg.OK
                     });
                    return false;
                }
                 if (val == cmp.getValue()) {  //取得目标组件(表单)的值,与宿主表单的值进行比较。
                    return true;
                 } else {
                     return false;
                 }
             }
        },
         repetitionText: '密码不一致'
     });


           Ext.onReady(Ext.f.init,Ext.f);
         

        </script>
    </head>

    <body>
         
    </body>
    </html>

  • 相关阅读:
    Eclipse下载
    RTT之AT命令组件
    RTT之shell
    RTT之内存管理及异常中断
    单片机的图形UI
    RTT学习
    RTT学习之线程管理
    C++学习笔记:
    运放
    关于KEIL下的图形化显示和输出问题
  • 原文地址:https://www.cnblogs.com/damonhuang/p/2317635.html
Copyright © 2011-2022 走看看