Hey,

This might be more of an example to put into the demo, but if you were build a Single Page App, then you would need the ability to change the language after the app is initialized.

The trivial approach is to set a cookie or local storage and then reload the page. But if the preference is stored in the user model (because you also send server generated notifications in the preferred language, perhaps) then you will get the language after everything is initialized. This is a normal usecase, I would think.

Reloading the page once you get a different language from the user (and using cookies et. al.) is a bad approach. There should be a better solution.

If it changes how you create your app, so be it, but that should be demonstrated at least.

Hello elmasse:
First, i was implementation Ext.i18n.Bundle in a simple environment it's running.
But when i do this again in MVC architecture, it doesn't run. I will find the problem? but i want to know, the Ext.i18n.Bundle is support MVC ?

This does not seem to work:

Ext.create(Ext.define(null, {
    extend: 'Ext.button.Button',
    text: { type: 'bundle', key: 'Contact' }
}), { renderTo: document.body })

Getting error message as posted per PM.

• Update Sencha Cmd
• Update to latest ExtJS 6.2
• Tests
• Release

Hi,

I tried to use the i18n bundle, but it failed to work and shows me the below error in chrome.

I followed the steps as mentioned in Readme, except that I placed the properties file in resources/i18n folder.

Index.jsp

Ext.Loader.setConfig({
  enabled: true,
  paths: {
        'Ext.i18n': '<%=request.getContextPath()%>/resources/i18n'  
  }
});

app.js

Ext.onReady(function(){
    
    Ext.application({
        requires: ['Ext.i18n.Bundle'],
        name: 'Mot',        
        bundle: {
            bundle: 'Application',
            lang: 'en-US',
            path: 'resources/locale',
            noCache: true,
            format: 'json'
        },      
        launch: function() {
            
             var myForm =Ext.create('Ext.FormPanel',{
                    width:350,
                    height:200,
                    id:'loginForm',
                    title: Mot.getApplication().bundle.getMsg('app.name'),
                    cls:'loginform',
                    //style: 'margin:7cm 1cm 4cm 14cm;',
                    layout:'vbox',
                        items:[{
                            xtype: 'textfield',
                            fieldLabel:'User Name', //bundle.getMsg('username'),  
                            cls:'alignment',
                            //style:'margin:10px 10px 10px 10px',
                            name: 'username',
                            id:'username',
                            maxLength:20,
                            minLength:5,
                            allowBlank: false
                        }, {
                            xtype: 'textfield',
                            fieldLabel: 'Password',  
                            cls:'alignment',
                            //style:'margin:10px 10px 10px 10px',
                            name: 'password',
                            id:'password',
                            maxLength:20,
                            minLength:5,
                            allowBlank: false
                            
                        }],
                        buttons: [{
                            text: 'Login',
                            id: 'btnLogin',
                            handler: function () {
                                //console.dir(Ext.getCmp('loginForm'));
                                var form = Ext.getCmp('loginForm').getForm();

                                alert(' form ');
                                if (form.isValid()) {
                                    var login=Ext.create('resources.controllers.LoginController');
                                    login.submitLoginForm();
                                    form.reset();
                            }
                            }
                        }]
                });
            Ext.create('Ext.container.Viewport', {
                layout: 'border',
                items: [{
                    region:'center',
                    items:myForm
                }]
            });
        }
    });
});

I am using ext-4.1.1a build.

Am I missing anything?

Thanks,
Madan Narra

using Test sample included with Bundle getting this in 4.1

me.createFieldAccessExpression is not a function
[Break On This Error] code.push(' dest', ...on(field, varName, 'source'), ';\n');
ext-all-debug.js (line 19350)

4.0.7 works fine

When I use the .properties file which contains simple chinese, it shows messy code on the page. could you please see it?

We should be able to load not only .properties files but as well json using the same rules as for properties keys load and override.

Dear elmasse:
I have a problem here. I create a combobox and use "Ext.i18n.Bundle" to set the value of displayfield. I found the renderer always get displayfield value, not valuefield. And this is only occur in IE, it is correct in firefox. Do you know why happen about this problem?

