Extjs: only show checkbox when another field has a value

Question

i have a grid with a checkboxcolumn, all works fine but i would like to only show the checkbox if another field has a certain value. I work with version 3.3.1 but i guess that an example from another version would get me started. If not possible, disabling the checkbox would also be fine. Do i have to do that in a renderer or a listener and how ?

var checkColumn = new Ext.grid.CheckColumn({ 
 header: 'Checklist OK ?',  
 dataIndex: 'checklist_ok',  
 width: 20, 
 align: 'center' 
}); 

cmDiverse = new Ext.grid.ColumnModel({ 
 defaults: {"sortable": true, "menuDisabled":false, "align":"right"}, 
 store: storeDiverse, 
 columns: [ 
   {"id":"id", "header": "id", "hidden": true, "dataIndex": "id", "width": 20}, 
   checkColumn, 
   ... 

gridDiverse = new Ext.ux.grid.livegrid.EditorGridPanel({ 
  id              : "gridDiverse", 
  enableDragDrop  : false, 
  loadMask        : true, 
  clicksToEdit    : 1, 
  layout          :'anchor', 
  cm              : cmDiverse, 
  ....

to you need to toggle between showing and not showing the column in run time? — AMember, May 22 '12 at 10:55
No, the column is visible but some records need a checkbox, others don't — peter, May 22 '12 at 11:15

score 1 · Answer 1 · answered May 22 '12 at 10:59

1

You can extend your Ext.ux.grid.livegrid.EditorGridPanel like this:

Ext.extend(Ext.ux.grid.livegrid.EditorGridPanel,{
   constructor:function(config){
       config = Ext.apply({
           cm: this.createColumnModel()
       },config);
   },
   createColumnModel: function(){
      PUT YOUR LOGIC HERE AND RETURN AN ARRAY OF COLUMNS...
   }
})

answered May 22 '12 at 10:59

AMember

3,037
2
33
64

thanks, but how would this show or hide the checkbox for certain records ? I suppose your approach would work for showing or hiding the entire column.. – peter May 22 '12 at 11:14

score 1 · Accepted Answer · answered May 22 '12 at 13:09

Found it myself, added the following renderer to checkColumn

renderer : function(v, p, record){
  var type3m = record.get('type3m');
  if ((['6M','11e']).indexOf(String(type3m)) != -1){ //if the field type3m contains certain values
    p.css += ' x-grid3-check-col-td'; 
    return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'"> </div>';
  }
}

Extjs: only show checkbox when another field has a value

2 Answers2