效果如图所示：
1. 添加CSS样式
.x-grid-cell-invalid .x-grid-cell-inner:before{content: "";position: absolute;z-index: 0;top: 0;bottom: 0;left: 0;right: 0;border: 1px solid red;}
2. 监听单元格编辑插件的事件
{ptype: \'cellediting\', clicksToEdit: 1, pluginId: \'edit\',listeners:{
//单元格编辑完成之后会触发此事件
validateedit:function(editor,context,eOpts){
//字段名判断
if(context.field==="typeId") {
//后台校验
Ext.Ajax.request({
url: \'/service/articleTypeService/uniquenessCheck\',
params: {id: context.value},
success: function (obj) {
if (obj.success === false) {
//校验未通过后给单元格添加class
var node=Ext.get(context.node);
var td=node.query(\'[data-columnid=\'+context.column.id+\']\',false)[0];
td.addCls("x-grid-cell-invalid invalid-id");
}
},
loadMask:false
});
}
return true;
}
}}
3. 给未校验通过的单元格添加tooltip提示
//表格事件监听
listeners:{
afterrender:function(view){
Ext.create(\'Ext.tip.ToolTip\',{
target:view.el,
delegate:\'.invalid-id\',
html:\'无效的ID,ID重复\'
});
}
}
4. 当表格渲染时就想进行验证的时候使用的方式(可省略第2步)
{xtype:\'textcolumn\',text: \'编码\', dataIndex: \'typeId\', align: \'left\', flex: 1,editor:{}
,renderer:function(value,metaData,record,rowIndex,colIndex,store,view){
if(value==40){
metaData.tdCls="x-grid-cell-invalid invalid-age";
}
return value;}
}
5.校验
invalid:function(){
var tds=this.getView().getEl().query(\'td.x-grid-cell-invalid\');
return tds.length>0;
},
备注：在Extjs5.1下测试通过，写的都是些代码片段，相信大家都看明白其中含义。
