PDA

View Full Version : [FIXED] Ext.tree.Panel beforeitemexpand fires at wrong time, possibly beforeitemclick also



dfox
23 Apr 2013, 7:07 AM
REQUIRED INFORMATION Ext version tested:

Ext 4.2.0 rev 663
Browser versions tested against:

IE8
FF 17.0.1 (firebug 1.10.6 installed)
Chrome
Description:

Using code from the API in Ext.tree.Panel I traced the events around
concerning selecting/clicking items in a tree. When clicking to expand a collapsed
node the beforeitemclick fired first, then itemexpand fired, followed by beforeitemexpand, then afteritemexpand.
Steps to reproduce the problem:

Click
The result that was expected:

It would seem to me that itemexpand should behave similar to itemcollapse.
With beforeitemexpand firing first (and allowing a false to be returned, API doc
does not show returning false to be allowed) followed by itemexpand, then afteritemexpand
Further for both expanding and collapsing nodes the beforeitemclick event fired first however the itemclick event does not. This seems to indicate that the beforeitemclick is either superflous or needs a better expanation in the API doc. However the beforeitemclick event returning false halts both expanding and collapsing of the node.
The result that occurs instead:

When clicking to expand a collapsed
node the itemexpand fired first, followed by the beforeitemexpand, then afteritemexpand.
Test Case:
Ext.onReady( function() {

var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "detention", leaf: true },
{ text: "homework", expanded: false, children: [
{ text: "book report", leaf: true },
{ text: "alegrbra", leaf: true}
] },
{ text: "buy lottery tickets", leaf: true }
]
}
});

Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 200,
height: 150,
store: store,
rootVisible: false,
renderTo: Ext.getBody(),
listeners: {

// ITEM COLLAPSE
afteritemcollapse: function(){
console.log('afteritemcollapse');
},
beforeitemcollapse: function(){
console.log('beforeitemcollapse');
//return false;
},
itemcollapse: function(){
console.log('itemcollapse');
},

// ITEM EXPAND
afteritemexpand: function(){
console.log('afteritemexpand');
},
beforeitemexpand: function(){
console.log('beforeitemexpand');
//return false;
},
itemexpand: function(){
console.log('itemexpand');
},

// ITEM CLICK
beforeitemclick: function(){
console.log('beforeitemclick');
//return false;
},
itemclick: function(){
console.log('itemclick');
},

// ITEM DOUBLE CLICK
beforeitemdblclick: function(){
console.log('beforeitemdblclick');
//return false;
},
itemdblclick: function(){
console.log('itemdblclick');
},

// DESELECT
beforedeselect: function(){
console.log('beforedeselect');
// return false;
},
deselect: function(){
console.log('deselect');
},

// SELECT
beforeselect: function(){
console.log('beforeselect');
//return false;
},
select: function(){
console.log('select');
},

// SELECT CHANGE
selectionchange: function(){
console.log('selectionchange');
},

}
});
}); HELPFUL INFORMATION
See bottom Screenshot or Video:

NA
See this URL for live test case:NA Debugging already done:

none
Possible fix:

not provided
Additional CSS used:

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

WinXP Pro
Full results of my testing:

Selection / Click of single item

1st select of (detention)
beforeselect
select
selectionchange
beforeitemclick
itemclick

1st select of (detention) - only beforeselect returns false
beforeselect
beforeitemclick
itemclick
!!!! NOTE nothing is highlighted/selected

1st select of (detention) - only beforeitemclick returns false
beforeselect
select
selectionchange
beforeitemclick
!!!! NOTE (detention) is highlighted/selected


Click on '+' to expand

1st expand of (homework) !!!!!!!!!!!!!! This seems wrong, the beforeitemexpand is after the itemexpand
beforeitemclick
itemexpand
beforeitemexpand
afteritemexpand

1st expand of (homework) - only beforeitemexpand returns false, note API docs do not say anything about returning false as an option
beforeitemclick
itemexpand
beforeitemexpand
afteritemexpand

1st expand of (homework) - only beforeitemclick returns false
beforeitemclick


Click on '+' to expand, then '-' to collapse

1st expand of (homework)
beforeitemclick
itemexpand
beforeitemexpand
afteritemexpand
{ PAUSE BETWEEN CLICKS }
beforeitemclick
beforeitemcollapse
itemcollapse
afteritemcollapse

1st expand of (homework) - only beforeitemcollapse returns false
beforeitemclick
itemexpand
beforeitemexpand
afteritemexpand
{ PAUSE BETWEEN CLICKS }
beforeitemclick
beforeitemcollapse


Double Click of single item

1st doubleclick of (detention)
beforeselect
select
selectionchange
beforeitemclick
itemclick
beforeitemclick
itemclick
beforeitemdblclick
itemdblclick

1st doubleclick of (detention) - only beforeselect return false
beforeselect
beforeitemclick
itemclick
beforeselect
beforeitemclick
itemclick
beforeitemdblclick
itemdblclick

1st doubleclick of (detention) - only beforeitemclick return false
beforeselect
select
selectionchange
beforeitemclick
beforeitemclick
beforeitemdblclick
itemdblclick

1st doubleclick of (detention) - only beforeitemdblclick return false
beforeselect
select
selectionchange
beforeitemclick
itemclick
beforeitemclick
itemclick
beforeitemdblclick

