ext js ajax表单校验,Extjs之grid单元格编辑校验(示例代码)

效果如图所示：

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下测试通过，写的都是些代码片段，相信大家都看明白其中含义。