[ExtJS] grid 可编辑表格 禁用部分单元格编辑

版权声明：如若转载，烦请注明出处。 https://blog.csdn.net/ZYD45/article/details/82665091

在ExtJS Mordern版本中，grid的单元格编辑都是一整列的

但是，若是有时单元格无需编辑时，就没有相关配置项

看下效果：

这里需要手写逻辑，取消编辑

1.首先配置grid的单元格编辑插件

plugins: {
     gridcellediting: {
             selectOnEdit: true,
             triggerEvent: 'doubletap' //配置单元格变editor触发事件 doubletap双击或 tap 单击
            }
 },

2.给单元格的dom元素 增添配置项

 cell: {
         encodeHtml: false,
         renderer: function (val, record, dataindex, cell) {
         if (!val) {                       //筛选哪些单元格要禁用编辑 的判断逻辑
            cell.el.on({
               tap: function (e) {         //写了个单元格内元素x 删除一行的事件
                    if (Ext.fly(e.target).hasCls('del'))                 
                          this.getTreeStore().remove(this);
                    },
               doubletap: function (e) { //这里用doubletap处理 和gridcelledting触发同一个事件
                    var rawValue=Ext.fly(b).component.getRawValue();
                    if(rawValue.trim())return this.beginEdit(); //修复 动态添加子元素 可编辑单元格无法编辑问题
                   this.cancelEdit();   //取消此单元格record编辑
                   e.stopPropagation();  //阻止冒泡 ！重要
               },
               scope: record
            });
            return '<span class="del">x</span>';
         } 
         else
                 return val;
         },

},

整体代码：（可以放到ExtJS在线测试预览）

{
    xtype: 'tree',
    height: 400,
    width: 600,
    store: {
        type: 'tree',
        rootVisible: true,
        root: {
            expanded: true,
            text: 'All',
            iconCls: 'x-fa fa-sitemap',
            children: [{
                text: 'Home',
                iconCls: 'x-fa fa-home',
                children: [{
                    text: 'Messages',
                    A: 'mesg',
                    numItems: 231,
                    iconCls: 'x-fa fa-inbox',
                    leaf: true
                }, {
                    text: 'Archive',
                    iconCls: 'x-fa fa-database',
                    children: [{
                        text: 'First',
                        numItems: 7,
                        A: 'girst',
                        iconCls: 'x-fa fa-sliders',
                        leaf: true
                    }, {
                        text: 'No Icon',
                        A: 'icno',
                        numItems: 0,
                        iconCls: null,
                        leaf: true
                    }]
                }]
            }]
        }
    },
    plugins: {
        gridcellediting: {
            selectOnEdit: true,
                triggerEvent: 'doubletap'
        }
    },
    columns: [{
        xtype: 'treecolumn',
        text: 'Name',
        flex: 1,
        dataIndex: 'text',
        editable: true
    }, {
        dataIndex: 'A',
        text: '',
        flex: 1,
        editable: true,
        cell: {
            encodeHtml: false,
            renderer: function (val, record, dataindex, cell) {
                if (!val) {
                    cell.el.on({
                        tap: function (e, b, c) {
                            this.cancelEdit();
                            e.stopPropagation();

                            if (Ext.fly(e.target).hasCls('del')) this.getTreeStore().remove(this);
                        },
                        doubletap: function (e, b, c) {
 var rawValue=Ext.fly(b).component.getRawValue();
                    if(rawValue.trim())return this.beginEdit(); //修复 动态添加子元素 可编辑单元格无法编辑问题
                            this.cancelEdit();
                            e.stopPropagation();

                        },
                        scope: record
                    });
                    return '<span class="del">x</span>';
                } else
                    return val;
            },
        },
    }]
}