1st select of (detention) then 2nd select of (buy lottery tickets)
beforeselect
select
selectionchange
beforeitemclick
itemclick
{ PAUSE BETWEEN SELECTIONS }
beforeselect
beforedeselect
deselect
select
selectionchange
beforeitemclick
itemclick

1st select of (detention) then 2nd select of (buy lottery tickets) - only beforeselect returns false
beforeselect
beforeitemclick
itemclick
{ PAUSE BETWEEN SELECTIONS }
beforeselect
beforeitemclick
itemclick
!!!! NOTE nothing is highlighted/selected

1st select of (detention) then 2nd select of (buy lottery tickets) - only beforeitemclick returns false
beforeselect
select
selectionchange
beforeitemclick
{ PAUSE BETWEEN SELECTIONS }
beforeselect
beforedeselect
deselect
select
selectionchange
beforeitemclick

1st select of (detention) then 2nd select of (buy lottery tickets) - only beforedeselect returns false
beforeselect
select
selectionchange
beforeitemclick
itemclick
{ PAUSE BETWEEN SELECTIONS }
beforeselect
beforedeselect
beforeitemclick
itemclick
!!!! NOTE (detention) is highlighted/selected, meaning that the selection did not change


*EDIT BY SLEMMON
tested on 4.2.1.763


var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [{
text: "detention",
leaf: true
}, {
text: "homework",
expanded: false,
children: [{
text: "book report",
leaf: true
}, {
text: "algebra",
leaf: true
}]
}, {
text: "buy lottery tickets",
leaf: true
}]
}
});
var tree = Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 200,
height: 150,
store: store,
rootVisible: false,
renderTo: Ext.getBody(),
listeners: {
itemexpand: function () {
console.log('itemexpand');
},
beforeitemexpand: function () {
console.log('beforeitemexpand');
return false;
},
itemclick: function () {
console.log('itemclick');
},
beforeitemclick: function () {
console.log('beforeitemclick');
}
}
});

dfox
23 Apr 2013, 7:15 AM
Ah Pooh!

I wanted the title to be " possibly as well as beforeitem click".
I wanted the list of my debugging to go into a code section.
Apologies.

slemmon
23 Apr 2013, 9:35 AM
Not sure I'm following. I did a simple test case to see what fired first and if beforeitemcollapse return false was honored and everything worked out for me ok. Perhaps I'm just overlooking something?



var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "detention", leaf: true },
{ text: "homework", expanded: true, children: [
{ text: "book report", leaf: true },
{ text: "algebra", leaf: true}
] },
{ text: "buy lottery tickets", leaf: true }
]
}
});


var tree = Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 200,
height: 150,
store: store,
rootVisible: false,
renderTo: Ext.getBody()
, listeners: {
itemcollapse: function () {
console.log('itemcollapse');
}
, beforeitemcollapse: function () {
console.log('beforeitemcollapse');
return false;
}
, itemclick: function () {
console.log('itemclick');
}
, beforeitemclick: function () {
console.log('befofreitemclick');
}
}
});

dfox
23 Apr 2013, 10:12 AM
Apologies if I mistyped, the problem is with the expand.



var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "detention", leaf: true },
{ text: "homework", expanded: false, children: [
{ text: "book report", leaf: true },
{ text: "algebra", leaf: true}
] },
{ text: "buy lottery tickets", leaf: true }
]
}
});


var tree = Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 200,
height: 150,
store: store,
rootVisible: false,
renderTo: Ext.getBody()
, listeners: {
itemexpand: function () {
console.log('itemexpand');
}
, beforeitemexpand: function () {
console.log('beforeitemexpand');
return false;
}
, itemclick: function () {
console.log('itemclick');
}
, beforeitemclick: function () {
console.log('beforeitemclick');
}
}
});

slemmon
23 Apr 2013, 11:17 PM
Thanks for the report! I have opened a bug in our bug tracker.

dfox
24 Apr 2013, 1:45 AM
So can you give me any information about the beforeitemclick event?
The API says "Fires before the click event on an item is processed. Returns false to cancel the default action."

However it seems to be more of the central place where the other events are fired from.

it fires before both the beforeitemexpand and the beforeitemcollapse.
It also fires after the sequence of selection events.
the click event does not always fire after it. (nothing to do with returning false) look at the sequence for collapsing. 1) beforeitemclick 2) beforeitemcollapse 3) collapse. If 1) beforeitemclick returns false then the rest do not fire.

If this is sequence is what is intended then I believe the API documentation should be updated.

slemmon
24 Apr 2013, 9:29 AM
Returning false from beforeitemclick does cancel the default expand/collapse action. But it will also cancel a handler for itemclick.

shkamboj
27 Jun 2013, 10:41 AM
Can anyone comment about the status of this bug ? I recently upgraded to 4.2.0 and this breaks one of the core functionality of my app .

slemmon
27 Jun 2013, 1:15 PM
This was fixed in 4.2.1

shkamboj
27 Jun 2013, 2:08 PM
Sure , I would try 4.2.1 .
One question here - when I upgraded from 4.0.7 to 4.2.0 , I had generated app using Sencha Cmd and then ported all my code to the generated app structure . Now for upgrading from 4.2.0 to 4.2.1 what should be done , do we need to again generate app or simply replace 'extjs' folder ? what would be the simplest way ???

slemmon
2 Jul 2013, 11:06 AM
You might take a look at the Upgrading Your App sub-section on this guide:
http://docs.sencha.com/extjs/4.2.1/#!/guide/command_app