ExtJS grid- wyłączyć pewne pole na specjalnym rzędu

Question

Mam proste gridpanel z column użyciu 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){ 
       } 
      } 
     } 
    ] 
}); 

chcę wyłączyć niektóre wyboru na specjalnym rzędu przez kolumny id. Czy to możliwe? Jak mogę to zrobić? Dzięki.

Answer 1

Przyjrzałem do kodu Ext.grid.column.CheckColumn, i myślę, że mniej nachalny sposób, aby osiągnąć to, co chcesz, jest:

1. Użyj Tweaked modelu, które uniemożliwiają modyfikację w pożądanym stanie.

2. Zastąp kolumnę renderer, aby dodać wyłączoną klasę dla rekordu, którego nie można kontrolować.

Przykład:

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