Sencha Ext JS4.. [Grid ActionColumn] doesn't display - extjs4

Question

I'm new with sencha js 4. I already followed the instruction from the sencha documentation guide regarding with how to use actioncolumn, but it doesn't display on my grid.
"Where did I miss?. is there anything that I skipped? or is there anything that I didn't included? help.."
I use the kitchenSink sample that sencha provided me. I tried to manipulate it and added an actioncolumn from one of the grids in the kitchenSink sample
Here is my code:
Ext.define('PayrollLite.view.GridExample', {
extend: 'Ext.grid.Panel',
frame: true,
width: 1200,
height: 750,
store: 'Employees',
columns:
[
{ text: 'Employee Code', width: '10%', dataIndex: 'EmployeeCode' },
{ text: 'Last Name', width: '22%', dataIndex: 'LastName'},
{ text: 'First Name', width: '25%', dataIndex: 'FirstName' },
{ text: 'Middle Name', width: '15%', dataIndex: 'MiddleName' },
{ text: 'Position', width: '15%', dataIndex: 'PositionID', sortable: false },
{
xtype:'actioncolumn',
width:50,
items: [{
icon: 'extjs/examples/shared/icons/fam/cog_edit.png', // Use a URL in the icon config
tooltip: 'Edit',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Edit " + rec.get('firstname'));
}
},{
icon: 'extjs/examples/restful/images/delete.png',
tooltip: 'Delete',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Terminate " + rec.get('firstname'));
}
}]
}
]
});

Answer 1

My best guess would be the widths - try setting the other columns to flex widths instead. Like so:
Ext.define('PayrollLite.view.GridExample', {
extend: 'Ext.grid.Panel',
frame: true,
width: 1200,
height: 750,
store: 'Employees',
columns:
[
{ text: 'Employee Code', flex: '1', dataIndex: 'EmployeeCode' },
{ text: 'Last Name', flex: '2.2', dataIndex: 'LastName'},
{ text: 'First Name', flex: '2.5', dataIndex: 'FirstName' },
{ text: 'Middle Name', flex: '1.5', dataIndex: 'MiddleName' },
{ text: 'Position', flex: '1.5', dataIndex: 'PositionID', sortable: false },
{
xtype:'actioncolumn',
width:50,
items: [{
icon: 'extjs/examples/shared/icons/fam/cog_edit.png', // Use a URL in the icon config
tooltip: 'Edit',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Edit " + rec.get('firstname'));
}
},{
icon: 'extjs/examples/restful/images/delete.png',
tooltip: 'Delete',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Terminate " + rec.get('firstname'));
}
}]
}
]
});