How to use the localization?

**Elfayer** · 20 Jul 2012 2:03 AM

Hi,

I would like to try the localization feature with this example:

Code:

Ext.define('DSK.view.desktopSouth.logout', {
    extend: 'Ext.window.Window',
    alias: 'widget.logout',

    title: 'Logout',
    html: "<center><br><p>Are you sure you want to logout ?</p><br></center>",
    resizable: false,
    height: 125,
    width: 300,
    buttons: [{
        text: 'Yes'
        },
        {
        text: 'No',
        id: 'noLogout'
    }]
})

I would like to change the static text of the buttons "yes" and "no" by something dynamic.

I've found that but don't know how to implement it on a view:

Code:

Ext.window.MessageBox.buttonText.yes

**WillBill** · 20 Jul 2012 2:16 AM

PHP Code:


Ext.getCmp('noLogout').setText('button text');

**WillBill** · 20 Jul 2012 2:44 AM

This is probably a better solution:

Code:

Ext.define('DSK.view.desktopSouth.logout', {
    extend: 'Ext.window.Window',
    alias: 'widget.logout',
    buttonsText: {
        yes: 'something',
        no: 'something else'
    },
    title: 'Logout',
    html: "<center><br><p>Are you sure you want to logout ?</p><br></center>",
    resizable: false,
    height: 125,
    width: 300,
    initComponent: function() {
        var me = this;
        Ext.applyIf(me, {
            buttons: [{
                text: me.buttonText.yes
                },
                {
                text: me.buttonText.no,
                id: 'noLogout'
            }]
        });
         me.callParent(arguments);
    }    
});

Now each time you create it, you can specify buttonsText.

PHP Code:


Ext.create('DSK.view.desktopSouth.logout', {
       buttonsText: {
             yes: 'new text',
             no: 'new text'
       }
}).show();

hope this helps

**Elfayer** · 20 Jul 2012 3:45 AM

I didn't succeed to make it work. And I'm not sure that's gonna make what I want.

I want my program to change language automatically just by changing the src of this script :

PHP Code:


<script type="text/javascript" src="~/Ext/locale/ext-lang-fr.js"></script>

**WillBill** · 20 Jul 2012 4:30 AM

Working example:

Code:

<html>
<head>
    <title>test</title>
    <link rel="stylesheet" type="text/css" href="http://extjs-public.googlecode.com/svn/tags/extjs-4.0.7/release/resources/css/ext-all.css" />
    <script type="text/javascript" src="http://extjs-public.googlecode.com/svn/tags/extjs-4.0.7/release/ext-all-debug.js"></script>
    <script>
    Ext.onReady(function() {
        Ext.define('DSK.view.desktopSouth.logout', {
            extend: 'Ext.window.Window',
            alias: 'widget.logout',
            buttonsText: {
                yes: 'something',
                no: 'something else'
            },
            title: 'Logout',
            html: "<center><br><p>Are you sure you want to logout ?</p><br></center>",
            resizable: false,
            height: 125,
            width: 300,
            initComponent: function() {
                var me = this;
                Ext.applyIf(me, {
                    buttons: [{
                        text: me.buttonsText.yes
                        },
                        {
                        text: me.buttonsText.no,
                        id: 'noLogout'
                    }]
                });
                 me.callParent(arguments);
            }    
        });
        
        Ext.create('DSK.view.desktopSouth.logout', {
               buttonsText: {
                     yes: 'new text',
                     no: 'new text'
               }
        }).show();
    });
    </script>
</head>
<body>


</body>
</html>

I'm assuming 'ext-lang-fr.js' contains string variables, right?
Let's say you have 2 variables in there.

Code:

var yes_variable = 'Qui';
var no_variable = 'No';

You can use those variables as shown below

Code:

Ext.create('DSK.view.desktopSouth.logout', {
               buttonsText: {
                     yes: yes_variable,
                     no: no_variable
               }
        }).show();

**Elfayer** · 20 Jul 2012 5:44 AM

No that's not what I want, here you are not using the ext-lang-fr.js (for example). You only allow to modify manually two variables.

If the user is spanish, i'll charge the ext-lan-es.js, if the user is french, i'll charge the ext-lan-fr.js, etc.. And I want to adapt the language of the program according to the user language, using the localization : http://docs.sencha.com/ext-js/4-1/#!/guide/localization

**WillBill** · 20 Jul 2012 6:07 AM

I guess I missunderstood the question, this should work:

Code:

Ext.Msg.buttonText.no

Code:

<script type="text/javascript" src="http://extjs-public.googlecode.com/svn/tags/extjs-4.0.7/release/locale/ext-lang-de.js"></script>

result:

Code:

Ext.Msg.buttonText.no
"Nein"

**Elfayer** · 20 Jul 2012 6:12 AM

Yes, I want to use something like that : "Ext.Msg.buttonText.no", but I don't know how to put it in my code, because this is a view, and that code (Ext.Msg.buttonText.no), seems to be used on a controller, or did I miss something?

**WillBill** · 20 Jul 2012 6:21 AM

this should work for you

Code:

Ext.define('DSK.view.desktopSouth.logout', {    
     extend: 'Ext.window.Window',   
     alias: 'widget.logout',   
     title: 'Logout',   
     html: "<center><br><p>Are you sure you want to logout ?</p><br></center>",    
     resizable: false,   
     height: 125,    
     width: 300,   
     buttons: [
     {       
           text: Ext.Msg.buttonText.yes       
      },       
      {        
          text: Ext.Msg.buttonText.yes,        
         id: 'noLogout'    
     }
]})

You can put it in either your view or controller.

**Elfayer** · 20 Jul 2012 6:37 AM

It's not working (because I charge the "ext-lang-fr.js")... But I have "Yes" and "No" on the buttons..

Code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="@Url.Content("~/Content/desktop.css")" type="text/css" media="screen" />
    @*<link rel="stylesheet" type="text/css" href="/Scripts/ExtJS/resources/css/ext-all.css" />*@
    
    <script src="@Url.Content("~/Ext/bootstrap.js")" type="text/javascript"></script>
    <link href="@Url.Content("~/Ext/resources/css/ext-all.css")" rel="stylesheet" type="text/css" />

    <script type="text/javascript" src="~/Ext/locale/ext-lang-fr.js"></script>

    <script src="@Url.Content("~/Scripts/src/app.js")" type="text/javascript"></script>

    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>

</head>
<body>
    <div id="main">
    @RenderBody()
    </div>
</body>
</html>

Here is the same thing :

Code:

Ext.define('DSK.view.desktopSouth.logout', {
    extend: 'Ext.window.Window',
    alias: 'widget.logout',

    title: 'Logout',
    html: "<center><br><p>Are you sure you want to logout ?</p><br></center>",
    resizable: false,
    height: 125,
    width: 300,
    buttons: [{
        text: Ext.Msg.buttonText.yes
        },
        {
            text: Ext.Msg.buttonText.no,
        id: 'noLogout'
    }]
})

How to use the localization?

Thread Tools

Search Thread

Display

Unanswered: How to use the localization?

Unanswered: How to use the localization?