ExtJS Grid- einige Checkbox auf spezielle Zeile deaktivieren

Question

Ich habe eine einfache gridpanel mit einem column mit 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){ 
       } 
      } 
     } 
    ] 
}); 

I Spalte id einige Kontrollkästchen auf einer speziellen Zeile deaktivieren möchten. Ist es möglich? Wie kann ich das machen? Vielen Dank.

Answer 1

habe ich einen Blick in den Code von Ext.grid.column.CheckColumn, und ich denke, die weniger aufdringliche Art und Weise zu erreichen, was Sie wollen, ist:

1. Verwenden Sie ein gezwickt Modell, das Modifikation auf den gewünschten Zustand zu verhindern.

2. Überschreiben Sie die Spalte renderer, um die deaktivierte Klasse für Datensätze hinzuzufügen, die nicht überprüfbar sind.

Beispiel:

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