this is a part of code:
...
{ header: "Policy", dataIndex:'policy', flex: 1, sortable: true, align:'center',
renderer:function(value){
return (value.indexOf('ro') > -1 )?
Ext.i18n.appBundle.getMsg('Sharev.READY_ONLY'):
Ext.i18n.appBundle.getMsg('Sharev.READY_WRITE');
},
editor:{
xtype:'combobox',
mode: 'local',
triggerAction: 'all',
forceSelection:true,
displayField:'label',
valueField:'policy',
store:{
xtype: 'jsonstore',
fields:[ 'label', 'policy' ],
data:[
{label: Ext.i18n.appBundle.getMsg('Sharev.READY_ONLY'), policy: 'ro'},
{label: Ext.i18n.appBundle.getMsg('Sharev.READY_WRITE'), policy: 'rw'}
]
}
}//eo editor
}

When using Ext JS 6.2, an error is thrown when me.getConfigurator() is called in the Bundle.js file.

Add support for messages like "The value is {0}" with getMsg('key', [values])

Need to add some formal unit test.

When requesting a localized value the call stack is:
-> i18n.getMsg(key)
-> Store.getById(key)
-> Record.getId()

In Ext-JS 4.2 beta Record.getId() was:

 getId: function() {
     return this.get(this.idProperty);
 }

and is now replaced by:

getId: function() {
    return this.get(this.idField.name);
}

Setting idProperty in Property.js and Json.js is not enough as it just override the property and does not reinitialize idField (which remained set to 'id')

Doing this will do the trick:

Ext.merge(Model.prototype, {
    idProperty: this.getIdProperty(),
    idField: new Ext.data.Field(this.getIdProperty()),
    idgen:{
        getRecId : function(rec){
            return rec.internalId;
        }
    }
});

Hope this help ;)

Hi,

I have run into a problem while using elmasse-bundle with Sencha Ext JS v6.2.1 application. I am aware that currently there is no support for MVC architecture, but I was still able to somehow use this bundle in an MVC application having Sencha Ext JS version 6.0.2 with a few compromises, that I was OK with. But now I am unable to run the same MVC application having Sencha Ext JS version 6.2.1.

I didn't use 'sencha app upgrade' cmd for upgrading my application, instead I generated a fresh Sencha Ext JS v6.2.1 application and copied all MVC files. I followed all the steps in the documentation to install a fresh copy of elmasse-bundle. But I am getting the following error while running the app in the browser.

Uncaught TypeError: me.getConfigurator is not a function(…) Bundle.js?_dc=1480744665177:278

No idea whats's going wrong!!

Thanks In Advance.

One feature that would be exceptionally useful is internal property references.

Lets say I have the properties for OK and Cancel buttons. So I'm going to put them in app.common.button.ok.label and app.common.button.cancel.label.

So for all my alerts and what not, I'm going to use those two for the buttons. Great. Except that when I don the "Send Message" window, what I want is "Send" and "Cancel" So now, do I use app.sendmessage.button.send.label?

So far its not to onerous. Simply create new properties for the exceptions.

Invariably, you run into some situation where for most of the languages you can use the "common" value but in this one, there is a better choice that can be used. So you end up with several languages where the value is the same as elsewhere and one where it is different.

It would be nice if we could refer to other properties in some property. So in my exmaple, I'd have:

app.sendmessage.button.send.label:Send
app.sendmessage.button.cancel.label:@app.common.button.cancel.label

I would take the same approach as Android, and make it all or nothing. If the entire value (trimmed of leading and following white space) is the name of a property, replace that string with the value of the property.

This bundle should use a custom prefix.

It is assumed that all classes prefixed by Ext are internally written Sencha classes. (community standard)

should be renamed to something like:

Elmasse.ux.i18n bundle

Hi,

My app is based on simple MVC architecture.

How do I change the language dynamically in the controller?

I find that the latest elmasse-bundle(version 1.1.0) examples are based on MVVM architecture.

Thanks In advance.

I started an app with ExtJS 5 and checked that this plugin does not work on it.

First I deleted this snippet of code and it started working again.
But with json format I had issues again:

Error: Uncaught TypeError: undefined is not a function at line 29 of Json.js:

record = new Model(undefined, me.getId(node), node, convertedValues = {});

I tried to solve this issue but failed.

Just for curiosity, I checked that it does not show any error with property format but it always shows value my.property.undefined.

It ist posibile that the bundle already has loaded all files, when the following onReady(fn)-Function is called.

I fixed this problem with an additiional attribute "isReady". Here is the code-snipped:

/**
 * @method: onReady
 * The fn will be called when the Bundle file is loaded.
 * @param: fn {Function}
 */
onReady: function(fn){
    this.readyFn = fn;
    this.on('loaded', this.readyFn, this);
  if(this.isReady)
  {
     this.readyFn.call(this);
  }
},

/**
 * @private
 */
onBundleLoad: function(store, record, success, op) {
    if(success){
     this.isReady = true;
        this.fireEvent('loaded');
    }
},

We should load the files in the following order:

Application.properties
Application_xx.properties //1
Application_xx-YY.properties //2

1 if lang is specified as 'xx' or 'xx-YY' (for instance: 'en', 'en-US');
2 if lang is specified as 'xx-YY'

Load order should be reversed as from today. Load the bottom-up from less to more specific and override the keys.

bundle property inside bundle is less descriptive, name could be a better approach.

Hi,

Is there any way I can switch between different languages at runtime??

Thanks In Advance.

Currently, the check only does "if (values)" but it should do "if (values.length)" to make sure values were passed in. Sometimes we need a tokenized stringed translated but we want to leave the token placeholders in place for other downstream processing.

I’ve noticed that the bundle tries to look for something like “MyApp_en-.properties” if the language code doesn’t have “-US” or “-CN”, so it would have problem if the language is just “en” or “ja”. Can you please take a look?

Thanks.

I took a look at your bundles cause I think it's what I need as far as organizing resources goes, but I'm not sure. the clone was severely lacking examples and use cases.

I'm building a language that dynamically generates MVCS/W based on data sets from multiple sources (aws rds/aurora, dynamo, mongo, postgre, etc.) and uses those to create ExtJS code, and Swagger APIs. Anyhow, I like the idea of bundling apps together in a way where the resources are accessible and less disorganized. You don't state your rationale in the Readme.md ... if you have time hit me up on hc:irc(freenode:disruptive) or [email protected] https://www.hipchat.com/invite/513222/8ed949451ff5a195079c84e1bd1e633b?utm_campaign=company_room_link

Here's the project I've been barely starting, much of the code is crypto and/or written in go/php/ruby/bash and designed for docker/heroku with elastic beanstalk or EC2 AMI.

https://github.com/largesoft/skel

I'm still at odds as to whether or not to generate columns & fields from JSON and load them with the Ext.Loader, or if I should just have the server-side language create the models and corresponding stores, grids, etc.

For instance: right now I can generate columns in JSON or array
http://a.badasscrm.com/skel/make.columns.php?c=contacts
http://a.badasscrm.com/skel/make.columns.php?c=contacts&f=array

It has become apparent to me that it's not common to pull the fields/columns/associations/validations from JSON, but rather to write the models. So I guess I'm leaning more towards just creating the models dynamically and linking it to an api. But I'm gonna make my own shorthand for it using functions like this:

function createModel(fields) {
return Ext.define('Rex.store.reading.Skel' + Ext.id(), {
        extend: 'Ext.data.Model',
        fields: fields,    
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                totalProperty: 'tc',
                root: 'Result'
            }
        }
    }
});

The end result would allow the user to create sophisticated apps, because the software is designed to allow them to manage fields/columns across a broad spectrum or applications.
https://www.lucidchart.com/documents/edit/4a9babed-a1be-46e6-8f18-aebefcbbca0e?shared=true&

I've been doing web a long time, and it's a very fun project cause of the end goal for me. I love AWS and am devout ;)

.... So I'm not sure if this fits in with what you are doing... but yours is the closest thing I've found to a packaged solution that can be distributed for ExtJS open source with software like mine in container apps for the purpose of rapid deployment.

Cheers!
<< sorry for the long rant... I do that.... haha >>