extjssencha-architectsencha-cmd

Publishing ext.js 7.2 Modern project with localization


I've build a small sample app with Ext JS 7.2 Modern, which only contains of a panel with a button. In the click-handler of the button, a dialog is created and shown with two buttons "ok" and "cancel":

    Ext.define('EmpDir.view.MyPanel', {
    extend: 'Ext.Panel',
    alias: 'widget.mypanel',

    requires: [
        'EmpDir.view.MyPanelViewModel',
        'Ext.Button'
    ],

    viewModel: {
        type: 'mypanel'
    },
    title: 'My Panel',

    items: [
        {
            xtype: 'button',
            handler: function(button, e) {
                var dialog = Ext.create('Ext.Dialog', {
                    title: 'Dialog',
                    closable: true,
                    defaultFocus: '#ok',
                    maximizable: true,
                    bodyPadding: 30,
                    maxWidth: 300,
                    html: 'This is a dialog, which extends from Panel and adds some extra features.',
                    buttons: {
                        ok: {
                            handler: function() {
                                // Do something
                                this.up('dialog').hide();
                            }
                        },
                        cancel: {
                            handler: function() {
                                // Do something
                                this.up('dialog').hide();
                            }
                        }
                    }
                });

                dialog.show();
            },
            text: 'MyButton2'
        }
    ]
});

If I then publish the project (not build, but publishing, making a release version to ship to the customer so to say), the text of the two buttons are 'Ok' and 'Cancel', because of the default "en" localization.

Now I want to localize the two buttons, for example, in German. The expected outcome should be 'Ok' and 'Abbrechen'.

So I followed the guides from the Sencha docs here and here.

The first thing I've tried was inserting the following code in app.json.

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

But that did nothing. The text of the buttons was still in English.

Then I've tried the other suggestion

   "requires": [
      "ext-locale"
   ],
   "locales": [
      "de",
      "fr"
   ],

Again, it didn't work.

The fist times I've used Sencha Architect for publishing so I thought, maybe it works with Sencha cmd.

But no, it didn't. It always stays English. I checked the publish folder and couldn't find any locale-xx.js files in there.

However, when I'm previewing the project it works every time.


Solution

  • So after all it was a bug. With help from the support I had to comment the last part of the ext-locale-de.js file, which can be found here: ext\modern\locale\overrides\de

    /* Ext.define("Ext.locale.de.grid.filters.menu.Base", {
        override: "Ext.grid.filters.menu.Base",
    
        config: {
            text: "Filter"
        }
    });
    
    Ext.define('Ext.locale.de.grid.locked.Grid', {
        override: 'Ext.grid.locked.Grid',
    
        config: {
            columnMenu: {
                items: {
                    region: {
                        text: 'Region'
                    }
                }
            },
            regions: {
                left: {
                    menuLabel: 'Verschlossen (Links)'
                },
                center: {
                    menuLabel: 'Freigeschaltet'
                },
                right: {
                    menuLabel: 'Verschlossen (Recht)'
                }
            }
        }
    });
    
    Ext.define("Ext.locale.de.grid.plugin.RowDragDrop", {
        override: "Ext.grid.plugin.RowDragDrop",
        dragText: "{0} Zeile(n) ausgewählt"
    });
     */