ExtJs 4 Reload Application

Question

In my application all component's titles/texts are localized based on store loaded before Application launch. In application i have button that changes store url and reloads the store to switch language. The problem is that all the classess are already loaded so components are rendered with previous locale. Here is the code of the button:

tbar: [{
    xtype: 'button',
    id: 'btn-test',
    text: 'xxx',
    handler: function() {
        lang = 'en';        
        i18n.getBundlestore().load({url:'/GSIP/resources/gsip/i18n/bundle-' + lang + '.properties'});

        //bun = Ext.create('I18N.ResourceBundle'); 

        Ext.getCmp('mainview').destroy();

        Ext.create('Ext.container.Viewport', {
            id: 'mainview',
            layout: 'border',
            items: [
                {
                 xtype: 'gsip_mainpanel',
                 region: 'center',
                 items: [{
                     xtype: 'gsip_categoriestabpanel'
                 }]

                }
            ] 

The exact same viewport creation is in my Application.js. lang and i18n are global variables. Old viewport is destroyed and new is created but how to force to reload classess. I dont want to use window.location.

Code updated:

handler: function() {

        lang = 'en';        

        Ext.getCmp('mainview').destroy();

        i18n.getBundlestore().load({url:'/GSIP/resources/gsip/i18n/bundle-' + lang + '.properties',
            callback: function() {
                Ext.create('Ext.container.Viewport', {
                    id: 'mainview',
                    layout: 'border',
                    items: [
                        {
                         xtype: 'gsip_mainpanel',
                         region: 'center',
                         items: [{
                             xtype: 'gsip_categoriestabpanel'
                         }]

                        }
                    ]            
                });
            }
        });

    }

CategoriesTabPanel:

Ext.define('GSIP.view.CategoriesTabPanel' ,{
extend: 'Ext.tab.Panel',
alias : 'widget.gsip_categoriestabpanel',   
layout: 'fit',
items: [{
    xtype: 'gsip_planytabpanel',
    title: i18n.getMsg('key-1')
},{
    xtype: 'gsip_adresytabpanel',
    title: i18n.getMsg('key-2')
}],
initComponent: function() {

    this.callParent(arguments);

}

});

and ResourceBundle (i18n variable is an instance of this class):

Ext.define('I18N.ResourceModel',{

        extend: 'Ext.data.Model',
        fields: ['key', 'value']
    });

    Ext.define('I18N.ResourceStore',{
        extend: 'GSIP.core.RegisteredStore',
        model: 'I18N.ResourceModel',
        autoLoad: true,
        proxy: {
            type: 'ajax',
            url: '/GSIP/resources/gsip/i18n/bundle-' + lang + '.properties',
            reader: {
                type: 'json',
                root: 'pl',
                successProperty: 'success'
            }
        }
    });

    Ext.define('I18N.ResourceBundle' ,{

        config: {
            bundlestore: Ext.create('I18N.ResourceStore'),
        },
        constructor: function(config) {
            this.initConfig(config);

            return this;
        },
        getMsg: function(key) {

            return this.bundlestore.getAt(this.bundlestore.findExact('key', key)).get('value');

        }
        },function(){
            //callback function, called before store load :(
        }
    );

Answer 1

Within the definition of widget.gsip_categoriestabpanel you set items as a config. This means it will always reference the same object (and not the updated one). As first step, you should move the items definition to initComponent, there you can also console.log(i18n) to see it's the right one.