Added support for i18n of the data portion of the config.

[matthewdfleming]

This allows for translations within standard Components with tpl as well as the list items within a DataView. I tested this only within Sencha Touch (2.3.1). Since you are much more familiar with the event patterns used, please let me know if there is some condition or feature that I'm messing up based upon the implementation.

Container tpl block example

The name of the member variable within the locales/data block gets pushed into the tpl with a variable of the same name. So in the example above, privacyPolicyText will get translated using the General.Footer.Links.PrivacyPolicy.Text key inside the i18n json files, and that value will be used within the template.

extend: 'Ext.Container',
locales: {
    data: {
        privacyPolicyText: 'General.Footer.Links.PrivacyPolicy.Text'
    }
},
tpl: [
    '<span>&copy; ' + Ext.Date.format(new Date(), 'Y') + ' Company<sup>&reg;</sup></span> ',
    '<a href="#privacy">{privacyPolicyText}</a>'
]

DataView itemTpl block example

Same as the container block above, the only things to note here are:

• You can see how the existing i18n mixes in with the data substitution
• There is a second object form of the data substitution if you want to use the key/defaultTranslation style that seems to be supported in general.

xtype: 'dataview',
locales: {
    title: 'Screens.Programs.ToolBarText',
    loadingText: 'General.Mask.Loading.Programs',
    emptyText: 'Screens.Programs.Body.NoneAvailable',
    data: {
        viewByDateText: {
            key: 'Screens.Programs.Body.ViewByDateText',
            defaultTranslation: ''
        },
        unavailableProgramText: 'Screens.Programs.Body.UnavailableProgram'
    }
},
itemTpl: [
    '<div class="program <tpl if="!mobileAvailable">unavailable</tpl>">',
        '<div class="indicator <tpl if="completed">completed</tpl>"></div>',
        '<div class="data">',
            '<h1>{name}</h1>',
            '<div class="viewBy">',
                '<tpl if="mobileAvailable">',
                    '{viewByDateText} <strong>{viewBy:date("m/d/Y")}</strong>',
                '<tpl else>',
                    '{unavailableProgramText}',
                '</tpl>',
            '</div>',
        '</div>',
        '<div class="list-icon chevron"></div>',
    '</div>'
],

[matthewdfleming]

I don't love this... but without it the updateData is called in the super class which creates a store with the translation configuration items as records. So I put this check in which seems to work. Any cases that might blow up?