How to call a javascript function on column header click in ext js grid?

[ketanmulay]

Hi Team,

I am having a requirement like on click of the column header there should be a call to javascript function which will get other relevant data.

I checked in the api of the column but didn't get anything. How it can be done?

I have one more requirement. The grid should contain data as hyperlink. Which is opening a pop up.
How it can be achieved.

Thanks,
Ketan

[fay]

1. Take a look at the headerclick event for Ext.grid.GridPanel.

2. See the renderer config option for Ext.grid.Column. For example,

function renderLink(value, metaData, record, rowIndex, colIndex, store) 
{
  return '<a href="http://www.extjs.com" target="_blank">' + value + '</a>';
}

var grid = new Ext.grid.GridPanel({
// ...
  columns: [
  // ...
    {header: 'Link', width: 75, sortable: true, renderer: renderLink, dataIndex: 'link'},
  // ...
  ], 

[jay@moduscreate.com]

Hi Team,

I am having a requirement like on click of the column header there should be a call to javascript function which will get other relevant data.

I checked in the api of the column but didn't get anything. How it can be done?

I have one more requirement. The grid should contain data as hyperlink. Which is opening a pop up.
How it can be achieved.

Thanks,
Ketan

When looking at the API, try to read through the events before giving up

[ketanmulay]

Hi Team,

Below is my code...

var grid = new Ext.grid.GridPanel({
        renderTo: 'column-group-grid',
        title: 'Sales By Location',
        width: 1000,
        height: 400,
        store: new Ext.data.ArrayStore({
            fields: fields,
            data: data,
            getGroupState: Ext.emptyFn
        }),
        columns: columns,
        //viewConfig: {
          //  forceFit: true
        //},
        view: new Ext.grid.GroupingView({
            forceFit:true,
            showGroupName: true,
            enableNoGroups:false,
            enableGroupingMenu:true,
            hideGroupedColumn: false
        }),
        listeners: {
                rowclick: function(g, index, ev) {
                alert(index);
            },
            groupclick: function(g, grpField, groupVal, ev) {
                //var rec = g.store.getAt(index);
                //userForm.loadRecord(rec);
                alert("grpField = " + grpField + " groupVal = " + groupVal);
            },
            headerclick: function(g, index, ev) {
                alert("header index = " + index);
            }
        },
        plugins: group
    });

Here the groupclick event is not occurring.
Other 2 events are being fired without any issue.

What is the problem with the 'groupclick'?

Thanks,
Ketan