Ext.LocaleManager

[galdaka]

I do lots of things within initComponent like specify any items or dockedItems so not sure why this is "dirty". In fact I would do something like this:

initComponent: function() {
    var me = this;

    Ext.apply(me, {
        items : me.buildItems()
    }, me.applyLocale());

    me.callParent(arguments);
},

applyLocale: function() {
    return {
        title : manager.get('titles.test', 'Test Title')
    };
}

In any JS locale, I don't see a way to do it without rerendering things.

If I create viewport regions in "Initcomponent" I can not defer literal "setters" in your "applyLoacle" function.

Initcomponent:

1) Create regions.
2) Ext.apply...
3) this.callParent(arguments)

I need set literals from locale in 1) and I think is not posible....

P.D: Sorry for my English.

[mitchellsimoens]

So do two steps... first to set the locales and second to build items.

I'm not trying to be stubborn, I just don't agree with the "dirtiness" and don't see a need to hook into Ext.Loader that probably won't be there in production as it's a development tool.

[galdaka]

Ext.define('Ext.app.MainViewport', {

extend: 'Ext.container.Viewport',

initComponent: function () {

Ext.app.locale.LocaleManager.setConfig({            
         language : 'es',            
         ns       : 'locale',            
         path     : '../locale'        
  });    

Ext.app.locale.LocaleManager.loadLocale(this.applyLanguage); 

    var northRegion = {
      xtype: 'container',
      region: 'north',
      width: 400,
      layout: {
        type: 'hbox',
        padding: '1',
        pack: 'end',
        align: 'top'
      },
      items: [{
        xtype: 'buttongroup',
        columns: 3,
        items: [{
          xtype: 'button',
          text: 'Galdaka', //NEED LOCALE TEXT HERE!! 
          align: 'middle',
          autoWidth: true,
          iconCls: 'user',
          menu: [{
            text: 'Login...', //NEED LOCALE TEXT HERE!!
            iconCls: 'login',
            handler: Ext.bind(this.msg, this)
          }, {
            text: 'Logout', //NEED LOCALE TEXT HERE!!
            iconCls: 'logout', 
            handler: Ext.bind(this.msg, this)
          }]
        }]
      }]
    };


    var centerRegion = {
      xtype: 'container',
      region: 'center',
      layout: 'border',
      defaults: {
        split: true
      },
      border: false,
      items: [{
        id: 'app-container',
        title: 'Aplicaciones', //NEED LOCALE TEXT HERE!!
        region: 'west',
        hidden: true,
        animCollapse: true,
        collapsible: true,
        width: 200,
        stateful: false,
        minWidth: 150,
        maxWidth: 400,
        layout: 'accordion',
        layoutConfig: {
          animate: true
        }
      }, {
        id: 'app-center-container',
        xtype: 'tabpanel',
        region: 'center',
        resizeTabs: true,
        enableTabScroll: true,
        items: [{
          xtype: 'portalpanel',
          title: 'Inicio', //NEED LOCALE TEXT HERE!!
          iconCls: 'home',
          items: [{
            id: 'col-1',
            items: [{
              id: 'portlet-1',
                            height: 200,
              title: 'Donaciones ExtJS', //NEED LOCALE TEXT HERE!!
              html: '<div>sfdfdfd</div>'
            }]
          },{
            id: 'col-2',
            items: [{
              id: 'portlet-3',
              height: 140,
              title: 'Currículum', //NEED LOCALE TEXT HERE!!
              html: '<div>sfdfdfd</div>'
            }]
          }]
        }],
        listeners: {
          tabchange: Ext.bind(this.expandAppTree, this)
        }
      }]
    };


    Ext.apply(this, {
      id: 'appMainViewport',
      layout: {
        type: 'border',
      },
      items: [northRegion, centerRegion]
        }
    );
},

applyLanguage: function(manager){
   alert(manager.get('buttons.action')) 
}

.... 

I don´t understand. Where is the secuence of call for make translation in this case?

You can view that I need "literals" in definition step...

____>>

Originally managed your component was focused your locale files.

I think it is important to the process of loading the file locale. And it's great how you did.

But to do half the work that remains: You must assign the literal charged the least intrusive way possible for the ExtJS code.

A synchronous load would make things easier ...

Thanks and grettings,

[mitchellsimoens]

Ok, I can make a sync XHR call (well, have option too).

[galdaka]

Ok, I can make a sync XHR call (well, have option too).

Hey thanks. I hope your news for implement in my web!!!

[mitchellsimoens]

Hey thanks. I hope your news for implement in my web!!!

After reading some code (Connection.js in particular) I found out that Ext.Ajax.request now support sync requests. It defaults to async but you can make a sync call like this:

Ext.Ajax.request({
    method : 'POST',
    url    : 'something.php',
    async  : false
});

So Ext.LocaleManager already supports sync calls!

Ext.LocaleManager.setConfig({
    ajaxConfig : {
        method : 'GET',
        async  : false
    },
    language   : 'es',
    path       : 'locale.php',
    type       : 'ajax'
});

I have updated the ajax demo to be sync. In the PHP file, I sleep the script for 5 seconds and added a console.log after the load method on Ext.LocaleManager fires. If that echos out right away, it should be async. If it does it after the callback, it is sync. Just tested, and it was last thing to echo out in the console.

[galdaka]

Sorry. I tested and not work for me...

Ext.define('Ext.app.MainViewport', {

  extend: 'Ext.container.Viewport',     

 initComponent: function () {          

Ext.app.locale.LocaleManager.setConfig({           
 language : 'gb',           
 ns       : 'locale',          
  path     : '../locale',            
async         : false        
});                

alert(111);                

Ext.app.locale.LocaleManager.loadLocale(function(manager){             
alert('Loaded!!!');         
});              

  alert(222);

    var northCenterRegion = {      
    xtype: 'container',      
    region: 'center',   
    layout: {
....
... 

And the secuence is:

1) "111"
2) "222"
3) "Loaded!!!"

Other question: How can access "manager" in "initComponent" when sync call works?

Thanks in advance,

[mitchellsimoens]

You didn't set up the LocaleManager correctly... there is a special Object to configure the Ext.Ajax.request:

Ext.LocaleManager.setConfig({
    ajaxConfig : {
        method : 'GET',
        async  : false
    },
    language   : 'es',
    ns         : 'locale',
    path       : 'locale.php',
    type       : 'ajax'
});

[galdaka]

You didn't set up the LocaleManager correctly... there is a special Object to configure the Ext.Ajax.request:

Ext.LocaleManager.setConfig({
    ajaxConfig : {
        method : 'GET',
        async  : false
    },
    language   : 'es',
    ns         : 'locale',
    path       : 'locale.php',
    type       : 'ajax'
});

I suposse that solution only not works in 'loadScriptTag' mode, only in "loadAjaxRequest" mode.

Is posible "sync" in "loadScriptTag" mode? I not use "loadAjaxRequest" mode? I prefer server side out solution...

[mitchellsimoens]

Loading script tags after the fact isn't going to be sync. You would have to do a sync Ajax call to the JS file. Unless you know of a way to load a script tag sync