Extjs之grid单元格编辑校验

效果如图所示：

1. 添加CSS样式
<style>
.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;}
</style>
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:'<span style="color:red">无效的ID,ID重复</span>'
        });
    }
}
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下测试通过，写的都是些代码片段，相信大家都看明白其中含义。

转载于:https://www.cnblogs.com/jiawenjun/p/6590709.html