1. #1
    Sencha User
    Join Date
    Jul 2012
    Location
    France
    Posts
    159
    Vote Rating
    3
    Answers
    2
    Elfayer is on a distinguished road

      0  

    Default Unanswered: How to use the localization?

    Unanswered: How to use the localization?


    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

  2. #2
    Sencha User
    Join Date
    Dec 2011
    Posts
    58
    Vote Rating
    6
    Answers
    3
    WillBill is on a distinguished road

      0  

    Default


    PHP Code:
    Ext.getCmp('noLogout').setText('button text'); 

  3. #3
    Sencha User
    Join Date
    Dec 2011
    Posts
    58
    Vote Rating
    6
    Answers
    3
    WillBill is on a distinguished road

      0  

    Default


    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

  4. #4
    Sencha User
    Join Date
    Jul 2012
    Location
    France
    Posts
    159
    Vote Rating
    3
    Answers
    2
    Elfayer is on a distinguished road

      0  

    Default


    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> 

  5. #5
    Sencha User
    Join Date
    Dec 2011
    Posts
    58
    Vote Rating
    6
    Answers
    3
    WillBill is on a distinguished road

      0  

    Default


    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();

  6. #6
    Sencha User
    Join Date
    Jul 2012
    Location
    France
    Posts
    159
    Vote Rating
    3
    Answers
    2
    Elfayer is on a distinguished road

      0  

    Default


    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

  7. #7
    Sencha User
    Join Date
    Dec 2011
    Posts
    58
    Vote Rating
    6
    Answers
    3
    WillBill is on a distinguished road

      0  

    Default


    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"

  8. #8
    Sencha User
    Join Date
    Jul 2012
    Location
    France
    Posts
    159
    Vote Rating
    3
    Answers
    2
    Elfayer is on a distinguished road

      0  

    Default


    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?

  9. #9
    Sencha User
    Join Date
    Dec 2011
    Posts
    58
    Vote Rating
    6
    Answers
    3
    WillBill is on a distinguished road

      0  

    Default


    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.

  10. #10
    Sencha User
    Join Date
    Jul 2012
    Location
    France
    Posts
    159
    Vote Rating
    3
    Answers
    2
    Elfayer is on a distinguished road

      0  

    Default


    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'
        }]
    })

Thread Participants: 2