RTL support in Sencha ExtJS application


Overview

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.

Problem Statement

Building an RTL supported ExtJS application

Pre-requisites

Working knowledge of ExtJS 4.x

Details

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

<script src=”ext/ext-all-rtl.js”></script>

This will load the RTL specific ExtJS library.

  • Open app.css file and make below change

<applciation-directory>/resources/theme/app.css

Replace

@import url(‘../../ext/resources/css/ext-all.css’);  with

@import url(‘../../ext/resources/css/ext-all-rtl.css’);

  • Set rtl flag for the main view at follwing file

<application-directory>/app/viewPort.js

Ext.define(‘POS.view.Viewport’, {
renderTo: Ext.getBody(),
extend: ‘Ext.container.Viewport’,
rtl:true

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

ExtJS_RTL

Note : If any component you dont want to show in RTL mode just add rtl:false configuration.

Conclusion

In this article we saw that how we can build an RTL supported application using ExtJS.

Reference

http://www.sencha.com/

About

Technical Lead at Walking Tree. Full-stack Mobile and Web developer with expertise in Sencha Ext JS/Sencha Touch/MEEN area. Involved in leading and developing products and solutions of high complexity.

Tagged with: ,
Posted in Sencha ExtJS
One comment on “RTL support in Sencha ExtJS application
  1. manojparida says:

    Good enhance by ExtJS….now we can easily achieve RTL in our application.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

We Have Moved Our Blog!

We have moved our blog to our company site. Check out https://walkingtree.tech/index.php/blog for all latest blogs.

Sencha Select Partner Sencha Training Partner
Xamarin Authorized Partner
Do More. With Sencha.

Recent Publication
%d bloggers like this: