Question

在我的应用程序中，所有组件的标题/文本都是根据应用程序启动前加载的存储进行本地化的。在应用程序中，我有一个按钮，用于更改商店网址并重新加载商店以切换语言。问题是所有classess都已加载，因此使用以前的语言环境呈现组件。这是按钮的代码：

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

                }
            ]

完全相同的视口创建在我的Application.js中。 lang和i18n是全局变量。旧视口被破坏，新的被创建，但如何强制重新加载classess。我不想使用window.location。

代码已更新：

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

}

}）;

和ResourceBundle（i18n变量是此类的一个实例）：


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

在widget.gsip_categoriestabpanel的定义中，您将项目设置为配置。这意味着它将始终引用相同的对象（而不是更新的对象）。作为第一步，您应该将项目定义移动到initComponent，在那里您还可以使用console.log（i18n）来查看它是正确的。

ExtJs 4重新加载应用程序

1 个答案: