ExtJS is a JavaScript MVC framework used to create Rich UI components on Client side. We usually develop application in English language but application used by across the country need to support local country languages. Supporting Native country languages will help used in interact with system in better ways.
Today i am going to demonstrate you How we can create a ExtJS Form with different languages. I will use English (default), Arabic, Chinese and Hindi language. We will create a simple Login form with two textfiels that user can change its fieldLabel by just clicking on languages button given below the form.
To enable textfield label display different languages, i create an object with each Textfield that has its label in different language. When user click on any language button, changeLabel function will execute and dynamically set the fieldLabel to that language using Textfield’s setFieldLabel() method.
|
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
|
<html>
<head>
<meta http–equiv=“Content-Type” content=“text/html; charset=utf-8” />
<title>ExtJS Multi–Language Form</title>
<link rel=“stylesheet” type=“text/css” href=“http://cdn.sencha.com/ext/gpl/4.2.0/resources/css/ext-all.css”>
body {margin:100px;}
div.box {margin:100px;}
.x-form-item-label {font-size:14px !important;}
</head>
<body>
<div id=“output” class=“box”></div>
</body>
</html>
|
Source techzoo.org
