Extjs Grid- 禁用特殊行上的某些复选框

Question

我有一个简单的 gridpanel与 column使用 xtype:checkcolumn

Ext.define('Ext.abc.grid', {
     extend: 'Ext.grid.Panel',     
     columns: [
        {
            text: 'id', dataIndex: 'id'
        },     
        { text: 'status', dataIndex: 'abc', 
          xtype: 'checkcolumn',

            /*viewConfig: { 
                getClass: function(Value, metaData, record){

                })
            },*/
            listeners:{
                beforecheckchange: function(column, row, checked, opts){ 
                },
                checkchange:function(cc,ix,isChecked){
                }
            }
        }
    ]
});

我想按列 id 在特殊行上禁用一些复选框。是否可以？我怎样才能做到这一点？谢谢。

Answer 1

我查看了Ext.grid.column.CheckColumn的代码，并且我认为实现您想要的目标的侵入性较小的方法是:

使用经过调整的模型，以防止在所需条件下进行修改。

覆盖列 renderer 为不可检查的记录添加禁用类。

例子:

// Using anonymous model class just to show that you can do this,
// if you don't need to define an application-wide model
var model = Ext.define(null, {
    extend: 'Ext.data.Model'

    ,fields: ['id', 'status', 'checkable']

    // example data    
    ,proxy: {
        type: 'memory'
        ,reader: 'array'
        ,data: [
            [1, true, true]
            ,[2, true, false]
            ,[3, false, true]
            ,[4, false, false]
        ]
    }

    // 1. Prevent modification on certain conditions    
    ,set: function(field, value) {
        if (field === 'status' && !this.get('checkable')) {
            return null;
        } else {
            return this.callParent(arguments);
        }
    }
});

Ext.widget('grid', {
    renderTo: Ext.getBody()
    ,height: 200
    ,store: {
        model: model
        ,autoLoad: true
    }
    ,columns: [{
        text: 'id'
        ,dataIndex: 'id'
    },{ 
        text: 'status'
        ,dataIndex: 'status'
        ,xtype: 'checkcolumn'

        // 2. Custom renderer to reflect "checkability"        
        ,renderer: function(value, meta, record) {
            var cssPrefix = Ext.baseCSSPrefix,
                cls = [cssPrefix + 'grid-checkcolumn'];

            if (
                this.disabled 
                // this is the added condition for disabledCls
                || !record.get('checkable')
            ) {
                meta.tdCls += ' ' + this.disabledCls;
            }
            if (value) {
                cls.push(cssPrefix + 'grid-checkcolumn-checked');
            }
            return '<img class="' + cls.join(' ') + '" src="' + Ext.BLANK_IMAGE_URL + '"/>';
        }
    },{
        text: 'modifiable'
        ,dataIndex: 'checkable'
        ,xtype: 'booleancolumn'
    }]
});