1. #1
    Ext User
    Join Date
    Feb 2010
    Posts
    1
    Vote Rating
    0
    rlunder is on a distinguished road

      0  

    Default Localization?

    Localization?


    Hi. I'm quite new to Ext and I'm currently evaluating the Ext Designer. Looks like something that can help me get up to speed, but I can't seem to figure out how to localize the gui that the designer is generating. I've seen examples of how to localize handwritten code, but those presupposes that you've stored the text in class variables (that can be overridden), while the designer initializes all properties using literals.

    Could anyone show me how to best localize the following window?

    Code:
    LogInWindowUi = Ext.extend(Ext.Window, {
        title: 'Log In',
        width: 286,
        height: 139,
        autoHeight: true,
        draggable: false,
        closable: false,
        resizable: false,
        modal: true,
        initComponent: function() {
            this.items = [
                {
                    xtype: 'form',
                    labelWidth: 100,
                    labelAlign: 'top',
                    layout: 'form',
                    border: false,
                    padding: 15,
                    ref: 'logInForm',
                    items: [
                        {
                            xtype: 'textfield',
                            fieldLabel: 'Email Address',
                            anchor: '100%',
                            name: 'email',
                            ref: '../emailField'
                        },
                        {
                            xtype: 'textfield',
                            fieldLabel: 'Password',
                            anchor: '100%',
                            name: 'password',
                            inputType: 'password',
                            ref: '../passwordField'
                        }
                    ],
                    fbar: {
                        xtype: 'toolbar',
                        items: [
                            {
                                xtype: 'button',
                                text: 'Log In',
                                ref: '../../logInButton'
                            }
                        ]
                    }
                }
            ];
            LogInWindowUi.superclass.initComponent.call(this);
        }
    });

  2. #2
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,413
    Vote Rating
    129
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    We are working on a localization enhancement that will place all textual/date/time properties on the prototype of the class so that they can easily be manipulated as you would with a typical Ext subclass.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  3. #3
    Ext User
    Join Date
    Jun 2010
    Posts
    2
    Vote Rating
    0
    adjohn is on a distinguished road

      0  

    Default


    Any word on when this can be expected? In the meantime, is there a preferred way to handle localization with ext designer?

  4. #4
    Sencha - Desktop Packager Dev Team jarrednicholls's Avatar
    Join Date
    Mar 2007
    Location
    Frederick, MD
    Posts
    1,747
    Vote Rating
    7
    jarrednicholls will become famous soon enough jarrednicholls will become famous soon enough

      0  

    Default


    This is one of our priorities after our next release (coming later today). In the meantime...it's kind of hard actually and I would be bold enough to say that it's too difficult to even bother with it until the Designer properly "escalates up" all visual text properties from child items to the parent class' prototype, in such a way:

    Code:
    MyFormUi = Ext.extend(Ext.form.FormPanel, {
        MyTextField_fieldLabel: 'Name',
        MyTextField2_fieldLabel: 'Phone',
    
        initComponent: function(){
            this.items = [
                {
                    xtype: 'textfield',
                    fieldLabel: this.MyTextField_fieldLabel
                },
                {
                    xtype: 'textfield',
                    fieldLabel: this.MyTextField2_fieldLabel
                }
            ];
        }
    });
    You see how the fieldLabel's are on the prototype of the FormPanel, which configures all of its children as such. This allows the MyFormUi's prototype to be overridden with a different language for all of the properties (or more specifically, the MyForm subclass of the MyFormUi that's generated by the Designer).

    From the above example, you can see how it is a little difficult to do currently. Unless of course, you had everything setup perfectly and exported from the Designer one-time, and then manually edited the exported .ui.js file. But on a subsequent export, your work would be undone, so that's why it's hard at the moment. But again, this is a priority for us very soon.

  5. #5
    Sencha User
    Join Date
    Jul 2010
    Posts
    11
    Vote Rating
    0
    gmarziou is on a distinguished road

      0  

    Default


    I am also interested in this improvement, please post here when you get news.

  6. #6
    Sencha - Desktop Packager Dev Team jarrednicholls's Avatar
    Join Date
    Mar 2007
    Location
    Frederick, MD
    Posts
    1,747
    Vote Rating
    7
    jarrednicholls will become famous soon enough jarrednicholls will become famous soon enough

      0  

    Default


    We will certainly be informing everyone on this thread and the forums when this enhancement has been made. Thanks.

  7. #7
    Sencha User
    Join Date
    Nov 2010
    Posts
    12
    Vote Rating
    0
    x10 is on a distinguished road

      0  

    Question


    How about to enable Ext Designer to use simple global variables in component properties?
    Is the following approach to build i18n site acceptable for Ext Designer?

    index.html
    Code:
     
    ...
        <script type="text/javascript" src="js/myapp-lang-de.js"></script>
        <script type="text/javascript" src="js/MyApp.ui.js"></script> 
        <script type="text/javascript" src="js/MyApp.js"></script>
        <script type="text/javascript" src="js/on-load.js"></script>
    ...
    myapp-lang-de.js
    Code:
     
    var MyAppLanguage = new Array ();
    MyAppLanguage_Init = function () {
     MyAppLanguage["APP_TITLE"] = "Meine i18n Web Anwendung";
    }
    MyApp.ui.js
    Code:
     
    MyAppUi = Ext.extend(Ext.Window, {
        title: MyAppLanguage.APP_TITLE, 
        ....
    on-load.js
    Code:
    Ext.onReady(function() {
     MyAppLanguage_Init ();
     var myapp = new MyApp({
      renderTo: Ext.getBody()
     });
     myapp.show();
    });

  8. #8
    Ext JS Premium Member devtig's Avatar
    Join Date
    Jan 2010
    Location
    Rotterdam, The Netherlands
    Posts
    392
    Vote Rating
    13
    devtig will become famous soon enough

      0  

    Default


    Quote Originally Posted by jarrednicholls View Post
    Code:
    MyFormUi = Ext.extend(Ext.form.FormPanel, {
        MyTextField_fieldLabel: 'Name',
        MyTextField2_fieldLabel: 'Phone',
    
        initComponent: function(){
            this.items = [
                {
                    xtype: 'textfield',
                    fieldLabel: this.MyTextField_fieldLabel
                },
                {
                    xtype: 'textfield',
                    fieldLabel: this.MyTextField2_fieldLabel
                }
            ];
        }
    });
    Looking forward to see this enhancement in the next Ext Designer version.

    Similar request: http://www.sencha.com/forum/showthre...tilanguage-app

  9. #9
    Ext JS Premium Member devtig's Avatar
    Join Date
    Jan 2010
    Location
    Rotterdam, The Netherlands
    Posts
    392
    Vote Rating
    13
    devtig will become famous soon enough

      0  

    Default


    bump

  10. #10
    Sencha User
    Join Date
    Apr 2010
    Posts
    19
    Vote Rating
    0
    endielo is on a distinguished road

      0  

    Default


    When will the Ext Designer to support localization?