Orientation du panneau ExtJS - Droite à gauche

Question

Quel est le moyen approprié de retourner un panneau ExtJs horizontalement pour les langues RTL, l'arabe, l'hébreu, etc.

Answer 1

TL; DR : à partir d'avril 2013, la RTL est prise en charge. Voir la dernière mise à jour ci-dessous. p>

Il n’existe pas de support RTL intégré à Ext pour le moment, bien que de nombreux membres de la communauté aient résolu ce problème avec succès. Si vos besoins sont limités (uniquement au contenu du Panel, par exemple), il serait probablement préférable de remplacer vous-même le CSS approprié. Si vous avez besoin d’une assistance RTL plus complète, vous devriez probablement faire un suivi directement dans les forums Ext avec d’autres utilisateurs aux prises avec les mêmes problèmes.

Il existe un projet externe pour l'ajout du support RTL à Ext 3.x, bien que j'ai aucune idée si c'est actif ou quelle est sa qualité (les dernières mises à jour dataient d'il y a quelques mois). Pourriez-vous vous diriger dans la bonne direction si.

MISE À JOUR : la prise en charge de RTL devrait être considérablement améliorée, si elle n'est pas pleinement mise en œuvre, sur le poste 4 (prévue pour le premier trimestre 2011). Je ne l'ai pas encore vu, mais cela a été rapporté à SenchaCon.

ACTUALITÉ septembre 2012 : RTL n'a pas encore accédé officiellement à Ext 4 à partir de la version 4.1, mais la dernière fois que j'ai entendu dire qu'elle était toujours sur la feuille de route, peut-être pour une version ultérieure 4.x.

UPDATE avril 2013 : RTL a atterri. Voir le Poste de blog d'introduction Ext 4.2 pour plus de détails. Le principe de base est que pour activer RTL dans la version 4.2+, procédez comme suit:

• Requiert l’espace de nom Ext.rtl. *
• Définissez la configuration rtl: true sur vos conteneurs / composants - notez que ce paramètre est mis en cascade et peut être remplacé par des composants enfants, ce qui est cool
• Activez la RTL dans les styles en définissant la variable SASS: $ include-rtl: true;

Exemple d'activation de la RTL dans un composant d'application:

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