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

Posted 2023-02-26

【中文标题】Extjs Grid-禁用特殊行上的某些复选框

【英文标题】：Extjs Grid- disable some checkbox on special row

【发布时间】：2013-06-07 02:35:33

【问题描述】：

我有一个简单的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 禁用特殊行上的一些复选框。是否可以？我怎样才能做到这一点？谢谢。

【参考方案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'
    ]
);

【讨论】：

我尝试在jsfiddle.net/KQdvJ 运行您的示例代码以查看您的示例，但它不起作用，对不起，我是 extjs 的新手

CheckColumn 是一个ux in 4.1.1，已集成到4.2.0 的框架中。所以你需要它：jsfiddle.net/rixo/KQdvJ/1

此外，在 4.1.1 中，检查列没有禁用状态的样式，并且渲染方法已更改。

谢谢你，我找到了这个帖子mysamplecode.com/2012/02/…。那可能像你一样，使用 css。我在努力……

@rixo 我想完全隐藏它，而不仅仅是禁用它。最好的方法是什么？