ExtJS: Неверное выравнивание выпадающего меню - PullRequest
Новая
       4

ExtJS: Неверное выравнивание выпадающего меню

8 голосов
/ 14 июля 2011

У меня есть разделенная кнопка с меню и пользовательским параметром меню Align (чтобы верхний правый угол раскрывающегося меню был выровнен с правым нижним углом разделенной кнопки).

Проблема: при первом нажатии кнопки разделения меню не выровнено правильно. Последующие клики работают нормально, однако. Видя такое же поведение в Chrome и FF, ExtJS 4.0.2a.

Есть идеи? Спасибо!

enter image description here

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'
                    }
                ]
            }
        }
    ]
}

Ответы [ 3 ]

8 голосов
/ 14 июля 2011

Хорошо, так что я придумал обходной путь «это не красиво, но он выполняет свою работу»: быстро скрыть, затем показать меню после его рендеринга.Другими словами, когда кто-то щелкает первый раз и меню отображается, автоматически скрывает его, а затем снова показывает.Когда он будет показан заново, выравнивание будет правильным.Вот новый код: 

{
    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();
                    }
                }
            }
        }
    ]
}
1 голос
/ 27 апреля 2012

Я изменил 

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

на 

component.doLayout();

, что IMO чище и работает так же (по крайней мере, в моем случае).

0 голосов
/ 18 октября 2012

Вариант скрытия / показа намного быстрее. * .doLayout () очень важен для решения такой простой проблемы.

Я настоятельно рекомендую посмотреть этот видеоурок: http://www.sencha.com/learn/layouts-and-containers/

Это ~ 45 минут, но проясняет более чем несколько вещей для тех, кто не очень хорошо разбирается в раскладках.

редактирование: Теперь, когда я думаю об этом, я не уверен, что .show () / .hide () не запускает doLayout () где-то в своем коде. Это должно быть проверено:)

...