看到网上没有类似的demo 官方api又写的不太明确 , 就写了一个简单的例子分享一下 , 希望高手指点 帮忙改进~
一: 所需配置
1. Grid是单元格编辑模式
var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
id : "fxxxCellEditing",
clicksToEdit: 2//双击编辑
});
selType: 'cellmodel',
2. QuickTips用于悬浮显示错误信息
Ext.QuickTips.init();//错误悬浮提示
3. Grid的每一个columns声明一个editor
columns: [
{
header: '<font color="red">*</font>功能',
dataIndex: 'funName',
width: "10%",
align: 'center',
sortable: true,//是否可排序
editor:new Ext.form.TextField({
allowBlank: false,
blankText : "功能不能为空",
maxLength: 40,
maxLengthText : "长度不能超过40"
})
},
这个editor用Ext.form.TextField对象实现 ,
这样就可以在传参中写入验证的配置信息了.
二: 验证方式
1. 系统提供长度验证
这个长度是英文长度, 中文的话可以用后边的validator来数汉字的长度
editor:new Ext.form.TextField({
allowBlank: false,
blankText : "功能不能为空",
maxLength: 4,
maxLengthText : "长度不能超过4"
minLength:2,
minLengthText : "长度不能小于2",
2.正则表达式验证
editor:new Ext.form.TextField({
allowBlank: false,
blankText : "故障模式频数比不能为空",
regex :/^(0([\.]\d*[0-9]+)|0|1)$/, //==>此正则是[0,1] , 另"/0\.[0-9]*[1-9]$/"是(0,1)
regexText : "只能输入:数值范围在0到1之间的小数"
})
3.form.TextField的validator :配置验证
editor:new Ext.form.TextField({
allowBlank: false,
blankText : "功能不能为空",
validator : function( value )
{
var len = value.replace(/[^\x00-\xff]/g, "xx").length;
if( len > 4000 )
{
return '功能的长度不能超过4000字节,一个汉字字符为两个字节';
}
else
{
return true;
}
}
})
4.vtype自定义验证
这个相对复杂 ,我只用validator就能完成验证了 时间比较紧就没研究 嘿嘿
大致用法如下
vtype : "email",//email格式验证
vtypeText : "不是有效的邮箱地址",//错误提示信息
官方给了几个vtype
还可以通过
Ext.apply(Ext.form.field.VTypes, {
自己拓展
官方api:http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.form.field.VTypes
这还有一个高手写的vtype的总结:http://blog.csdn.net/nailwl/article/details/5707364
作者:ruantao1989
出处:http://blog.csdn.net/ruantao1989
申明:作者写博是为了总结经验,和交流学习之用。如需转载,请尽量保留此申明,并在文章页面明显位置给出原文连接。谢谢!