PDA

View Full Version : Key event bubbling issues in tab panels within Form panel



sriram139
1 Feb 2013, 12:26 PM
Scenario:
Consider 2 tab panels within a Form panel.
Add a key map (say for key 'T') to the Form panel.
Once we click on tab headers and press key 'T' or 't' it alerts the message (Key event - T) provided in the handler of the key map.
On the other hand, it does not display that alert when we press the same key after clicking on the body (within tab panel) or after clicking on the header of the Form panel (Simple Form).

Question:
How I can ensure that the key mapped to the form panel triggers from any where within it?

Here is the code:



Ext.onReady(function ()
{
Ext.create('Ext.form.Panel',
{
title: 'Simple Form',
bodyPadding: 5,
width: 350,
layout: 'anchor',
defaults: {
anchor: '100%'
},

items:
[
{
xtype: 'tabpanel',
items:
[
{
title:'tab1',
items:
[
{
title: 'tab1 inner1',
items:
[
{
xtype: 'displayfield',
fieldLabel: 'Field1',
value: 'Value1'
}
]
},
{
title: 'tab1 inner2',
items:
[
{
xtype: 'displayfield',
fieldLabel: 'Field2',
value: 'Value2'
}
]
}
]
},
{
title:'tab2',
items:
[
{
title: 'tab2 inner1',
items:
[
{
xtype: 'displayfield',
fieldLabel: 'Field3',
value: 'Value3'
}
]
},
{
title: 'tab2 inner2',
items:
[
{
xtype: 'displayfield',
fieldLabel: 'Field4',
value: 'Value4'
}
]
}
]
}
]
}] ,
renderTo: Ext.getBody()
}).getEl().addKeyMap(
{
key: Ext.EventObject.T,
fn: function()
{
alert('Key event - T');
}
});
});


Thanks,
Sriram