Results 1 to 3 of 3

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

  1. #1
    Sencha User
    Join Date
    Oct 2012
    Location
    Poland
    Posts
    70
    Answers
    4
    Vote Rating
    5
      0  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,551
    Answers
    3931
    Vote Rating
    1271
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  4. #3
    Sencha User
    Join Date
    Oct 2012
    Location
    Poland
    Posts
    70
    Answers
    4
    Vote Rating
    5
      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.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •