Adding buttons to grid rows with action columns

4. We can add multiple icons to an actioncolumn by defining the actions in the
Ext.grid.column.Action's items collection. Each action will have its own
click handler:
Ext.create('Ext.grid.Panel', {
...
columns: [
...
{
xtype: 'actioncolumn',
items: [{
icon: 'icons/pencil.png',
tooltip: 'Edit',
handler: function(grid, rowIndex, colIndex){
alert('Show "Edit Invoice" component');
}
}, {
icon: 'icons/minus-circle.png',
tooltip: 'Delete',
handler: function(grid, rowIndex, colIndex){
Ext.Msg.show({
title: 'Delete Invoice',
msg: 'Confirm deleting this invoice',
buttons: Ext.Msg.YESNO,
icon: Ext.Msg.QUESTION
});
}
}, {
icon: 'icons/money.png',
tooltip: 'Enter Payment',
handler: function(grid, rowIndex, colIndex){
Ext.Msg.prompt('Enter Payment', 'Payment
Amount:');
}
}]
}]
...
});

Ext.create('Ext.grid.Panel', {
...
columns: [{
xtype: 'actioncolumn',
hideable: false,
items: [{
getClass: function(v, meta, rec){
switch (rec.get('Status')) {
case 'Paid':
this.items[3].tooltip = 'This invoice has
been paid.';
return 'paid';
default:
this.items[3].tooltip = 'This invoice has
not yet been paid.';
return 'not-paid';
}
},
handler: function(grid, rowIndex, colIndex){
var rec = grid.getStore().getAt(rowIndex);
alert('Status: ' + rec.get('Status'));
}
}]
}],
...
});