PDA

View Full Version : Capture keyboard ENTER event on Ext.grid.Panel



andrej_marincic
2 Oct 2013, 1:22 AM
Hello dear sirs/madams

i want to capture keyboard ENTER event when focus is on Ext.grid.Panel.

i did this:



this.control('gridpanel' ,{
render: function(cmp){
this.keyMap = new Ext.util.KeyMap({
target: cmp.getEl(),
binding: [{
key: Ext.EventObject.ENTER,
fn: function(){ alert("Return was pressed"); }
},{
key: "abc",
fn: function(){ alert('a, b or c was pressed'); }
}]
});
}
});


I can capture a,b,c events (so this method partially works) but not ENTER event.

I know that somewhere in component hierarchy some component prevents enter key from bubbling to grid element, but i dont know where.

Can anybody help me please?

Andrej

Farish
2 Oct 2013, 1:30 AM
you can add the following listener to your grid:


listeners:
{
cellkeydown: function(cell, td, cellIndex, record, tr, rowIndex, e, eOpts ) {
if (e.getKey() == e.ENTER)
alert("ENTER pressed");
}
}

Source: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.Panel-event-cellkeydown

andrej_marincic
3 Oct 2013, 12:34 AM
Hi Farish, thank you for your answer.

Yes, your solution works but it also works my solution if i change component selector to "gridpanel > tableview". But i would really like to attach this keypress listener to containing panel because i have lacout: 'card' and i would like to handle events for all containing cards in one place.

Any idea how to let enter event (and other special keys) to bubble to parent panels?

best regards,
Andrej

ettavolt
3 Oct 2013, 9:42 PM
What do you have in other cards?

andrej_marincic
3 Oct 2013, 11:59 PM
Ettavolt,

in first card i have Ext.panel.Grid in second card i have Ext.panel.Panel which holds some form elements.

Event handler is attached to Panel which has card layout and contains 2 elements described above.

This event handler never gets Enter event if focus is on first card which contains Grid. If focus is in second card, than i get Enter event. If instead of grid in first card i add lets say some form elements instead, than Enter event is captured in container card layout panel.

Do you have any ideas maybe, what prevents Enter event from bubbling to container (parent) panel?

best regards,
andrej

Farish
4 Oct 2013, 12:06 AM
I dont have much experience with events. however, i was able to create the following example. it might help you:


Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"[email protected]", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"[email protected]", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"[email protected]", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"[email protected]", "phone":"555-222-1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});

var grid = Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
listeners:
{
cellkeydown: function(cell, td, cellIndex, record, tr, rowIndex, e, eOpts ) {
if (e.getKey() == e.ENTER)
{
alert("ENTER pressed");
this.up("panel").fireEvent("cellkeydown");
}
}
}
});

var panel = Ext.create('Ext.panel.Panel', {
title: 'Hello',
renderTo: Ext.getBody(),
items: [grid],
listeners:
{
cellkeydown: function()
{
alert("Panel cell key down");
}
}
});

the gridpanel fires the cellkeydown event of its parent panel and this is caught by the listener added to the panel. you will see both alerts appearing when you press Enter key on grid.

ettavolt
6 Oct 2013, 10:00 PM
The problem is grid swallowing key event. The only way is to listen for cellkeydown. processItemEvent (http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.view.Table-method-processItemEvent) almost always returns false.