PDA

View Full Version : changing icons / actions in an action column



gezb
11 Jun 2014, 12:59 AM
I have a grid which contains a column for message status, and an action column ( amongst others ). I am trying to change the icon / action in the action column based on the value in the status column. Please see the code below, hopefully you will be able to understand what I am trying to do. I am using extjs 4 and the MVC approach. Any help or advise would be appreciated. Thank you in advance.




Ext.define('Contact.view.application.MessageList', {
extend: 'Ext.grid.Panel',
alias: 'widget.MessageGrid',

store: 'application.MessageList',

columnLines: true,
sortableColumns: false,
enableColumnHide: false,
viewConfig: {
stripeRows: true
},
columns: [
{
text: 'id',
dataIndex: 'msg_id',
hidden: true
},
{ xtype: 'actioncolumn',
text: 'Action',
width: 50,
draggable: false,
items: [
{
iconCls: 'makeGood',
tooltip: 'Change to a Good Response',
itemId: 'makeGood',
handler: function( view, rowIndex, colIndex, item, e, record, row ) {
this.fireEvent('makeGoodClick', view, rowIndex, colIndex, item, e);
}
},
{
iconCls: 'resendMsg',
tooltip: 'Resend tme Message',
itemId: 'resendMsg',
handler: function( view, rowIndex, colIndex, item, e, record, row ) {
this.fireEvent('resendMsgClick', view, rowIndex, colIndex, item, e);
}
}
],
/* renderer: function (value, meta, record, row, column, store, view) {
if ( record.data.msg_status == 'bad' ) {
show itemId makeGood
}
else if ( record.data.msg_status == 'failed' ) {
show itemId resendMsg
}
else {
hide the icon in the action column
}
} */
},
{
text: 'Status', //translations.clientName,
dataIndex: 'msg_status',
draggable: false,
width: 70,
renderer: function( value, metadata ) {
metadata.tdCls = value
}
}
]
})

greg.barry
12 Jun 2014, 1:25 PM
This thread has a similar request with a potential solution residing around iconCls:
http://www.sencha.com/forum/showthread.php?149763-How-to-Change-action-column-icon-dynamically

Thanks!
Greg

gezb
13 Jun 2014, 8:50 AM
Thanks for your reply Greg. I had a look at the post you referred to and I got a lot closer to what I wanted but still not correct. I could hide the iconCls in the column but the mouse pointer always changed to a select pointer when hovering over the empty cell, or I could display the appropriate iconCls but then all the cells would fire the same fireEvent.



Ext.define('Contact.view.application.MessageList', {
extend: 'Ext.grid.Panel',
alias: 'widget.MessageGrid',

store: 'application.MessageList',

columnLines: true,
sortableColumns: false,
enableColumnHide: false,
viewConfig: {
stripeRows: true
},
columns: [
{
text: 'id',
dataIndex: 'msg_id',
hidden: true
},
{
xtype: 'actioncolumn',
text: 'Action',
width: 50,
draggable: false,
align: 'center',
renderer : function( value, meta, record, row, column, store, view ) {
if ( record.get('msg_status') == 'bad' ) {
this.iconCls = 'makeGood';
this.tooltip = 'Change to a Good Response';
this.handler = function( view, rowIndex, colIndex, item, e, record, row ) {
this.fireEvent('makeGoodClick', view, rowIndex, colIndex, item, e);
}
}
else if ( record.get('msg_status') == 'fail' ) {
this.iconCls = 'makeGood';
this.tooltip = 'Change to a Good Response';
this.handler = function( view, rowIndex, colIndex, item, e, record, row ) {
this.fireEvent('makeGoodClick', view, rowIndex, colIndex, item, e);
}
}
else {
this.iconCls = '';
this.tooltip = '';
this.handler = function( view, rowIndex, colIndex, item, e, record, row ) {
}
}
}
}
]
});





In the end I decided to use the isDisabled function as below.



Ext.define('Contact.view.application.MessageList', {
extend: 'Ext.grid.Panel',
alias: 'widget.MessageGrid',

store: 'application.MessageList',

columnLines: true,
sortableColumns: false,
enableColumnHide: false,
viewConfig: {
stripeRows: true
},

columns: [
{
text: 'id',
dataIndex: 'msg_id',
hidden: true
},
{
xtype: 'actioncolumn',
text: 'Action',
width: 50,
draggable: false,
align: 'center',
items: [
{
iconCls: 'makeGood',
tooltip: 'Change to a Good Response',
itemId: 'makeGood',
hidden: true,
handler: function( view, rowIndex, colIndex, item, e, record, row ) {
this.fireEvent('makeGoodClick', view, rowIndex, colIndex, item, e);
},
isDisabled: function( view, rowIndex, colIndex, item, record ) {
return record.get('msg_status') == 'bad' ? false : true;
}
},
{
iconCls: 'send_mail',
tooltip: 'Resend the Message',
itemId: 'resendMsg',
handler: function( view, rowIndex, colIndex, item, e, record, row ) {
this.fireEvent('resendMsgClick', view, rowIndex, colIndex, item, e);
},
isDisabled: function( view, rowIndex, colIndex, item, record ) {
return record.get('msg_status') == 'fail' ? false : true;
}
}
]
}
]
});