How to add missing ExtJS 6 locale properties in your application

How to add missing ExtJS 6 locale properties in your application

How to add missing locale properties in Ext JS 6 with a simple override.

In this article I will show you how you can add missing locale properties in Ext JS 6. I had this problem when I built software for a German customer. The sample I use is in the Ext.form.Date field, where the formatText is missing in the ext-locale-de.js file in the ext/classic/locale/overrides/de folder.

Ext JS Locale missing property

As you can see it showing the text when hovering in English and we want it in German. Let's repair this.

Locale in your app.json file

In your app.json you have added the following lines (depending on your language):

"requires": [
  "ext-locale"
],
"locale": "de",
... etc ...

Overriding the Ext.form.Date object to add the missing property

Now depending if you have a workspace or just an application you create in the overrides folder of your workspace or application the following folders:

locale->de->form->field

The "de" has to be the id for the language that you require. You can find the locales when browsing the ext/classic/locale/overrides/ folder.

Now add the following content in a new file with the name Ext.locale.de.form.field.Date.js in the folder you just have created:

Ext.define("Ext.locale.de.form.field.Date", {
    override: "Ext.form.field.Date",
    formatText: 'Erwarteten Datumsformat: {0}'
});

After saving the file you can refresh your app. Sencha Cmd will pick up the overrides and the result should now be:

Ext JS Locale missing property

It is only overriding the property just added, the other properties stay intact.

Ext JS Locale missing property

The approach with overrides in Sencha Cmd is parallel to how it handles SASS.

No comments yet

your email address will not be published. required fields are marked *