Ext formpanel的用法

2019独角兽企业重金招聘Python工程师标准>>>

formpanel是一个可以提交表单的panel布局

先来一个简单的例子：

var form1 = new Ext.form.FormPanel({
       width:350,
       frame:true,//圆角和浅蓝色背景
       renderTo:Ext.getBody(),//呈现
       title:"FormPanel",
       bodyStyle:"padding:5px 5px 0",
       defaults:{xtype:"textfield",width:200},
       items:[
          {
            fieldLabel:"UserName",//文本框标题
            name:"user",
            id:"user"
            
          },
          {
            fieldLabel:"PassWord",
            name:"pass",
            id:"pass"
          }
       ],
       buttons:[{text:"确定"},{text:"取消",handler:function(){alert("事件！");}}]
    });

效果如图：

关于其中的xtype，主要有以下几种：

form             Ext.FormPanel
checkbox         Ext.form.Checkbox
combo            Ext.form.ComboBox
datefield        Ext.form.DateField
field            Ext.form.Field
fieldset         Ext.form.FieldSet
hidden           Ext.form.Hidden
htmleditor       Ext.form.HtmlEditor
label            Ext.form.Label
numberfield      Ext.form.NumberField
radio            Ext.form.Radio
textarea         Ext.form.TextArea
textfield        Ext.form.TextField
timefield        Ext.form.TimeField

trigger          Ext.form.TriggerField

form本身是支持验证的

首先加上如下代码：

Ext.QuickTips.init();//支持tips提示
Ext.form.Field.prototype.msgTarget='side';//提示的方式，枚举值为"qtip","title","under","side",id(元素id)

空验证的参数

1.allowBlank:false//false则不能为空，默认为true

2.blankText:string//当为空时的错误提示信息

使用vtype验证的方法

vtype:"email",//email格式验证
vtypeText:"不是有效的邮箱地址",//错误提示信息

form验证中vtype的默认支持类型
1.alpha //只能输入字母，无法输入其他（如数字，特殊符号等）
2.alphanum//只能输入字母和数字，无法输入其他
3.email//email验证，要求的格式是"langsin@gmail.com"

4.url//url格式验证，要求的格式是http://www.langsin.com

另外我们也可以自定义验证函数，使用方法如下：

/先用Ext.apply方法添加自定义的password验证函数（也可以取其他的名字）
Ext.apply(Ext.form.VTypes,{
    password:function(val,field){//val指这里的文本框值，field指这个文本框组件
       if(field.confirmTo){//confirmTo是我们自定义的配置参数，一般用来保存另外的组件的id值
           var pwd=Ext.get(field.confirmTo);//取得confirmTo的那个id的值
           return (val==pwd.getValue());
       }
       return true;
    }
});
//配置items参数
items:[{fieldLabel:"密码",
                id:"pass1",
                anchor:"90%"
               },{
                fieldLabel:"确认密码",
                id:"pass2",
                vtype:"password",//自定义的验证类型
                  vtypeText:"两次密码不一致！",
                  confirmTo:"pass1",//要比较的另外一个的组件的id
                anchor:"90%"
}

更详细的内容可以参考如下的博客，这里有一个很复杂的例子很详细

http://yp.oss.org.cn/blog/show_resource.php?resource_id=770

 

总结一下，formpanel是一个panel组件，里面可以放入各种表单项，具体参考xtype，另外ext支持vtype的验证。另外就是要多做些复杂的from提交的例子。

转载于:https://my.oschina.net/zimingforever/blog/66054