Handle Header Tap of a Grouped List

There was a Menu that I was displaying, which had various options. The Menu had sub-items which were grouped. I had offcourse used the grouped list for the Menu.

However, also, the group header tap had to be handled, which had some view to be shown.
The Sencha touch list has an itemtap event that can be used to handle taps on each item, but there is no event that will handle the tap on Group Header.

I used the following to achieve it:
{
  xtype:'list',
  store:'SomeStore',
  grouped:true,
  listeners:{
   element:'element',
   delegate:'div.x-list-header',
   tap:function(e){
    var header = e.getTarget('div.x-list-header',3,true),
    scroller = e.getTarget('div.x-scroll-scroller',4,true),
    headers = scroller.query('div.x-list-header');
    index = header ? headers.indexOf(header.dom):false,
    store = this.getStore(),
    groups = store.getGroups(),
    group = groups[index];
    this.fireEvent('headerTap',group,e);
   }
 }
}

Now, you can add a listener on the list in the controller to listen to the headerTap event.