Question

What is the appropriate way to flip an ExtJs Panel horizontally for RTL languages, Arabic, Hebrew .. etc

Answer 1

TL;DR: RTL is supported in Ext 4.2+ as of April 2013. See the last update below for details.

There is no RTL support built into Ext at this time, although many community members have addressed this with various success. If your needs are limited (only to Panel contents for example) it would probably be best to simply override the appropriate CSS yourself. If you need more complete RTL support, you should probably follow up directly in the Ext forums with other users dealing with the same issues.

There is an external project for adding RTL support to Ext 3.x, although I have no idea if it’s active or what the quality is (last updates were a few months ago). Might point you in the right direction though.

UPDATE: RTL support reportedly will be significantly improved, if not fully implemented, in Ext 4 (due Q1 2011). Haven’t seen it yet, but that was reported at SenchaCon.

UPDATE Sept 2012: RTL has not yet made it into Ext 4 officially as of 4.1, but last I heard it was still on the road map, possibly for a later 4.x release.

UPDATE Apr 2013: RTL has landed. See the Ext 4.2 intro blog post for details. The basic gist of it is that to enable RTL in 4.2+ you do the following:

• Require the Ext.rtl.* namespace
• Set the rtl: true config on your containers/components — note that this setting cascades and is overrideable by child components, which is cool
• Enable RTL in styles by setting the SASS variable: $include-rtl: true;

An example of enabling RTL in an application component:

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