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"
  }

  效果：