Extjs6.2 Form中组件的使用及正则验证

本文链接：https://blog.csdn.net/onightfalls/article/details/77044024

本文介绍如何使用正则表达式进行输入验证，包括只允许输入正整数的例子，并展示了ComboBox和tagfield两种下拉框组件的配置方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

正则验证

Ext.create('Ext.form.Panel', {
    title: '正则表达式验证',

    items: [{
        fieldLabel: '验证正则表达式',
        //表达式
        regex: /^[+]{0,1}(\d+)$/,
        //不符合表达式的错误提示
        regexText: '额度上限只能输入正整数',
        listeners:{
            //防止输入空格,混过form验证
            'blur':function(e){e.setValue(e.getValue().trim())}
        }
    }]
});

ComboBox 下拉组件

Ext.create('Ext.form.ComboBox', {
    fieldLabel: '所属组织',
    emptyText : '请选择',
    name: 'group',
    width: '100%',

    //是否可用为空
    allowBlank: false,
    //必须选择一个选项
    forceSelection: true,
    //该项如果没有选择，则提示错误信息
    blankText: '请选择所属组织',

    /**
     * ComboBox是否显示pagingtoolbar工具, pagingtoolbar工具会自己出现在ComboBox内部下方
     * ComboBox自动引用系统的pagingtoolbar，不用单独引用
     * 别忘了在 store里面配置pageSize: 3，一页想显示几条，数字就写几
     */
    pageSize: true,

    //ComboBox数据源
    displayField: 'name',
    valueField: 'id',
    store: Ext.create('Ext.data.Store',{
        pageSize: 3,
        proxy: {
            type: 'ajax',
            url: 'getGroupList.html',
            reader: {
                type: 'json',
                rootProperty: 'data'
            }
        },
        //是否自动加载数据源
        autoLoad: true
    }),

    //加上条件查询
    editable: true,
    queryParam: 'query',
    mode: 'remote',
    loadingText: '正在加载...',
    minChars: 1
});

tagfield 下拉多选组件

xtype: 'tagfield',
fieldLabel: '贷款类别',
emptyText : '请选择',
name: 'type',
valueField: 'name',
displayField: 'name'
store: {
    type: 'store',
    data : [
        {'name':'房贷'},{'name':'车贷'},{'name':'工薪贷'},{'name':'业主贷'}
    ]
},

//加上条件查询
queryMode: 'remote',
queryParam : 'title',
minChars: 1