Question

我有一个带菜单和自定义菜单对齐设置的分割按钮（这样下拉菜单的右上角将与分割按钮的右下角对齐）。

问题：第一次单击拆分按钮时，菜单未正确对齐。然而，后续点击工作正常。在Chrome和FF中看到相同的行为，ExtJS 4.0.2a。

有什么想法吗？谢谢！

enter image description here

{
    xtype: 'toolbar',
    items: [
        {
            xtype: 'triggerfield',
            width: 335,
            emptyText: 'Search',
            triggerCls: 'x-form-search-trigger'
        },
        '->',
        {
            xtype: 'splitbutton',
            text: 'Account',
            menuAlign: 'tr-br',
            menu: {
                xtype: 'menu',
                plain: true,
                items: [
                    {
                        xtype: 'container',
                        html: 'image here...'
                    },
                    {
                        xtype: 'button',
                        width: 10,
                        text: 'Log Out'
                    }
                ]
            }
        }
    ]
}

Answer 1

好的，所以我想出了一个“它不是很漂亮，但它完成了工作”的解决方法：在渲染后快速隐藏，然后显示菜单。换句话说，当有人第一次点击并呈现菜单时，会自动隐藏它然后再次显示它。当它重新显示时，对齐是正确的。这是新代码：

{
    xtype: 'toolbar',
    items: [
        {
            xtype: 'triggerfield',
            width: 335,
            emptyText: 'Search',
            triggerCls: 'x-form-search-trigger'
        },
        '->',
        {
            xtype: 'splitbutton',
            text: 'Account',
            menuAlign: 'tr-br',
            menu: {
                xtype: 'menu',
                plain: true,
                items: [
                    {
                        xtype: 'container',
                        html: 'Image here...'
                    },
                    {
                        xtype: 'button',
                        text: 'Log Out'
                    }
                ],
                listeners: {
                    afterrender: function(component) {
                        // Hide menu and then re-show so that alignment is correct.
                        component.hide();
                        component.show();
                    }
                }
            }
        }
    ]
}

Answer 2

我改变了

component.hide();
component.show();

到

component.doLayout();

哪个IMO更清洁并且工作原理相同（至少在我的情况下）。

Answer 3

隐藏/显示变体要快得多。 * .doLayout（）对解决这样一个简单的问题非常重要。

我强烈建议您观看此视频教程：http://www.sencha.com/learn/layouts-and-containers/

它长达45分钟，但对于那些不熟悉布局的人来说，清除的东西不多。

编辑：现在我想到了它，我不确定 .show（）/ .hide（）不会在它的代码中触发doLayout（）。它必须得到验证：）

ExtJS：下拉菜单对齐不正确

3 个答案: