PDA

View Full Version : TreePicker in contextmenu hides its opening submenu and menu



netcool
17 Jun 2013, 1:32 PM
I have a tree for which I added a contextmenu (with some items as submenu e.g. Add, Edit, ... )
When a submenu (e.g. Edit) is displayed, a form with TreePicker.js (part of extjs/examples/ux) field shows up.
The display is ok but the problem is that after selecting any treenode in the picker, this selection event also closes/hides its opening submenu and its menu.

Does anyone know how to prevent this ? The expected behaviour being that upon selection, the picker closes/hides itself but, leaving its submenu and menu still at the display
note: the hideOnClick config doesn't appear to help in this case..

Hope someone can shed some lights for me. Thanks in advance !

I put the code below :-/:

<!DOCTYPE HTML>
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="/extjs/resources/css/ext-all.css">
<script type="text/javascript" src="/extjs/ext-all.js"></script>
<script type="text/javascript" src="/extjs/examples/ux/TreePicker.js"></script>
<script type="text/javascript">

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 mySimpleTree= new Ext.tree.Panel({
height: 150,
listeners: {
itemcontextmenu: function(view, record, item, index, event) {
myContextMenu.showAt(event.getXY())
}
},
store: store,
title: 'Simple Tree',
width: 200
})

var myTreePicker= new Ext.ux.TreePicker({
displayField: 'text',
hideOnClick: false,
store: store
})

var myContextMenu= new Ext.menu.Menu({
items: {
menu: {
buttonAlign: 'left',
buttons: [
{ action: 'add',
text: 'Add'
},
{ action: 'cancel',
text: 'Cancel'
}],
items: {
items: [
{ fieldLabel: 'Category',
value: 'some category',
xtype: 'displayfield'
},
myTreePicker
],
xtype: 'form'
},
height: 200,
layout: 'fit',
width: 300
},
text: 'Edit (hover me)'
}
})

Ext.application({
launch: function() {
Ext.create('Ext.container.Viewport', {
items: [ mySimpleTree ]
})
Ext.getBody().on('contextmenu', Ext.emptyFn, null, { preventDefault: true })
},
name: 'TreePicker'
})

</script>
</head>
</html>

slemmon
19 Jun 2013, 2:27 PM
The MenuMgr class watches for mousedown events on the doc after a menu is shown. If the event isn't found within an element with the menuSelector class then it closes the menus. Looks like the TreePicker isn't nested in the dom of the sub menu so clicking anywhere in the tree's el registers as a menu closing mousedown event with the MenuMgr.

netcool
20 Jun 2013, 4:29 AM
thank you for having taken time to review this.

indeed, what you describe is the encountered behaviour. now what could be a solution to this ?
(that the treepicker, its submenu and menu remain displayed when making a tree selection)

srossshell
15 Nov 2013, 7:08 AM
I am in the same situation and came across your post, did you find a solution?

netcool
1 Dec 2013, 7:38 AM
unfortunately I didn't. I wish I could have helped you.

srossshell
2 Dec 2013, 1:03 AM
I ended up just using a Ext.tree.Panel instead. It operated exactly as I expected plus it didnt require the user to hit the trigger to show the options.