2013-06-07 6 views
5

पर कुछ चेकबॉक्स को निष्क्रिय मैं एक column का उपयोग कर xtype के साथ एक सरल gridpanel है: checkcolumnExtJS Grid- विशेष पंक्ति

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

मैं स्तंभ आईडी द्वारा एक विशेष पंक्ति पर कुछ चेक बॉक्स को अक्षम करना चाहते। क्या यह संभव है? मैं उसे कैसे कर सकता हूँ? धन्यवाद।

उत्तर

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

मैं अपने उदाहरण देखने पर http://jsfiddle.net/KQdvJ/ पर अपने उदाहरण कोड चलाने का प्रयास है, लेकिन यह काम नहीं कर रहा, माफ करना, मैं ExtJS – DeLe

+0

में नौसिखिया हूँ चेककॉलम एक [ux 4.1.1] था (http://docs.sencha.com/extjs/4.1.1/#) जिसे ढांचे में एकीकृत किया गया है [4.2.0] (http: //docs.sencha .com/ExtJS/4.2.0/#!/API/Ext.grid.column.CheckColumn)। इसलिए आपको इसकी आवश्यकता होनी चाहिए: http://jsfiddle.net/rixo/KQdvJ/1/ – rixo

+0

इसके अलावा, 4.1.1 में चेककॉलम्स में अक्षम राज्य की शैली नहीं थी, और रेंडर विधि बदल गई है। – rixo