1. #1
    Ext User
    Join Date
    Jan 2009
    Location
    Porto, Portugal
    Posts
    3
    Vote Rating
    0
    lmartinho is on a distinguished road

      0  

    Default Keep a Menu Adapter item with a Combo from being hidden when Combo List item selected

    Keep a Menu Adapter item with a Combo from being hidden when Combo List item selected


    Hi all,

    This is my first post. I started working with ExtJS this year and its definitely an amazing library to work with and AFAIK it keeps getting momentum. So props to the Core team and to the Community.

    That said, I need help. I'm trying to get combobox onto a menu to provide a kind of pop-down search functionality (think Spotlight on Mac OS X). The problem is whenever I select an item on the combo list item the menu gets hidden.

    I tried to track the event that was triggering the hide on the menu, but things got a bit blurry since the menu is dismissed by different actions (clicking outside, esc key, etc.) and they're at the global.

    I adapted this from sample code, to keep it simple:

    Code:
                var comboFromArray = new Ext.form.ComboBox({
                            store : Ext.exampledata.states,
                            typeAhead : true,
                            forceSelection : true,
                            triggerAction : 'all',
                            emptyText : 'Select a state...',
                            selectOnFocus : true
                        });
    
                var button = new Ext.Button({
                            text : "Press me",
                            applyTo : 'panel_holder',
                            menu : {
                                items : [new Ext.menu.Adapter(comboFromArray, {
                                            hideOnClick : false
                                        })]
                            }
                        })

    Thanks a lot,
    Lu

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    96
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    You have to fool the MenuMgr into thinking the combobox dropdown list is also a menu.

    You can do this by adding listClass:'x-menu' to the combobox config.

  3. #3
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    57
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    I hacked round this by rendering the ComboBox's list into the menu div. Which was behind this hacky request: http://extjs.com/forum/showthread.php?t=56301

    Isn't there any way this could be handled automatically?

  4. #4
    Ext User
    Join Date
    Jan 2009
    Location
    Porto, Portugal
    Posts
    3
    Vote Rating
    0
    lmartinho is on a distinguished road

      0  

    Thumbs up


    Spot on! Thanks guys!

    Both solutions worked, I ended up going with the ComboBox into the menu div fix, since it also took care of the z-order issue I was addressing with my own hack.

    Just for the record, I'm initing the config object with:

    Code:
    listContainer : ".x-menu"
    and then, in initList, I crawl the DOM to get hold of the container el:

    Code:
    // the list container to use as parentEl for the drop down list
    var listContainerEl = this.el.findParent(this.listContainer);
    Thanks again,
    Luis Martinho.

Thread Participants: 2