modern - ExtJS: alineación incorrecta del menú desplegable

sencha examples 6

Question

Tengo un botón dividir con un menú y un menú personalizado Configuración de alineación (para que la esquina superior derecha del menú desplegable se alinee con la esquina inferior derecha del botón dividir).

Problema: la primera vez que hace clic en el botón split, el menú no está alineado correctamente. Sin embargo, los clics posteriores funcionan bien. Ver el mismo comportamiento en Chrome y FF, ExtJS 4.0.2a.

¿Algunas ideas? ¡Gracias!

{
    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

Ok, entonces se me ocurrió una solución "no es bonita pero hace el trabajo": esconder rápidamente, y luego mostrar, el menú después de que se represente. En otras palabras, cuando alguien hace clic la primera vez y se muestra el menú, ocultelo automáticamente y muéstrelo de nuevo. Cuando se vuelve a mostrar, la alineación es correcta. Aquí está el nuevo código:

{
    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

Cambié

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

a

component.doLayout();

qué IMO es más limpio y funciona igual (al menos en mi caso).

Answer 3

La variante de ocultar / mostrar es mucho más rápida. * .doLayout () es un gran cañón para resolver un problema tan simple.

Recomiendo encarecidamente ver este video tutorial: http://www.sencha.com/learn/layouts-and-containers/

Tiene ~ 45 minutos de duración, pero aclara más de pocas cosas para aquellos que no conocen bien los diseños.

editar: Ahora que lo pienso, no estoy seguro de si wheteher .show () / .hide () no enciende doLayout () en algún lugar de su código. Tendría que ser verificado :)