extjs - Coloque una ventana restringida relativa desde el centro y la parte superior del contenedor de restricción

extjs4 extjs4.2

Question

Necesitamos posicionar una ventana restringida (como en este ejemplo ) relativa desde la parte superior y el centro del contenedor donde está restringida. Pero en la configuración solo encontramos xey que requerirían calcular el centro en cada cambio de documento.

¿No hay otra forma de archivar esto?

Answer 1

Podrías usar

AlignTo () documentos

alignTo(element, [position], [offsets], [animate] )

Alinea el elemento con otro elemento relativo a los puntos de anclaje especificados. Si el otro elemento es el documento, lo alinea con la ventana gráfica. El parámetro de posición es opcional y se puede especificar en cualquiera de los siguientes formatos:

En blanco: El valor predeterminado es alinear la esquina superior izquierda del elemento con la esquina inferior izquierda del objetivo ("tl-bl"). Un ancla (obsoleta): la posición de ancla pasada se utiliza como el punto de anclaje del elemento objetivo. El elemento que se está alineando posicionará su esquina superior izquierda (tl) en ese punto. Este método ha quedado obsoleto a favor de la sintaxis de dos ángulos más nueva a continuación. Dos anclajes: si se pasan dos valores de la tabla siguiente separados por un guión, el primer valor se usa como punto de anclaje del elemento, y el segundo se usa como punto de anclaje del objetivo. Además de los puntos de anclaje, el parámetro de posición también admite el "?" personaje. Si "?" se pasa al final de la cadena de posición, el elemento intentará alinearse como se especifica, pero la posición se ajustará para limitarla a la ventana si es necesario. Tenga en cuenta que el elemento que se está alineando se puede intercambiar para alinearlo en una posición diferente a la especificada para aplicar las restricciones de la ventana gráfica. A continuación se muestran todas las posiciones de anclaje compatibles ... para obtener más información, consulte los documentos

o

anchorTo () documentos

anchorTo(element, [position], [offsets], [animate], [monitorScroll], [callback])

Ancla un elemento a otro elemento y lo reajusta cuando la ventana cambia de tamaño.

Editar

Si hace algo de esto en un estado temprano, el posicionamiento puede fallar. Intentaré agregar un retraso a la alineación usando Ext.Function.createDelayed . Pruebe algo entre 10-50 como retraso.

Ejemplo:

Ext.Function.createDelayed(windowRef.anchorTo,50)(Ext.getBody(),''t-t'',[-100,0]);

Answer 2

Creo que el método showBy de showBy proporciona la manera más fácil de hacerlo, ya que no requiere que se represente la ventana, etc., antes de que se pueda aplicar. Una solución que utiliza el cuerpo de la aplicación como el contenedor principal se ve así:

let appBody = Ext.getBody();
Ext.create({
    xtype: ''window''
}).showBy(appBody, ''t-t'', [-100, 0])

Consulte los documentos Ext para obtener más información sobre el método showBy (aquí hay enlaces para Ext 4 y 6 )