By default, the components that Ext JS use are in English, like the texts and messages displayed, but it is possible to change that language to the one we need in our application.

Resources

Remember to download the resources of this chapter. After doing that you need to create a new folder called "language" inside of the folder "course" (this is the folder where we have been working on this course) and unzip the resources that you have downloaded.

Execute the example

Let's execute the example in our favorite browser, after doing that a window that contains a grid with information will appear. At the bottom of the grid you can see there's a message that says "page 1 of 1", also you can see that in the table's header there are options to sort ascending and descending.

When you click on the button "Add" a small form will appear, the 2 fields are required and one of them is date, so you can see there´s a calendar with the months written in English, also if you enter an invalid date an error message in English will appear.

Installing other languages

It is very easy to install other languages, first you have to go to the folder where we downloaded the Framework in the first chapter of this course; inside of that folder there's another one called "build", inside of this folder there's another folder called "locale"; you need to copy this folder inside of the ext-2.2 folder (this folder is found in the Web server that we've been working on). Inside of the folder "locale" we have the translations to different languages, so what you have to do is to look for the one you want to install and import it to the HTML document right after importing the ext-all.js. This is how you overwrite the messages with the ones that you've imported.

<script type="text/javascript" src="../ext-2.2/ext-all.js"></script>
<!-- we have to import the language right after the ext-all.js -->
<script type="text/javascript" src="../ext-2.2/locale/ext-lang-ro-min.js"></script>

Test the changes

After saving the changes, you have to update the browser in order to see the components in the language you previously installed.

It is important to remember that the translation that we have imported only affects to the Ext JS components and not the information that was created by the user, such as headers and the buttons "add" and "remove", since the programmer will have to define that.

What if there's no translation to my language?

If there's no translation to your language inside of the folder "locale" or if you need a variation of an existent language to fit your country's language, then what you need to do is copy some of the existent languages (in the folder "locale"), rename it and start translating just the part that's found inside of the quotes.

Conclusion

As you can see, changing the language of the components and do a translation is very easy, the only thing we need to remember is that the JS file that has the translation must be imported after the ext-all.js, in this way the texts will be overwritten with the language imported. Questions or suggestions? Don't forget to leave a comment in this post

Te gustaría recibir más tutoriales como este en tu correo?

Este tutorial pertenece al curso Learning Ext JS 3, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.

Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!