Results 1 to 4 of 4

Thread: ExtJS3: adjust positioning of dropdown menu

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1

    Default 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:

                        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>',
                        '<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){
                                items: [
                                    new Ext.DataView({
                                        store: new{data: msg, fields: ['text']}),
                                        tpl: tpl,
                                        autoWidth: true,
                                        multiSelect: true,
                                        overClass: 'x-view-over',
                                        itemSelector: 'div.thumb-wrap',
                                        emptyText: 'No warnings to display'
    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):

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

    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 Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Gainesville, FL


    Moved to the Ext 3 bugs forum.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:

    Posts are my own, not any current, past or future employer's.

  3. #3


    Thank you.

  4. #4


    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.
                  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.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts