1. #1
    Sencha User
    Join Date
    Dec 2009
    Posts
    4
    Vote Rating
    0
    netcool is on a distinguished road

      0  

    Default Unanswered: TreePicker in contextmenu hides its opening submenu and menu

    Unanswered: TreePicker in contextmenu hides its opening submenu and menu


    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 :
    PHP Code:
    <!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> 
    Last edited by netcool; 17 Jun 2013 at 1:35 PM. Reason: format

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,062
    Vote Rating
    215
    Answers
    486
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    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.


    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager:
    sheryl@sencha.com

  3. #3
    Sencha User
    Join Date
    Dec 2009
    Posts
    4
    Vote Rating
    0
    netcool is on a distinguished road

      0  

    Default


    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)
    Last edited by netcool; 20 Jun 2013 at 4:30 AM. Reason: typo

  4. #4
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    9
    Vote Rating
    0
    srossshell is on a distinguished road

      0  

    Default Did you ever resolve this?

    Did you ever resolve this?


    I am in the same situation and came across your post, did you find a solution?

  5. #5
    Sencha User
    Join Date
    Dec 2009
    Posts
    4
    Vote Rating
    0
    netcool is on a distinguished road

      0  

    Default


    unfortunately I didn't. I wish I could have helped you.

  6. #6
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    9
    Vote Rating
    0
    srossshell is on a distinguished road

      0  

    Default


    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.