Ext Form用法详解

创建Extjs Form控件

//验证ip地址

Ext.apply(Ext.form.field.VTypes, {
   IPAddress: function (v) {
       return /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(v);
   },
   IPAddressText: '只能输入ip地址',
   IPAddressMask: /[\d\.]/i
});

Ext.onReady(function(){
var form = Ext.create("Ext.form.Panel", {
   width: 500,
   height: 340,
   margin: 20,
   title: "Form",
   renderTo: Ext.getBody(),
   collapsible: true,   //可折叠
   autoScroll: true,   //自动创建滚动条
   defaultType: 'textfield',
   defaults: {
       anchor: '100%',
   },
   fieldDefaults: {
       labelWidth: 60,
       labelAlign: "left",
       flex: 1,
       margin: 5
   },
   items: [{
           xtype: "container",
           layout: "hbox",
           items: [{ 
          xtype: "textfield",
                 name: "name",
             fieldLabel: "姓名",
               margin:'10 15 0 10',
               maxLength: 10, //最大长度限制
             minLength: 3, //最小长度限制
             allowBlank: false 
         },
             { 
    xtype: "numberfield",
    name: "age",
    fieldLabel: "年龄", 
    decimalPrecision: 0, 
    maxValue: 100, //最大值
    minValue: 1, //最小值
    margin:'10 15 0 10',
    
   }
           ]
       },
       {
           xtype: "container",
           layout: "hbox",
           items: [{ 
           xtype: "textfield", 
           name: "phone", 
           fieldLabel: "电话", 
           allowBlank: false, 
           margin:'10 15 0 10',
        },
            { 
           xtype: "textfield", 
           name: "email", 
           fieldLabel: "邮箱", 
           allowBlank: false, 
           emptyText: "Email地址",
           margin:'10 15 0 10',
           vtype: "email",
//            regex: /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/,
       }
           ]
       },
       {
        xtype: "container",
           layout: "hbox",
           items: [{ 
           xtype: "textfield", 
           name: "fixed-line", 
           fieldLabel: "固话", 
           allowBlank: false,
           margin:'10 15 0 10', 
   },
           {
               xtype: "textfield",
               name: "ip",
               fieldLabel: "IP地址",
               margin:'10 15 0 10',
               vtype: "IPAddress"
           }
       ]
   },
   {
           xtype: "container",
           layout: "hbox",
           items: [{ 
           xtype: "textfield", 
           name: "company", 
           fieldLabel: "公司地址", 
           allowBlank: false,
           margin:'10 15 0 10', 
       }
           ]
       },
       {
         xtype: "container",
           layout: "hbox",
           items: [{ 
           xtype: "textfield", 
           name: "address", 
           fieldLabel: "家庭住址", 
           allowBlank: false,
           margin:'10 15 0 10', 
           }
       ]
       },
       {
       xtype: "textareafield",
       name: "remark",
       fieldLabel: "备注",
       margin:'10 15 0 10',
       height: 80
   }
],
 buttons: [
   { xtype: "button", text: "保存" }
]
});

});

效果如下：

vtype验证

vtype提供了一些公用的验证类型，它们包括：

alpha：希腊数字

alphanum：字母和数字

email：电子邮件地址

url：网址

效果：

代码：

{
    xtype: "textfield",
    name: "Email",
    fieldLabel: "Email",
    vtype: "email",
    flex: 1
}

自定义vtype

上面介绍了vtype的简单用法，可以看到这种验证是非常好用的，但是小伙伴们不觉得extjs提供的vtype太少吗？

小伙伴们不要嫌弃，接下来我们看一下如何自定义vtype，代码：

//验证ip地址
Ext.apply(Ext.form.field.VTypes, {
    IPAddress: function (v) {
        return /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(v);
    },
    IPAddressText: '只能输入ip地址',
    IPAddressMask: /[\d\.]/i
});

用法：

{
    xtype: "textfield",
    name: "ip",
    fieldLabel: "IP地址",
    vtype: "IPAddress"
}

效果：