View Full Version : [FIXED] keypress event catch and handling at check tree

27 Jul 2011, 8:33 AM

Ext version tested:

Ext 4.0.2a rev ____

Browser versions tested against:

FF3 (firebug installed)


hit RETURN key toggles the checkbox at leaf node on check tree at the sample

I modified the js file by adding keypress and click event and adding checkbox to 'To Do' node
whose childrens nodes are checkbox nodes as in the original sample.

two issuse I run into
1st. hit RETURN key won't toggle checkbox at 'To Do' node who has checkbox nodes as childrens whose checkbox get toggled at return key hit.
2nd. I add a keypress event listener as well as click event handler (for making sure the way I add listerner is correct).
on IE8 keypress event won't get caught for navigation key includijg RETURN, HOME, arrows, etc, at al.l
on FF3.*, navigation RETURN key hit event got caught but e.stopeEvent() and return false inside the handler won't prevent the checkbox toggling:

more founding:
RETURN key hit toggles checkbox at a leaf node but not for a node w/ children node on both IE8 and FF3;
the 'keypress' handler catches the ENTER key and other navigation key hit,
but checkbox toggling occurs at the execution entering the 'keypress' handler,
i.e., keypress event fired after checkbox toggling.

Steps to reproduce the problem:

using the js codes given below for check-tree.js
at http://dev.sencha.com/deploy/ext-4.0.2a/examples/tree/check-tree.html

The result that was expected:

consistent for the default toggle checkbox by hitting return key at check tree, no matter whether the checkbox is at tree leaf or not
kepress event handler should catch RETURN key hit, and e.stopEvent() and return false should prevent the default toggling

The result that occurs instead:

toggle checkbox occurs only for tree leaf node by hitting return key at check tree, no effect take on non-leaf node
kepress event handler didn't catch the RETURN key hit on IE 8 and the event handler failed to
prevent the default checkbox toggling on FF3.* by e.stopEvent() and return false inside the handler

Test Case:


This file is part of Ext JS 4

Copyright (c) 2011 Sencha Inc

Contact: http://www.sencha.com/contact

GNU General Public License Usage
This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.

If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.


Ext.onReady(function() {

var store = Ext.create('Ext.data.TreeStore', {
root: {
text: 'Content',
expanded: true,
children: [
text: "To Do",
cls: "folder",
expanded: true,
checked: true,
children: [{
text: "Go jogging",
leaf: true,
checked: true
text: "Take a nap",
leaf: true,
checked: false
text: "Climb Everest",
leaf: true,
checked: false



var tree = Ext.create('Ext.tree.Panel', {
store: store,
rootVisible: true,
useArrows: true,
frame: true,
title: 'Check Tree',
renderTo: 'tree-div',
width: 200,
height: 250,
listeners: {
keypress: {
element: 'el', //bind to the underlying el property on the panel
fn: function(e){
window.status = 'navi key ? ' + e.isNavKeyPress() + ' => keypress: '
+ e.getCharCode( ) ;
return false;
, click: {
element: 'el', //bind to the underlying el property on the panel
fn: function(e){
window.status = 'clicking ...' ;
return false;

dockedItems: [{
xtype: 'toolbar',
items: {
text: 'Get checked nodes',
handler: function(){
var records = tree.getView().getChecked(),
names = [];

Ext.Array.each(records, function(rec){

title: 'Selected Nodes',
msg: names.join('<br />'),
icon: Ext.MessageBox.INFO



Screenshot or Video:


See this URL for live test case: http://

Debugging already done:


Possible fix:

not provided

Additional CSS used:

only default ext-all.css
custom css (include details)

Operating System:


27 Jul 2011, 5:01 PM
thanks for reporting, filed as EXTJSIV-3590

15 Nov 2011, 12:35 PM
Tested against our latest code and I can toggle the checked state of a node with the return/enter key.