Being a best, world class enterprise framework ExtJS support Internationalization and Right-to-Left language support. It means we can develop UI in ExtJS for users who do understand only languages like Arabic, Urdu, Persian etc.
Today’s post is my effort of demonstrating ExtJS RTL support. If you want UI to support RTL as well as LTR then read my Multi-Language post.
Steps to use Ext JS RTL support.
Step 01)
Import extjs library’s RTL version into your application (use include ext-all-rtl.css and xt-all-rtl.js)
|
1
2
3
4
|
<link rel=“stylesheet” type=“text/css”
href=“http://cdn.sencha.com/ext/gpl/4.2.0/resources/css/ext-all-rtl.css”>
|
Step 02) Add rtl : true into your Panel’s configuration
Step 03) Add RTL text in Unicode format as label texts.
Here is the sample code of Ext.Panel which has some RTL text.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“utf-8” />
<title>extjs panel header click event</title>
<link rel=“stylesheet” type=“text/css”
href=“http://cdn.sencha.com/ext/gpl/4.2.0/resources/css/ext-all-rtl.css”>
</head>
div#output {margin:100px;}
<body>
<div id=“output”></div>
</body>
</html>
|
Output….
Source techzoo.org
