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