Orientamento del pannello ExtJS - Da destra a sinistra

Question

Qual è il modo appropriato di capovolgere un pannello ExtJs in orizzontale per le lingue RTL, l'arabo, l'ebraico, ecc.

Answer 1

TL;DR : RTL è supportato in Ext 4.2+ a partire da aprile 2013. Per i dettagli, vedere l'ultimo aggiornamento di seguito.

Al momento non esiste supporto RTL integrato in Ext, anche se molti membri della comunità hanno affrontato questo problema con vari successi. Se le tue esigenze sono limitate (ad esempio solo ai contenuti del Pannello), sarebbe probabilmente meglio ignorare il CSS appropriato da solo. Se hai bisogno di un supporto RTL più completo, dovresti probabilmente dare seguito direttamente ai forum Ext con altri utenti che si occupano degli stessi problemi.

Esiste un progetto esterno per l'aggiunta del supporto RTL a Ext 3.x, anche se ho non ho idea se è attivo o quale sia la qualità (gli ultimi aggiornamenti sono stati alcuni mesi fa). Tuttavia, potresti indirizzarti nella giusta direzione.

AGGIORNAMENTO : il supporto RTL secondo quanto riferito sarà notevolmente migliorato, se non completamente implementato, nell'Est 4 (scadenza Q1 2011). Non l'ho ancora visto, ma è stato segnalato al SenchaCon.

AGGIORNAMENTO settembre 2012 : RTL non ha non ancora fatto ufficialmente in Ext 4 al 4.1, ma l'ultima volta ho sentito che era ancora sulla road map, forse per un versione 4.x successiva.

AGGIORNAMENTO Aprile 2013 : RTL è atterrato. Vedi Int 4.2 post sul blog introduttivo per i dettagli. L'essenza di base è che per abilitare RTL in 4.2+ si procede come segue:

• Richiedi lo spazio dei nomi Ext.rtl. *
• Imposta la configurazione rtl: true sui tuoi contenitori / componenti. Nota che questa impostazione è a cascata ed è sostituibile dai componenti figlio, il che è interessante
• Abilita RTL negli stili impostando la variabile SASS: $ include-rtl: true;

Un esempio di abilitazione di RTL in un componente dell'applicazione:

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