View Full Version : Extending ExtJS Grid Column to Enable listener for extjs column header

23 May 2016, 9:26 PM
Hi I have ExtJs Grid
My Sample Code is Below, I am using version 3.2.x

Ext.onReady(function(){ // create the Data Store var store = new Ext.data.Store({ // load using HTTP url: 'sheldon.xml', // the return will be XML, so lets set up a reader reader: new Ext.data.XmlReader({ // records will have an "Item" tag record: 'Item', id: 'ASIN', totalRecords: '@total' }, [ // set up the fields mapping into the xml doc // The first needs mapping, the others are very basic {name: 'Author', mapping: 'ItemAttributes > Author'}, 'Title', 'Manufacturer', 'ProductGroup' ]) }); // create the grid var grid = new Ext.grid.GridPanel({ store: store, columns: [ {header: "Author", width: 120, dataIndex: 'Author', sortable: true}, {header: "Title", width: 180, dataIndex: 'Title', sortable: true}, {header: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true}, {header: "Product Group", width: 100, dataIndex: 'ProductGroup', sortable: true} ], renderTo:'example-grid', width:540, height:200 }); store.load();});

I wanted to add listener on all column grid header.

For Example

columns: [ {header: "Author", width: 120, dataIndex: 'Author',listeners: { mouseover: function(e, t) {
var rowIndex = this.getView().findRowIndex(t);
var colIndex = this.getView().findCellIndex(t);
alert("mouse over:"+rowIndex+" " +colIndex);

}, sortable: true}, {header: "Title", width: 180, dataIndex: 'Title', sortable: true},

By added the code which is bold text is not making any impact. Since there is no support for listener 3.2 X version of ExtJs column header.

Can anyone Pls me on this?

I need to have listener for ExtjS3.2x Column header.

Thanks in Advance,


Gary Schlosberg
24 May 2016, 5:41 AM
Yes, it looks like the 4 events for a grid column in 3.x are click based (click, dblclick, contextmenu and mousedown). I'm not sure that there is an easy way to do this. What is the use case?