Ux.locale.Manager

[intellix]

Hello,

is this component still supported? I noticed an interesting issue: The MVC example only works when sencha-touch-all-debug.js or sencha-touch-all.js is used (st v 2.0.0 commercial was used for the test). When the other sencha-touch libs are used, Ext.ComponentQuery does not return all components (save/cancel buttons in the lower left corner and the datepicker).

Bug?

This is also the same issue I was getting earlier. Spent a couple of hours trying to see what the difference between my code and yours was (mine is output from Architect so I can't really change it without abandoning Architect).

Taken straight from the Issue I opened up on Git but putting it onto here so other people don't miss what I found:
These have to be on the outside, otherwise the button text don't get translated:

Ext.require([
'Ux.locale.Manager',
'Ux.locale.override.st.Component'
]);

they can't be inside Ext.application({ requires: [] }) like the rest of them... I guess this has something to do with the resources not being loaded in time/in the correct order otherwise? Even though I thought the required: [] stuff in the other overrides would say what it needed first.
You also need to use the microloader to load in the resources like so:
"sdk/microloader/development.js"
So that the files are loaded by file, rather than the way Architect spits out the code:
"sdk/sencha-touch-all-debug.js"

So if it requires the microloader to load in the files one by one, and the Manager+Component files need to be loaded first, does this work properly when the application is bundled as it seems to be quite bitchy about what's loaded when.
I'm quite a beginner, my first pull-request just got it working for me but after looking at the above I guess quite a bit of work needs doing to fix it.

[mitchellsimoens]

Ux.locale.Manager does not require the microloader or an app to be created by Sencha Command. Ux.locale.Manager comes with 2 examples, the mvc one that was created with Sencha Command and a regular simple example that just loads sencha-touch-debug.js and both of them work.

[intellix]

Ux.locale.Manager does not require the microloader or an app to be created by Sencha Command. Ux.locale.Manager comes with 2 examples, the mvc one that was created with Sencha Command and a regular simple example that just loads sencha-touch-debug.js and both of them work.

It doesn't work with code generated with Architect, for instance go to the MVC example provided and replace:

<script id="microloader" type="text/javascript" src="sdk/microloader/development.js"></script>

with

<link rel="stylesheet" type="text/css" href="https://extjs.cachefly.net/touch/sencha-touch-2.0.1/resources/css/sencha-touch.css"/>
<script type="text/javascript" src="https://extjs.cachefly.net/touch/sencha-touch-2.0.1/sencha-touch-all-debug.js"></script>
<script type="text/javascript" src="app.js"></script>

And in the console you get the error:

Uncaught TypeError: Cannot call method 'get' of null 

And to kill button translations only inside app.js (which is again how Architect spits out the code) then change:

Ext.require([
    'Ux.locale.Manager',
    'Ux.locale.override.st.Component'
]);


Ext.application({
    name: 'Locale',


    requires: [
        'Ext.MessageBox',
        'Ext.Ajax',


        'Ux.locale.override.st.Button',
        'Ux.locale.override.st.Container',
        'Ux.locale.override.st.TitleBar',
        'Ux.locale.override.st.field.Field',
        'Ux.locale.override.st.picker.Picker'
    ],

to

Ext.application({
    name: 'Locale',


    requires: [
        'Ext.MessageBox',
        'Ext.Ajax',


        'Ux.locale.Manager',
        'Ux.locale.override.st.Component',

        'Ux.locale.override.st.Button',
        'Ux.locale.override.st.Container',
        'Ux.locale.override.st.TitleBar',
        'Ux.locale.override.st.field.Field',
        'Ux.locale.override.st.picker.Picker'
    ],

[mitchellsimoens]

Then architect needs a way to allow you to require before Ext.application

[intellix]

Ok so this has something to do with the order that things are loaded. I guess the overrided classes need to load before the actual classes otherwise it doesn't work.

I guess the first Ext.require({}); forces those items to be loaded before anything else.

Edit: mitchellsimoens has released an update which fixes what I was moaning about

[intellix]

At the moment I can see that for HTML it only allows to translate the entire thing (whereas I need to translate parts like: Cool products - <b>Buy some now</b>

So I guess I will add some sort of functionality for find/replace of variables when it comes to HTML so translators don't have to deal with (and break) HTML, something like:

html: '{Cool products} - <b>{Buy some now}</b>'

fr.json

{
"Cool products": "Le cool products",
"Buy some now": "Le buy somé"
}

Also, with the above 'example' I was thinking that creating a list of ID's and having the english content would be a bit of a waste... so perhaps you could have a 'default' language which doesn't get translated and is used for the keys of the other language. So instead of:

// en.json
{
    button: {
        cancel: "Cancel",
        done: "Done"
    }
}

// fr.json
{
    button: {
        cancel: "Le cancel",
        done: "Le doné"
    }
}

You would just have:

// 1) Language is EN, do nothing
// 2) Changed to FR, grab file and use the content as keys:

// fr.json
{
"Cancel": "Le cancel",
"Done" : "Le doné"
}

Agh... Ext.Template doesn't support spaces in variable's like Mustache does: {Cool products} for instance -.- Hitting wall after wall since I started

[intellix]

Sorry to spam but, I've got partial replacing done for html.

// Inside Ux/locale/override/st/Component.js - replace setLocale() function with this:
setLocale : function(locale) {
        var me          = this,
            locales     = me.locales || me.getInitialConfig().locales,
            html        = locales.html,
            manager     = me.locale,
            defaultText = '';


        if (html) {


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


            if (Ext.isString(html)) {
                // Allow translating parts of string
                Ext.each(html.match(/\{(.+?)\}/g), function (found) {
                    var text = found.substr(1).substr(0,(found.length-2));
                    html = html.replace(found, manager.get(text, defaultText));
                });


                me.setHtml(html);
            }
        }
    }

And then on your elements, something like:

locales: {
     html: "{Fairy tales} - <span>{are great}</span>"
}

And inside your JSON files:

{
   "Fairy tales": "le fairy tales",
   "are great": "le un great"
}

[intellix]

Anyone got any idea how this can be done for DataView/DataItem template stuff?

I'm trying to implement locality to the validation strings. First I tried to override the validation stuff (which you can't because it's a singleton. Then I tried to override the model stuff which loops through the errors after validation for each field and apply the translation there (which you can't because this only works for components) and now I'm looking at DataView overriding as I'm looping through the errors upon pressing a button and setting it to a DataView.

I'm using a TPL and the array of errors to list each of the errors under particular fields, which looks like this:

errorElement = Ext.create('Ext.Panel', {
    cls: [
         'error-list'
    ],
    id: key + '-errors',
    items: [
    {
        xtype: 'dataview',
        scrollable: false,
        itemTpl: [
            '{text}'
        ],
        store: {
            fields: ['text'],
            data: errorDataList
        }
    }
    ]
});

Not entirely sure how this is going to work because this is all based on applying a locales: {} variable to a component with the string key you want the translation of. I have absolutely no idea where to start as there's no obvious place that shows where the DataItems are created within a DataView as it gets the data

[mitchellsimoens]

The autoupdate currently works for components as that's the only thing that displays things.

However there are classes that contain text. There are a couple ways we can proceed with these things... in applyLocales method of Ux.locale.Manager we can fire an event and your application can listen to this and handle it. Or we can create mixins for these other classes that we can use and those can have the individual logic for each class... any other suggestions for that?

For the dataview, wonder if you could use prepareData or hook into the container's updateListItem method

[intellix]

Cool, thanks for the pointer.
I can change the content within prepareData but updateListItem doesn't seem to run for my DataView/DataItem stuff.
I did try this with my DataView, but it didn't quite work:

itemConfig: {
     enableLocales: true,
     locales: {
         html: 'test'
     }
}

I see that the HTML for DataItem is set after applying the TPL within: Ext.dataview.element.Container#getItemElementConfig

Edit: Got it to work by taking the locales:{} etc outside of the itemConfig and actually into the item itself like:

{
xtype: 'dataview',
locales: 'blah'
}

As soon as the dataview is created I can loop through the data that is there. I didn't think the data would exist yet so the locales: {} stuff needed to be on the dataItem's that it creates. I can get it sort of working with setLocales by looping through the store but I change the original content also. Wanted to make it change on the prepareData method so it never touches the original content.
Edit: had some issues but figured I wasn't returning the overidden stuff debugging line-by-line