RTL (Right-to-Left) is a key feature when applicaton needs an RTL language support such as Urdu,Arabic,Hebrew etc. This article guides you to achieve RTL support for most popular ExtJS framework.
In recent years, most of the standard applications are supporting RTL feature, which makes application user friendly and attracts the users who works in RTL languages such as Hebrew , Arabic etc .
This article covers most widely used UI widgets like grid, form panel etc to demonstrate the RTL feature.
Building an RTL supported ExtJS application
Working knowledge of ExtJS 4.x
Starting with Sencha ExtJS 4.2 version, Sencha has an in-built support for RTL feature.
In order to create RTL supported sample ExtJS application follow below steps:
Step 1: Create an ExtJS application using Sencha cmd
To know how to do this refer to Create & Build Sencha ExtJS project using Sencha Cmd
Step 2: Make the following changes in app to make RTL supported application
- Open index.html file from <application-directory>
- Replace following line
<script src=”ext/ext-dev.js”></script> with
This will load the RTL specific ExtJS library.
- Open app.css file and make below change
@import url(‘../../ext/resources/css/ext-all.css’); with
- Set rtl flag for the main view at follwing file
Now you are done. Now if any ExtJS widget you use in you application will support RTL by default.
Step 3: Showing widgets in RTL mode
In this article we will see how different widgets like grid,form panel and its different
child items will appear in RTL mode in comparison with LTR (default).
Observe the below image
Note : If any component you dont want to show in RTL mode just add rtl:false configuration.
In this article we saw that how we can build an RTL supported application using ExtJS.