Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Aug 2014
    Posts
    3
    Vote Rating
    0
    Schadenfreude is on a distinguished road

      0  

    Default ExtJS3: adjust positioning of dropdown menu

    ExtJS3: adjust positioning of dropdown menu


    Hi, I'm new to this forum, I didn't see a section for ExtJS3 so I didn't know where to post this.

    I'm building my menu with this code:

    Code:
                        var tpl = new Ext.XTemplate(
                        '<tpl for=".">',
                        '<div class="thumb-wrap">',
                        '<img src="../images/warning.png" style="vertical-align: middle;" title="Warning">',
                        '<span class="x-editable" style="margin-left: 3px;">{text}</span></div>',
                        '</tpl>',
                        '<div class="x-clear"></div>'
                    );
                    var msg = store.proxy.lastDataTableObject.logMessages;
                    var topToolbar = this.gridPanel.topToolbar;
                    if (msg && msg.length > 0) {
                        //Warning Messages menu
                        topToolbar.insert(topToolbar.items.items.length - 1,{
                            text: "Warning Messages",
                            menu: {
                                xtype: 'menu',
                                autoScroll: true,
                                maxHeight: 200,
                                listeners: {
                                    contextmenu: function(node,event){
                                        node.select();
                                        menu.showAt(event.xy);
                                    }
                                },
                                items: [
                                    new Ext.DataView({
                                        store: new Ext.data.SimpleStore({data: msg, fields: ['text']}),
                                        tpl: tpl,
                                        autoWidth: true,
                                        multiSelect: true,
                                        overClass: 'x-view-over',
                                        itemSelector: 'div.thumb-wrap',
                                        emptyText: 'No warnings to display'
                                    })
                                ]
                            }
                        });
                        topToolbar.doLayout();
    My ultimate goal is to use maxHeight: and make it so the dropdown element's top right corner is always anchored to the button element's bottom right corner, but here's what happens at the moment (with this code):
    HzTbH.png

    With a fixed height: 200 the problem with the anchoring still persists, but at least the menu drops down as it should:
    R2zuZ.png

    I'm not sure if this is a bug or if the problem lies with me not doing something properly, but either way I need help figuring this out.

    Thanks for your time.

    Addendum: After some more browsing the forum I found the ExtJS3 section, sorry for posting in the wrong section. Please move this topic to Ext 3.x: Help & Discussion or Ext 3.x: Bugs.
    Again, sorry for posting in the incorrect section.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,641
    Vote Rating
    898
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Moved to the Ext 3 bugs forum.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Aug 2014
    Posts
    3
    Vote Rating
    0
    Schadenfreude is on a distinguished road

      0  

    Default


    Thank you.

  4. #4
    Sencha User
    Join Date
    Aug 2014
    Posts
    3
    Vote Rating
    0
    Schadenfreude is on a distinguished road

      0  

    Default


    I'm going to answer my own question:It's fixed by using the menuAlign config on the toolbar button with a value of tr-br which will align your element's (in your case, the menu) top right corner to your target's (in your case, the button) bottom right corner.
    Code:
                  if (msg && msg.length > 0) {                   
                        topToolbar.insert(topToolbar.items.items.length - 1,{
                            text: "Warning Messages",
                            menuAlign: 'tr-br', //Add this line
                            menu: {
                                xtype: 'menu',
                                maxHeight: 200,
                                listeners: ...
    Here's a working example on Sencha's fiddle site based on this code.

Thread Participants: 1

Tags for this Thread