2013-06-07 7 views
5

Ich habe eine einfache gridpanel mit einem column mit xtype: checkcolumnExtJS Grid- einige Checkbox auf spezielle Zeile deaktivieren

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.

Antwort

7

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

Ich versuche, Ihren Beispielcode auf http://jsfiddle.net/KQdvJ/ läuft Ihr Beispiel zu sehen, aber es funktioniert nicht, sorry ich bin Neuling in extjs – DeLe

+0

CheckColumn war ein [ux in 4.1.1] (http://docs.sencha.com/extjs/4.1.1/#), das in [4.2.0] in das Framework integriert wurde (http: //docs.sencha .com/extjs/4.2.0/#!/api/Ext.gr.column.CheckColumn). Also müssen Sie es benötigen: http://jsfiddle.net/rixo/KQdvJ/1/ – rixo

+0

Auch in 4.1.1 checkcolumns hatte keinen Stil für deaktiviert Zustand, und die Render-Methode hat sich geändert. – rixo