How to activate listeners in renderer function in a grid column

Question

I am using extjs 4 and I have a grid which shows a field name Approval. Here I have showed checkbox that will be checked when the grid is loaded if the value is true. But if the dataIndex value is fault only the checkbox will appear. Now I want that if I click on unchecked checkbox it will do a action using listeners. But I am not being able to do it. Can anyone please help me on this ? My codes are given below :

{
   text: 'Approval',
   dataIndex: 'approve',
   flex: 1,
   align: 'left',
   renderer: function(value, metaData, record, row, col, store, gridView){
    if(value == true)
      {
        return '<input type="checkbox" checked="true" />';
      }else{
        return '<input type = "checkbox"  />';
         listeners: {
            this.approve();
          }
       }
     }   
  }

approve: function(){
        alert('hi');
    }

Answer 1

Old answer

The checkbox has a change listener which will get fired after the value has changed.

{
        xtype     : 'checkbox'
        boxLabel  : 'This is my checkbox',
        name      : 'mycheckbox',
        inputValue: true,
        listeners : {
              change: function(cbx, newValue, oldValue){
                     me.approve();
              }
        }
}

Note that you can't use this inside the listener because the function gets called inside another scope.

Edit:

Start using a Ext.ux.CheckColumn on your grid.

Now you can use:

{ 
    xtype: 'checkcolumn',
    text: 'Approval',
    dataIndex: 'approve',
    flex: 1,
    align: 'left',
    sortable: false,
    listeners:{
        checkchange:function(cc,ix,isChecked){
            alert(isChecked);
        }
    }
}

Answer 2

What you are trying to archive is not possible out of the box.

I guess you want to display the checkbox all the time? Otherwise the CellEditor Plugin is already what you are looking for.

But it should anyway the point to start (I guess). Here is a example code the uses ExtJS classes & images to display a sort of fake combo in a cell along with a celleditior. There is one think you still have to fix; you need to override the cellcontent before the edits starts cause the celleditor seems to remove only default types.

Way going this way? Of course you could modify the checkbox with a unique id and fetch the Ext.Element for it which would now enable you to register events. But that approach has one downside, you need to care about render time otherwise your combos does not exist when you are trying to fetch it. Therefore I recommend you this approach. It you be quite easy to wipe the image before the rendering starts.

Ext.create('Ext.data.Store', {
    storeId:'simpsonsStore',
    fields:['name', 'email', 'phone'],
    data:{'items':[
        {"name":"Lisa", "email":"[email protected]", "phone":true},
        {"name":"Bart", "email":"[email protected]", "phone":false},
        {"name":"Homer", "email":"[email protected]", "phone":true},
        {"name":"Marge", "email":"[email protected]", "phone":true}
    ]},
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [
        {header: 'Name',  dataIndex: 'name', editor: 'textfield'},
        {header: 'Email', dataIndex: 'email', flex:1},
        {header: 'Phone', dataIndex: 'phone',
         editor: { xtype: 'checkbox', inputValue: 'true', uncheckedValue: 'false' }, renderer: function(value){ 
             return value ? '<span class="x-form-cb-checked"><div class="x-form-checkbox"></div></span>' : '<div class="x-form-checkbox"></div>';  
         }
  }
    ],
    selType: 'cellmodel',
    plugins: [
        Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1
        })
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});

Here's the JSFiddle