PDA

View Full Version : [CLOSED] Disable KeyMap Events



softmachine2011
Jun 19, 2012, 3:08 PM
Hi,

In Ext.NET 1.x, to disable KeyMap events:



toggleKeyDownEvents: function (disabled, listenerArray) {

var body = Ext.isGecko ? Ext.getDoc() : Ext.getBody();
var keyDownListeners = Ext.EventManager.getListeners(body, "keydown");

if (disabled == true) {
if (!Ext.isEmpty(keyDownListeners)) {
listenerArray.splice(0, listenerArray.length);

do {
var listener = keyDownListeners[0];
var keyEvent = listener[2];
listenerArray.push(keyEvent);
keyEvent.setDisabled(true);

} while (keyDownListeners.length != 0);
}
}
else {
for (var i = 0; i < listenerArray.length; i++)
listenerArray[i].setDisabled(false);
listenerArray.splice(0, listenerArray.length);
}
}


How I can do the same in Ext.NET2.x?

Thanks,

Daniil
Jun 19, 2012, 3:34 PM
Hi,

I am afraid I don't understand the requirement well reading the description and looking at the code.

Please provide more details about the initial requirement.


to disable KeyMap events


The KeyMap class has the disable function.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.util.KeyMap-method-disable

softmachine2011
Jun 21, 2012, 6:47 AM
All I wanna do is when the user use a shortcut key, disable all shortcut key to prevent multiple requests.

For example I have configured [Ctrl+S] to save information. If the user press it repeatly, it sends multiple requests to the server.
With this code I enable/disable all keymaps controlling actions that could do the user.

Is there any simple way to do it?

Daniil
Jun 21, 2012, 10:19 AM
Hi,

This is how I would implement the requirement.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
[DirectMethod(ShowMask = true)]
public void CtrlM()
{
System.Threading.Thread.Sleep(2000); //to demonstrate
X.Msg.Alert("Ctrl + M", "Ctrl + M has been pressed").Show();
}

[DirectMethod(ShowMask = true)]
public void CtrlY()
{
System.Threading.Thread.Sleep(2000); //to demonstrate
X.Msg.Alert("Ctrl + Y", "Ctrl + Y has been pressed").Show();
}
</script>

<!DOCTYPE>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:KeyMap
ID="KeyMap1"
runat="server"
Target="={Ext.isGecko ? Ext.getDoc() : Ext.getBody()}">
<ext:KeyBinding Ctrl="true">
<Keys>
<ext:Key Code="M" />
</Keys>
<Listeners>
<Event Handler="App.KeyMap1.disable();
App.direct.CtrlM({
success : function () {
App.KeyMap1.enable();
}
})" />
</Listeners>
</ext:KeyBinding>
<ext:KeyBinding Ctrl="true">
<Keys>
<ext:Key Code="Y" />
</Keys>
<Listeners>
<Event Handler="App.KeyMap1.disable();
App.direct.CtrlY({
success : function () {
App.KeyMap1.enable();
}
})" />
</Listeners>
</ext:KeyBinding>
</ext:KeyMap>
</form>
</body>
</html>


Also I would avoid to override browser short-keys.

softmachine2011
Jun 21, 2012, 10:29 AM
Yes in your example, you disable only the pressed key and enable it again when the event finishes.

But I want to disable all keys, not only the pressed. Is it posible?

PD: In all active keymaps.

Daniil
Jun 21, 2012, 1:50 PM
Hi,

Maybe just to disable all KeyMaps?

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>

<script type="text/javascript">
var disable = function () {
App.KeyMap1.disable();
App.KeyMap2.disable();
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:KeyMap
ID="KeyMap1"
runat="server"
Target="={Ext.isGecko ? Ext.getDoc() : Ext.getBody()}">
<ext:KeyBinding>
<Keys>
<ext:Key Code="S" />
</Keys>
<Listeners>
<Event Handler="alert('S');" />
</Listeners>
</ext:KeyBinding>
</ext:KeyMap>

<ext:KeyMap
ID="KeyMap2"
runat="server"
Target="={Ext.isGecko ? Ext.getDoc() : Ext.getBody()}">
<ext:KeyBinding>
<Keys>
<ext:Key Code="D" />
</Keys>
<Listeners>
<Event Handler="alert('D');" />
</Listeners>
</ext:KeyBinding>
</ext:KeyMap>

<ext:Button runat="server" Text="Disable KeyMaps">
<Listeners>
<Click Fn="disable" />
</Listeners>
</ext:Button>
</form>
</body>
</html>

softmachine2011
Jun 21, 2012, 3:26 PM
Well I was doing something similar but dynamic to obtain all keymaps in a page like:



var body = customExt.isGecko ? customExt.getDoc() : customExt.getBody();
var keyDownListeners = customExt.EventManager.getEventListenerCache(body, "keydown");

if (disabled == true) {
if (!Ext.isEmpty(keyDownListeners)) {
listenerArray.splice(0, listenerArray.length);

for (var i = keyDownListeners.length - 1; i >= 0; i--) {
var listener = keyDownListeners[i];
var keyEvent = listener.scope;

if (keyEvent.alternateClassName === 'Ext.KeyMap') {
listenerArray.push(keyEvent);
keyEvent.disable();
}
}
}
}
else {
for (var i = 0; i < listenerArray.length; i++)
listenerArray[i].enable();

listenerArray.splice(0, listenerArray.length);
}


And finally it works, if you have any optimization would be welcome.

Thanks!

Daniil
Jun 21, 2012, 11:15 PM
Interesting trick! I have spent some time to understand what you have done:)

Though I would achieve the requirement in a different way registering all keyMaps on time of its creation.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>

<script type="text/javascript">
Ext.bodyOrDocKeyMaps = [];

Ext.util.KeyMap.prototype.constructor = Ext.Function.createSequence(Ext.util.KeyMap.protot ype.constructor, function (config) {
var bodyOrDoc = Ext.isGecko ? Ext.getDoc() : Ext.getBody();

if (this.target === bodyOrDoc) {
Ext.bodyOrDocKeyMaps.push(this);
}
});

var setDisabled = function (disabled) {
Ext.each(Ext.bodyOrDocKeyMaps, function (keyMap) {
keyMap[disabled ? "disable" : "enable"]();
});
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:KeyMap
runat="server"
Target="={Ext.isGecko ? Ext.getDoc() : Ext.getBody()}">
<ext:KeyBinding>
<Keys>
<ext:Key Code="S" />
</Keys>
<Listeners>
<Event Handler="alert('S');" />
</Listeners>
</ext:KeyBinding>
</ext:KeyMap>

<ext:KeyMap
runat="server"
Target="={Ext.isGecko ? Ext.getDoc() : Ext.getBody()}">
<ext:KeyBinding>
<Keys>
<ext:Key Code="D" />
</Keys>
<Listeners>
<Event Handler="alert('D');" />
</Listeners>
</ext:KeyBinding>
</ext:KeyMap>

<ext:Button runat="server" Text="Disable KeyMaps">
<Listeners>
<Click Handler="setDisabled(true);" />
</Listeners>
</ext:Button>

<ext:Button runat="server" Text="Enable KeyMaps">
<Listeners>
<Click Handler="setDisabled(false);" />
</Listeners>
</ext:Button>
</form>
</body>
</html>

Seems to look more elegant.

softmachine2011
Jun 22, 2012, 6:43 AM
Ok thanks for your code.