PDA

View Full Version : Show or hide icon on specific action columns



K4T
3 May 2012, 1:42 AM
Hi. I have grid panel with 3 action columns - each with a single icon in the middle. Two of those columns have default css class .x-hidden, which hides icon inside action column. You can see it on image below.


34813


When you move the mouse on the record, it show a previously hidden icons (in a row), which re-hide it after leaving the mouse cursor. The problem arises when hiding icons - icons disappear from all 3 action columns, not just the last 2. This is because that all 3 columns are action columns, and show / hide icons function I realize by looking for all elements with class .x-action-col-icon. So that solution will affect all columns with that class ;/ I dont know how to retrieve only two last action columns. Here is methods I`m using to show/hide icons:


showActions: function(view, record, node, rowIndex, e) {
var icons = Ext.DomQuery.select('.x-action-col-icon', node);


Ext.each(icons, function(icon){
Ext.get(icon).removeCls('x-hidden'); //show icon
});
},


hideActions: function(view, record, node, rowIndex, e) {
var icons = Ext.DomQuery.select('.x-action-col-icon', node);


Ext.each(icons, function(icon){
Ext.get(icon).addCls('x-hidden'); //hide icon
});
},


Could someone tell me how to distinguish between various columns? So that the methods affects only specific action columns?


Action columns configuration:


buildPriorityColumn: function() {
return {
xtype: 'actioncolumn',
width: 24,
sortable: false,
align: 'center',
cls: 'column-header-icon priority-icon',
icon: 'public/images/icons/priority_normal.png'

};
},


buildEditTaskColumn: function() {
return {
xtype: 'actioncolumn',
width: 24,
sortable: false,
align: 'center',
cls: 'column-header-icon edit-task-icon',
iconCls: 'x-hidden',
icon: 'public/images/icons/edit.png'
};
},


buildDeleteTaskColumn: function() {
return {
xtype: 'actioncolumn',
width: 24,
sortable: false,
align: 'center',
cls: 'column-header-icon delete-icon',
iconCls: 'x-hidden',
icon: 'public/images/icons/delete.png'
};
},

scottmartin
3 May 2012, 7:32 AM
Have a look at getClass for conditional icon display:



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



Regards,
Scott.

K4T
3 May 2012, 9:50 AM
Thank you for hint! Thanks to you I found much simpler solution:

Just add can-be-hidden class to IconCls property of action columns which you want to be affected:


buildEditTaskColumn: function() {
return {
xtype: 'actioncolumn',
width: 24,
sortable: false,
align: 'center',
cls: 'column-header-icon edit-task-icon',
iconCls: 'x-hidden can-be-hidden',
icon: 'public/images/icons/edit.png'
};
},



showActions: function(view, task, node, rowIndex, e) {
var icons = Ext.DomQuery.select('.can-be-hidden', node);


Ext.each(icons, function(icon){
Ext.get(icon).removeCls('x-hidden');
});
},


hideActions: function(view, task, node, rowIndex, e) {
var icons = Ext.DomQuery.select('.can-be-hidden', node);


Ext.each(icons, function(icon){
Ext.get(icon).addCls('x-hidden');
});
},