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

正则验证

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