1. #1
    Sencha User
    Join Date
    Oct 2012
    Location
    Poland
    Posts
    70
    Answers
    4
    Vote Rating
    5
    szimek is on a distinguished road

      0  

    Default Answered: How to load additional file that depend on Ext object?

    Answered: How to load additional file that depend on Ext object?


    Hi,

    I'm trying to translate Sencha built in strings and created a new file locale/de.js that looks like this:

    Code:
    Ext.define("Ext.locale.de", {
        singleton: true,
    
    
        load: function () {
            Ext.Date.dayNames = [
                'Sonntag',
                ...
            ]
        }
    });
    In my app.js file I've got the following code:

    Code:
    Ext.application({
        requires: [
            "Ext.MessageBox",
            "Ext.DateExtras",
    
    
            "Ext.locale.de"
        ],
    
        launch: function() {
            Ext.locale.de.load();
        }
    }
    How to properly load locale/de.js file?

    Currently I've figured out something like this:
    - added workspace.classpath=${workspace.dir}/locale to .sencha/workspace/sencha.cfg file to make build process pass
    - added Ext.Loader.setPath("Ext.locale", "locale") at the very top of app.js file
    and it works. Is it the correct way? Is there a way to add this file without modifying Ext.Loader?

    Here's what I also tried:
    1.
    - added workspace.classpath=${workspace.dir}/locale to .sencha/workspace/sencha.cfg file
    - added locale/de.js file to app.json after sencha-touch.js, but before app.js
    This didn't work in generated build, because for some reason it was loading locale/de.js file before app.js that includes all Sencha code as well and thus Ext.define used in locale/de.js was not defined yet.

    2.
    - moved locale/de.js to app/locale/de.js
    - added Ext.Loader.setPath("Ext.locale", "app/locale")
    This didn't work in generated build, because there's no app folder anymore and all it's files are concatenated into app.js file.

    I don't really understand how Sencha build process works, so I'd really appreciate some explanation how to properly load such file in Sencha.

    Cheers,
    Szymon

  2. I would try not to use Ext namespace, you can easily use your application's name.

    So you have the locale specified in the requires which is proper and you have singleton which will create an instance right away. Why not use constructor instead of load so it will do everything right away?

    Code:
    Ext.define('MyApp.locale.de', {
        singleton: true,
    
        constructor: function () {
            Ext.Date.dayNames = [
                'Sonntag',
                ...
            ];
    
            this.callParent();
        }
    });
    put that in app/locale/de.js

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Answers
    3542
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    I would try not to use Ext namespace, you can easily use your application's name.

    So you have the locale specified in the requires which is proper and you have singleton which will create an instance right away. Why not use constructor instead of load so it will do everything right away?

    Code:
    Ext.define('MyApp.locale.de', {
        singleton: true,
    
        constructor: function () {
            Ext.Date.dayNames = [
                'Sonntag',
                ...
            ];
    
            this.callParent();
        }
    });
    put that in app/locale/de.js
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Oct 2012
    Location
    Poland
    Posts
    70
    Answers
    4
    Vote Rating
    5
    szimek is on a distinguished road

      0  

    Default


    Ah, thanks.

    I wanted to use Ext namespace to make a default translation file that could be used by any app, not just this one and as it overwrites only Sencha Touch stuff and not strings in my app, I thought that using Ext is more appropriate.

    I thought about using constructor, but soon I'll need to allow users to switch between languages, so I thought that this way I'll have more control when exactly the strings are overwritten. I'm not sure if I'm really going to need it (maybe I'll have to reload the whole page anyway), so thanks for the tip.

    BTW. As Sencha doesn't provide any built-in localization features, I thought about changing de.js file , so that it wouldn't have any hardcoded translations, but use some i18n library instead (so e.g. instead of hardcoding picker's doneText: "Gemacht", there would be doneText: I18n.t("picker.done"). This way I could have just a single file for all locales that overwrites strings in all built-in components and provide translations in e.g. JSON format in some other file. Just an idea

    Thanks again.

Thread Participants: 1

Tags for this Thread