Question

I have a button in an ext column which when clicked should sent a post request through ajax.
I am not sure how to go about it as I am pretty new to Ext.

Following is my button renderer:

statusRenderer: function(value, metaData, record, rowIndex, colIndex, store) {
  var html = '<span style="color:red;">' + value + '</span>';
  html += '&nbsp;<button type="button" data-id=' + record.data.ad_id + '>Reaudit</input>'
  return html;
}

Please point me how to:
1. Setup the click handler
2. Setup the store for doing an ajax post request
3. Updating the grid row on a successful response.

Thanks!

Answer 1

This is how i ended up doing it:

AuditStatusGrid.js

initComponent: function() {
  this.columns = [
    ...
    { header: 'Status', dataIndex: 'audit_status', renderer: me.statusRenderer, width: 130 },
    ...
  ];
}


statusRenderer: function(value, metaData, record, rowIndex, colIndex, store) {
if (value == 'Rejected') {
  var id = Ext.id();
  Ext.defer(function () {
    Ext.widget('button', {
      renderTo: id,
      text: 'Reaudit',
      width: 70,
      handler: function () {
        console.log(record.get('id'));
        record.set('audit_status', 'Reaudit');
        store.save();
      }
    });
  }, 50);
  return Ext.String.format('<div id="{0}"><span style="color:red;">Rejected</span>&nbsp;</div>', id);
}
return value;
}

AuditStatusStore.js

...
proxy: {
  root: 'json',
  type: 'rest',
  url : '/audit_statuses'
},