View Full Version : TreePanel: callback beforeselect and beforeitemclick do not work like in V3

29 Apr 2011, 12:53 AM
I am not sure whether it is a bug or a feature. I used TreePanel in ExtJS 3 as navigation element. I used the event 'beforeclick' of the TreePanel to ask a question whether unsaved data can be dismissed and prevented the navigation and selection of the target node by returning false from this callback function.

The corresponding functions in ExtJS4 do not work in that way.

The call back function 'beforeselect' is not called at all, the call back function 'beforeitemclick' does not prevent the selection of the node by returning false.


1) Create the file treetest.html from the contents below
2) Put it to the examples/tree
3) Run in browser and try to select a node. Node is selected although the call back function returns false. The call back function beforeselect is not called at all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Tree Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../shared/example.css" />

<script type="text/javascript" src="../../bootstrap.js"></script>

<script type="text/javascript">
Ext.onReady(function() {

var root = {
expanded: true,
text: 'Root',

children: [
text: 'folder1',
children: [
{ text: 'item 1.1', leaf: true },
{ text: 'item 1.2', leaf: true }
text: 'folder2',
children: [
{ text: 'item 2.1', leaf: true },
{ text: 'item 2.2', leaf: true }
{ text: 'item 3', leaf: true }

var tree = Ext.create('Ext.tree.Panel', {
root: root,
renderTo: 'tree-div',
height: 300,
width: 250,
title: 'Files',
renderTo: 'tree-div',
useArrows: true,

listeners: {
beforeselect: function(view, node, selections)
alert('Node ' + node.data.text + ' is being selected.');
return false;

beforeitemclick: function(view, node, item, index, e)
alert('Node ' + node.data.text + ' is being clicked.');
return false;

<div id="tree-div"></div>

26 May 2011, 2:49 AM
I'm running in to the exact same problem. It's not possible to cancel to new selection.

How to prevent a new node from being selected?

26 May 2011, 3:11 AM
It seems to be a bug. The tree is now the table object, which is modified to imitate the tree. I saw a bug report concerning select event for tables. It does not work also.

What we can do, is to wait and hope that this will be fixed in 4.0.2.

15 Jun 2011, 6:32 AM
Now, in 4.0.2, the callback "beforeselect" is called, but the callback function 'beforeitemclick' still does not prevent the selection of the node by returning false.

In ExtJS 3, if the function 'beforeitemclick' returned false, neither the target node was selected nor the link under the target node was activated. So it worked good for preventing navigation to the target node, if the data of the current node was not saved and the user cancelled navigation in the question dialog.

My question is, will it be fixed so that it works exactly like in ExtJS 3, or it will be let as it is now?