PHP Code:
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');
}
}
});