PDA

View Full Version : KeyMap problem


jihoon
10 Aug 2007, 12:28 AM
I have found some problem with KeyMap.

First QuickTips was show and hide.
Then KeyMap was freeze after QuickTips hide.


This problem starting with Ext-1.1-beta2 to Ext-1.1.
mystix
10 Aug 2007, 12:40 AM
Then KeyMap was freeze after QuickTips hide.

:-/ what do you mean by "freeze"?

please post a simplified test case.
jihoon
10 Aug 2007, 5:38 AM
please post a simplified test case.

Here's simple test case. :)


<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<link rel="stylesheet" type="text/css" href="/library/ext-1.1/resources/css/ext-all.css" />
<script type="text/javascript" src="/library/ext-1.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/library/ext-1.1/ext-all.js"></script>

<script>
Ext.QuickTips.init();
var qtipTpl = new Ext.Template(
'<div>'+
'<b>QuickTip</b>' +
'</div>'
);
qtipTpl.compile();

function init() {
var keyMap = new Ext.KeyMap(document, [
{
key: 13,
fn: function(){ alert('Enter key pressed.'); }
}
]);

var tree = new Ext.tree.TreePanel("view", {
animate:true,
enableDD:true,
containerScroll: true,
ddGroup: 'ddGroup',
rootVisible:false
});
var root = new Ext.tree.TreeNode({
text: 'Node',
allowDrag:false,
allowDrop:false
});
tree.setRootNode(root);

root.appendChild(
new Ext.tree.TreeNode({text:'Node 1', leaf: true, qtip: qtipTpl.applyTemplate()}),
new Ext.tree.TreeNode({text:'Node 2', leaf: true, qtip: qtipTpl.applyTemplate()}),
new Ext.tree.TreeNode({text:'Node 3', leaf: true, qtip: qtipTpl.applyTemplate()}),
new Ext.tree.TreeNode({text:'Node 4', leaf: true, qtip: qtipTpl.applyTemplate()}),
new Ext.tree.TreeNode({text:'Node 5', leaf: true, qtip: qtipTpl.applyTemplate()})
);

tree.render();
root.expand();
}
</script>

<body onload="init()">

<br/>
<br/>
<br/>

<div>
<li style="margin-left:350px;">1. Put 'Enter' key. -> <b>show alert box.</b></li>
<li style="margin-left:350px;">2-1. OnMouseOver to tree node. -> <b>show quick tip.</b></li>
<li style="margin-left:350px;">2-2. OnMouseOut -> <b>hide quick tip.</b></li>
<li style="margin-left:350px;">3. Put again 'Enter' key. -> <b>KeyMap dosen't work.</b></li>
</div>

<br/>
<br/>

<div id="view" align="center"></div>

</body>
</html>
mystix
10 Aug 2007, 6:34 AM
ok i've tried your example and encountered the same problem.
the KeyMap is disabled the moment any QuickTip is shown.


p.s. slightly off-topic, but i strongly advise against using inline javascript like <body onload="init()">.
you should put your call to the init() function into the Ext.onReady() method instead, like so


Ext.onReady(function() {
Ext.QuickTips.init();
var qtipTpl = new Ext.Template(
'<div>' +
'<b>QuickTip</b>' +
'</div>'
);
qtipTpl.compile();

var keyMap = new Ext.KeyMap(document, [{
key: 13,
fn: function() {
alert('Enter key pressed.');
}
}]);

var tree = new Ext.tree.TreePanel("view", {
animate:true,
enableDD:true,
containerScroll: true,
ddGroup: 'ddGroup',
rootVisible:false
});
var root = new Ext.tree.TreeNode({
text: 'Node',
allowDrag:false,
allowDrop:false
});
tree.setRootNode(root);

root.appendChild(
new Ext.tree.TreeNode({text:'Node 1', leaf: true, qtip: qtipTpl.applyTemplate()}),
new Ext.tree.TreeNode({text:'Node 2', leaf: true, qtip: qtipTpl.applyTemplate()}),
new Ext.tree.TreeNode({text:'Node 3', leaf: true, qtip: qtipTpl.applyTemplate()}),
new Ext.tree.TreeNode({text:'Node 4', leaf: true, qtip: qtipTpl.applyTemplate()}),
new Ext.tree.TreeNode({text:'Node 5', leaf: true, qtip: qtipTpl.applyTemplate()})
);

tree.render();
root.expand();
});