PDA

View Full Version : Help: ActionColumn



papasilo
8 Oct 2012, 5:02 PM
Hi!

I'm new with Sencha JS 4. I have some trouble with regarding to actionColumn.. it followed the instruction in the Documentation but it doesn't display the controls that I added in the actionColumn. Here is my code:


Ext.define('PayrollLite.view.masterFiles.EmployeeList', {
extend: 'PayrollLite.view.MainScreenView',
requires:
[
'Ext.grid.Panel',
'Ext.grid.ActionColumn'
],
xtype: 'employeeList',


items:
[
{
xtype: 'grid',

frame: true,
width: 1200,
height: 750,

store: 'Employees',

columns:
[
{ text: 'Employee Code', width: '10%', dataIndex: 'EmployeeCode' },
{ text: 'Last Name', width: '25%', dataIndex: 'LastName', sortable: true },
{ text: 'First Name', width: '25%', dataIndex: 'FirstName', sortable: true },
{ text: 'Middle Name', width: '15%', dataIndex: 'MiddleName', sortable: false },
{ text: 'Position', width: '15%', dataIndex: 'PositionID', sortable: false },
{


xtype:'actioncolumn',
width: '10%',
text: 'Controls',
items:
[
{
text: 'Edit',
tooltip: 'Edit Employee',
handler:function(grid, rowIndex, colIndex)
{
var employee = grid.getStore().getAt(rowIndex);
var review = reviewStore.findRecord('employee_id', employee.get('id'));
var win = new App.ReviewWindow({hidden:true});
var form = win.down('form').getForm();
form.loadRecord(employee);
form.loadRecord(review);
win.show();
}
},
{
text: 'Delete',
tooltip: 'Delete Employee',
width: 75,
handler: function(grid, rowIndex, colIndex)
{
Ext.Msg.confirm('Remove Employee?', 'Are you sure you want to remove this employee?',
function(choice)
{
if(choice === 'yes')
{
var reviewStore = Ext.data.StoreMgr.lookup('reviewStore');

var employee = grid.getStore().getAt(rowIndex);
var reviewIndex = reviewStore.find('employee_id', employee.get('id'));
reviewStore.removeAt(reviewIndex);
grid.getStore().removeAt(rowIndex);
}
}
);
}
}
]
}
]
}
]
});





:-| really need your help.. Thanks in advance

Tim Toady
8 Oct 2012, 5:20 PM
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.column.Action-cfg-items

The configs that go in the items array for the action column have a property called icon that you are not setting. Also, there is no text property, which you are setting.

papasilo
8 Oct 2012, 5:24 PM
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.column.Action-cfg-items

The configs that go in the items array for the action column have a property called icon that you are not setting. Also, there is no text property, which you are setting.

Hi! Thanks for the quick reply.. I think there is a text config in actionColumn, though even i change it to icon.. still no images appear to my grid :(

scottmartin
9 Oct 2012, 5:20 AM
Have you added the getClass to your column:



getClass: function(v, meta, rec) {
if (rec.get('change') < 0) {
this.items[1].tooltip = 'Hold stock';
return 'alert-col'; // css rule
} else {
this.items[1].tooltip = 'Buy stock';
return 'buy-col';
}
},


Scott

Tim Toady
9 Oct 2012, 5:38 AM
Hi! Thanks for the quick reply.. I think there is a text config in actionColumn, though even i change it to icon.. still no images appear to my grid :(

There is a text config on the action column itself. This is the header for the entire column. I am referring to the items within the items array. You can also use getClass as Scott stated.