Orientación del panel ExtJS: de derecha a izquierda

Question

¿Cuál es la forma adecuada de voltear un Panel ExtJs horizontalmente para idiomas RTL, árabe, hebreo ... etc.

Answer 1

TL;DR : RTL es compatible con Ext 4.2+ a partir de abril de 2013. Consulte la última actualización a continuación para obtener más detalles.

No hay soporte RTL integrado en Ext en este momento, aunque muchos miembros de la comunidad lo han abordado con varios éxitos. Si sus necesidades son limitadas (solo al contenido del Panel, por ejemplo), probablemente sería mejor simplemente anular el CSS apropiado usted mismo. Si necesita un soporte RTL más completo, probablemente debería hacer un seguimiento directo en los foros Ext con otros usuarios que se ocupan de los mismos problemas.

Hay un proyecto externo para agregar soporte RTL a Ext 3.x, aunque tengo No tengo idea si está activo o cuál es la calidad (las últimas actualizaciones fueron hace unos meses). Sin embargo, podría orientarte en la dirección correcta.

ACTUALIZACIÓN : El soporte RTL según se informa se mejorará significativamente, si no se implementa completamente, en la extensión 4 (debido al primer trimestre de 2011). Todavía no lo he visto, pero eso se informó en SenchaCon.

ACTUALIZACIÓN Septiembre de 2012 : RTL no ha llegado oficialmente al Ext 4 a partir de 4.1, pero la última vez que escuché que todavía estaba en la hoja de ruta, posiblemente por un versión 4.x posterior.

ACTUALIZACIÓN Abr 2013 : RTL ha aterrizado. Vea Entrada de blog de introducción de Ext 4.2 para más detalles. La esencia básica de esto es que para habilitar RTL en 4.2+ haces lo siguiente:

• Requerir el Ext.rtl. * espacio de nombres
• Establezca la configuración rtl: true en sus contenedores / componentes; tenga en cuenta que esta configuración se conecta en cascada y los componentes secundarios pueden anularla, lo cual es genial
• Habilite RTL en estilos configurando la variable SASS: $ include-rtl: true;

Un ejemplo de activación de RTL en un componente de aplicación:

Ext.define('MyApp.views.Viewport', {
    extend: 'Ext.container.Viewport',
    requires: [
        'Ext.rtl.*'
    ],
    rtl: true,
    ...
});