Ux.locale.Manager

[mitchellsimoens]

You can add javascript resources to your project but that won't create the anything for you to directly use. In code you can use it and of course you can create your own configs but I don't think the custom configs will support objects as you need to specify for locale

[demon222]

Please, give a complete example - where, what, and how ...

[demon222]

...?????

[demon222]

mitchellsimoens , can you describe how to easily integrate it with Sencha Architect 2???

Thank you for the quick response ...

[intellix]

I can answer that I guess.
I'm using Architect so it is possible. You just don't see the text inside your app.

Inside the root folder of your app.html '/' add the files like: Ux/locale/Manager.js etc
Inside the root folder of your app.html '/' add a folder for your translations: '/locales'

Inside 'Application' within Architect, add them all as requires like:
Ux.locale.Manager
Ux.locale.override.st.Component
etc
etc

Inside 'Application > Launch add the init code

Go to some sort of component that you want translating. and just add a custom parameter: locales: {html: "blah blah"}

[demon222]

thx

problem in ext.window.Window (SA2) ::: title

Ext.ComponentQuery.query('component[enableLocale]') >> []

Ext.define('MBD.view.bodys.Window', {
    extend: 'Ext.window.Window',
    alias: 'widget.BodysWindow',

    requires: [
        'MBD.view.bodys.Form'
    ],

    itemId: 'BodysWindow',
    minHeight: 40,
    width: 400,
    resizable: false,
    layout: {
        type: 'fit'
    },
    bodyPadding: 3,
    title: 'Body edition',
    constrainHeader: true,
    modal: true,

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            locales: {
                title: 'windows.titles.bodys'
            },
            items: [
                {
                    xtype: 'BodysForm'
                }
            ],
            dockedItems: [
                {
                    xtype: 'toolbar',
                    dock: 'bottom',
                    items: [
                        {
                            xtype: 'tbfill'
                        },
                        {
                            xtype: 'button',
                            itemId: 'btSaveForm',
                            text: 'Save'
                        },
                        {
                            xtype: 'tbseparator'
                        },
                        {
                            xtype: 'button',
                            itemId: 'btClearForm',
                            text: 'Clear'
                        }
                    ]
                }
            ],
            listeners: {
                beforerender: {
                    fn: me.onBodysWindowBeforeRender,
                    scope: me
                }
            }
        });

        me.callParent(arguments);
    },

    onBodysWindowBeforeRender: function(abstractcomponent, options) {
        Ux.locale.Manager.init();
    }

}); 

[demon222]

new locales for grid column (extjs4);-)

Ext.define('Ux.locale.override.extjs.HeaderContainer', {
    override : 'Ext.grid.header.Container',

    requires : [
        'Ux.locale.override.extjs.Component'
    ],

    setLocale : function(locale) {
        var me          = this,
            locales     = me.locales,
            text        = locales.text,
            manager     = me.locale,
            defaultText = '';

        if (text) {
            if (Ext.isObject(text)) {
                defaultText = text.defaultText;
                text        = text.key;
            }

            text = manager.get(text, defaultText);

            if (Ext.isString(text)) {
                me.setText(text);
            }
        }

        me.callOverridden(arguments);
    },

    setText : function(text) {
        this.textEl.update(text);
        this.text = text;
        return this;
    }
}); 

[szimek]

I'd like to translate dataview.List#emptyText, but I'm using some HTML there and I'd like to avoid putting it in translated text. Is there any way to do it?

The way Sencha loads classes, makes Ux.locale.Manager unavailable while loading classes (I'm loading in inside Ext.application#requires and then initializing it inside Ext.application#launch method), so I guess something like this won't work:

Ext.define("MyApp.view.List", {
  config: {
    emptyText: "<lots of html>" + Ux.locale.Manager.get("emptyText") + "</lots of html>"
  },
});

I've got the same issue in other places as well e.g. with templates. In Ext.Panel view I'm using quite a long template - is there a way to translate just parts of the template, so that I don't have to put the whole template into translated text?

It looks like Sencha in most places accepts only strings, which are evaluated when class is loaded and doesn't allow to pass e.g. functions that return strings to defer their evaluation.

[nfsilva999]

You must always run your app through a web server.

Hi Mitchell,
I have some problems with this plugin, maybe you can help me.

I´m using Ux.locale.Manager.setConfig like this

Ux.locale.Manager.setConfig({
ajaxConfig : {method : 'GET'},
language : 'pt',
tpl : './locales/pt.json',
type : 'ajax'
});

Ux.locale.Manager.init();

where pt.json is something like this:

{"buttons": {"cancel":"Cancelar","save":"Guardar","done":"OK"},"months": {"1": "Janeiro","2": "Fevereiro","3": "Março","4": "Abril","5": "Maio","6": "Junho","7": "Julho","8": "Agosto","9": "Setembro","10": "Outubro","11": "Novembro","12": "Dezembro"}}

No problem so far. I´m trying apply this into Date Picker. Works good on Browser - Chrome. However, when i´m using phonegap, the location doesn´t work anymore.

You said that the application must run through a web server. What this mean? Means that I can´t work on phonegap?

Thanks in advance,

[intellix]

Need to use locale changing within an itemTpl... anyone come up with anything yet for this that they're cool to share?

For instance:

// In other HTML text I did something like {{Text to translate}} for translating things but here it would probably mess up
<div>
    <div>Type: {type}</div>
    <div>Status: {status}</div>
</div>