Extjs Grid-禁用特殊行上的某些复选框 [英] Extjs Grid- disable some checkbox on special row

问题描述

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

I have a simple gridpanel with a column using 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 禁用特殊行上的一些复选框.是否可以?我怎样才能做到这一点?谢谢.

I want to disable some checkboxes on a special row by column id. Is it possible? How can I do that? Thanks.

推荐答案

我看了一下 Ext.grid.column.CheckColumn 的代码，我认为实现什么的侵入性较小的方法你想要的是:

I took a look into the code of Ext.grid.column.CheckColumn, and I think the less intrusive way to achieve what you want is to:

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

1. Use a tweaked model that prevent modification on the desired condition.

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

Override the column renderer to add the disabled class for record that are not checkable.

例子:

// 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'
    }]
});

这篇关于Extjs Grid-禁用特殊行上的某些复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！