PDA

View Full Version : KeyMap triggers with IE9 but not with Firefox or Chrome



sbhanderi
23 Aug 2012, 8:14 AM
The code snippet is as follows :-



UCC.view.PreviewControlPanel.superclass.constructor.call(this, {
layout : 'column',
// baseCls: 'ucc-callcontrol-panel',
hidden : true,
border : false,
items : [ this.btnAccept, this.btnDecline, this.progressPanel ],
listeners : {
render : {
fn : function(item, e) {

/*
document.onkeydown = function(event) {
var whatispressed = event.keyCode;
if (event.keyCode == 78)
{

this._onBtnAccept();
alert ("n space hit");
}


var qaz = "what is pressed=" + whatispressed;
alert(qaz);
};
*/

if (this.shortKeyAccept) {
//var big_string = "ShortKey=" + this.shortKeyAccept + " " + this.shortKeyReject;
//alert (big_string);

this.shortcutstoredvar = new Ext.KeyMap(item.el, [ {
key : this.shortKeyAccept,
fn : function () {
alert ("shortkey space hit");
this._onBtnAccept();
},
scope : this,
//stopEvent : true
},{
key : 'm',
fn : function () {alert ("m hit"); },
//scope : this,
//stopEvent : true
},{
key : this.shortKeyReject,
fn : this._onBtnDecline,
scope : this,
//stopEvent : true
} ]
 );

this.focus(false, 1000);

}
},
scope : this
},
// During testing found that afterrender focus is
// needed on some browsers.
afterrender : function(field) {
//field.focus('', 100);
//alert ("Afterrender");
//field.focus();
field.focus(false, 500);
}
}
});


So the problem is the key press of 'm' works with IE9 but not with Firefox and Chrome. Any Ideas

scottmartin
23 Aug 2012, 6:52 PM
The following works fine in all browsers:



Ext.onReady(function(){
// sample static data for the store
var myData = [
['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'],
['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'],
['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'],
['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am'],
['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am'],
['Verizon Communications', 35.57, 0.39, 1.11, '9/1 12:00am'],
['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am']
];

// create the data store
var store = new Ext.data.ArrayStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
});

// manually load local data
store.loadData(myData);

// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{
id :'company',
header : 'Company',
width : 160,
sortable : true,
dataIndex: 'company'
},
{
header : 'Price',
width : 75,
sortable : true,
renderer : 'usMoney',
dataIndex: 'price'
},
{
header : 'Change',
width : 75,
sortable : true,
dataIndex: 'change'
},
{
header : '% Change',
width : 75,
sortable : true,
dataIndex: 'pctChange'
},
{
header : 'Last Updated',
width : 85,
sortable : true,
renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
}
],
stripeRows: true,
autoExpandColumn: 'company',
height: 350,
width: 600,
title: 'Array Grid',
renderTo: Ext.getBody()
});


var map = new Ext.KeyMap(grid.getEl(), [
{
key: [10,13],
fn: function(){ alert("Return was pressed"); }
}, {
key: "abc",
fn: function(){ alert('a, b or c was pressed'); }
}
]);

});


Scott.

sbhanderi
24 Aug 2012, 3:22 AM
I had cut and pasted the code you had provided.
I found the it worked on IE9, but guess what, not in Firefox. (version 14.0.1)
and extjs version being used is 3.4.0

scottmartin
24 Aug 2012, 7:32 AM
I found the it worked on IE9, but guess what, not in Firefox. (version 14.0.1)

hmm..

I tested this on 14.0.1 using mac/linux/win and it tested fine in all cases using 3.4.0 / 3.4.1

Scott.

sbhanderi
24 Aug 2012, 8:07 AM
hmm..

I tested this on 14.0.1 using mac/linux/win and it tested fine in all cases using 3.4.0 / 3.4.1

Scott.
Thanks scott for replying back quickly. I was still testing what I was trying to say, and I had not explained myself well at all previously, so many apologies for that.
In my original code snippet I had a panel with embedded panels within it.
These panels have buttons to which I wanted have hot keys activated as soon as the panel with the keys is painted.
So unlike the your kindly supplied example I am using panel rather than grid.
I have created a working snippet which is shown below, similar to your example :-


Ext.onReady(function(){
this.btnHello = new Ext.Button({
text: "hello",
listeners : {
click: {
fn: function () { alert( "hello clicked"); },
scope: this
}
},
disabled : false
});

this.btnBye = new Ext.Button({
text: "bye",
listeners : {
click: {
fn: function () { alert( "bye clicked"); },
scope: this
}
},
disabled : false
});

// create the panel
var mypanel = new Ext.Panel({
height: 350,
width: 600,
title: 'my panel',
items : [ this.btnHello, this.btnBye ],
border: false,
region: 'center',
layout: (this.mode == 'single' ? 'fit' : null),
autoScroll: false,
renderTo: Ext.getBody(),
listeners : {
render : {
fn : function(item, e) { this.focus(false, 1000); }
},
afterrender : {
fn : function(field) { field.focus(false, 1000);}
}
}
});

var map = new Ext.KeyMap(mypanel.getEl(), [
{
key: [10,13],
fn: function(){ alert("Return was pressed"); }
}, {
key: "a",
fn: function(){ alert('a was pressed'); }
}
]);
});


Firefox
You should be able to see that if you mouse click anywhere, then press the keyboard key 'a', the alert message should pop, and I found it does not.
If you press on of the button keys first, then after keyboard key 'a' is pressed, then the alert is popped.

IE9
The 'a' alert seems to pop once the browser window is in focus.

Scott that is what I meant, so keypress input works when the component is a grid, but I cannot get it to work as a panel.
I'm sure it must be something I am doing code wise, but I cannot see what I am doing wrong, so suggestions will be appreciated.
I tested this on IIS 7 webserver, Windows 7, IE9, and Firefox, with extjs 3.4.0.

sbhanderi
24 Aug 2012, 8:11 AM
In my main code I do have a progress panel after the last key.