7

私はxtype:checkcolumnを使用gridpanelしたシンプルなものを持っていますcolumn

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 によって特別な行のいくつかのチェックボックスを無効にしたいと考えています。出来ますか？どうやってやるの？ありがとう。

4

1 に答える 1

7

のコードを調べましたが、Ext.grid.column.CheckColumn目的を達成するための邪魔にならない方法は次のとおりだと思います。

  1. 目的の条件での変更を防ぐ微調整されたモデルを使用します。

  2. 列をオーバーライドして、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'
    }]
});
于 2013-06-07T11:31:58.420 に答える