Extjs之grid儲存格編輯校正

標籤：程式碼片段   listener   row   欄位   .ajax   query   node   render   get   

效果：

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下測試通過，寫的都是些程式碼片段，相信大家都看明白其中含義。

Extjs之grid儲存格編輯校正