PDA

View Full Version : Adding icon in grid column's header



Romick
2 Dec 2011, 9:36 AM
How can i add icon in grid an attach some action to them? For example i need to close columns.
Something like this:
29765
One of the possible solution can be:
in column definitions add:

{
header: '<img src="image.png" onclick="someaction('col1')" /> Price',
dataIndex: 'col1',
id: 'col1',
width: 30
}
but when i move mouse there apear droup down for sorting and columns visible. And i can't position the image in top right corner of the cell
Second one:

#col1 .x-column-header-inner{
background:url("image.png") no-repeat; !important;
}
but in second example how can i get on which column, user click and catch that in handler?

mitchellsimoens
2 Dec 2011, 9:54 AM
If you can get the grid's header (grid.down('headercontainer')) it has a headerclick event that you can utilize.

slemmon
5 Jan 2012, 10:33 AM
The headercontainer's headerclick event won't bubble up to the gridpanel unless that's set to bubble specifically, correct?

mitchellsimoens
5 Jan 2012, 11:36 AM
correct

EESW
11 Jan 2012, 9:29 AM
Romick,
Did you find a satisfactory solution? Like you, I am including the image in the header with an 'onclick'. As you said, it works, but my problem is that I'm still getting the sort behavior. I've tried extending the column sorting method, but can't determine if the user clicks on the header (and wants to sort the column) or clicks on one of my images(that calls a javascript function).

slemmon
11 Jan 2012, 9:33 AM
A beforeheaderclick event would be nice. Something for evaluation to be able to return false like you can with beforeexpand and beforeitemclick events and whatnot.

Romick
12 Jan 2012, 2:05 AM
No i didn't find a solution. I decided to remove sorting at all. So there are only icon and header text.

slemmon
15 Jan 2012, 3:26 PM
Think I got it. Having the icon swallow the click event after it's rendered prevents the headerclick event.


Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});


Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{
header: '<img class="header-icon" style="vertical-align:middle;margin-bottom:4px;" src="https://translate.zanata.org/zanata/img/silk/help.png"/> Name',
dataIndex: 'name'
},
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
renderTo: Ext.getBody()
, listeners: {
afterrender: function (grid) {
var cols = grid.down('gridcolumn');
Ext.each(cols, function (col) {
var icon = col.getEl().select('.header-icon')
if (icon) { icon.swallowEvent('click', true) }
grid.mon(icon, 'click', function () {
// action for the header icon click event
console.log('header icon click fired');
})
})
}
}
});

Romick
16 Jan 2012, 7:29 AM
Hi i found just another way:



Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});


Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{
header: '<img class="header-icon" style="vertical-align:middle;margin-bottom:4px;" src="https://translate.zanata.org/zanata/img/silk/help.png"/> Name',
dataIndex: 'name'
},
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
renderTo: Ext.getBody()
, listeners: {
afterrender: function (grid) {
var cols = grid.down('gridcolumn');
Ext.each(cols, function (col) {
var icon = col.getEl().select('.header-icon')
if (icon) { icon.swallowEvent('click', true) }
grid.mon(icon, 'click', function () {
// action for the header icon click event
console.log('header icon click fired');
})
})
}
},

listeners: {
'afterrender': function() {
//Get the first header td element
var el = Ext.fly(this.getView().headerCt.getHeaderAtIndex(1)).dom.el;//down('div');
//Wrap the content in another div
el.update('<div>' + el.dom.innerHTML + '</div>');
//Insert the img element
var insertedEl = el.insertFirst({
tag: 'img',
src: 'https://translate.zanata.org/zanata/img/silk/help.png', //Path to your image
style: 'width: 10px; height:10px; cursor:hand; cursor: pointer;'//float: right;
});
insertedEl.on('click', function(){
alert('Hellow world I love you!!!');
// action for the header icon click event
console.log('header icon click fired');
});
el.down('div').setStyle('text-indent', '5px');
}
}
});

EESW
26 Jan 2012, 9:50 AM
Slemmon and Romick,

Swallowing the click event worked perfectly! Thank you so much for your help!!

alex9311
17 Jul 2014, 4:32 PM
here is what I had to do to make it work for ext5:



afterrender: function(grid) {
var icons = Ext.dom.Element.select('.header-icon').elements;
Ext.each(icons, function (icon) {
if(icon){
Ext.get(icon).swallowEvent('click', true);
Ext.get(icon).addListener('click',function(icon){
console.log("header clicked!");
});
}
});
}