ExtJs 4 다시로드 응용 프로그램

내 응용 프로그램에서는 모든 구성 요소의 제목/텍스트가 응용 프로그램 시작 전에로드 된 저장소를 기반으로 현지화되어 있습니다. 응용 프로그램에서 내가 저장 url을 변경하고 언어를 전환하는 저장소를 다시로드 버튼이 있습니다. 문제는 모든 클래스가 이미로드되어 있으므로 구성 요소가 이전 로켈로 렌더링됩니다. 버튼의 코드는 다음과 같습니다.ExtJs 4 다시로드 응용 프로그램

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은 전역 변수입니다. 오래된 뷰포트가 삭제되고 새로운 뷰포트가 생성되지만 강제로 클래스를 다시로드하는 방법. 나는 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); 

}

});


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

출처

2012-07-09 patryks

문제가 해결되지 않았지만 코드에 문제가 있습니다. 저장소 부하가 비동기이므로 저장소를로드하기 전에 새 뷰포트가 만들어 질 가능성이 큽니다. 이전 뷰를 완전히 파기하고 load 메서드에 전달 된 콜백 내에서 새 뷰를 만들어야합니다. – Izhaki

콜백 기능에서 뷰포트를 다시 만들어야합니다. 나는 코드를 업데이트했다. 그것은 여전히 내 문제를 해결하지 못합니다. – patryks

'gsip_categoriestabpanel'코드를 제공해 주시겠습니까? 난 당신이 중 하나를 참조 개체에 대한 configs를 정의하는 용의자. – Izhaki

당신이 설정 등의 항목을 설정 widget.gsip_categoriestabpanel의 정의 내에서 :

과의 ResourceBundle (국제화 변수는이 클래스의 인스턴스입니다). 즉, 항상 동일한 객체를 참조하며 업데이트 된 객체는 참조하지 않습니다. 첫 번째 단계로 항목 정의를 initComponent로 옮겨야합니다. console.log (i18n)을 사용하여 올바른 것을 확인할 수도 있습니다.

출처

2012-07-10 12:21:56 Izhaki

ExtJs 4 다시로드 응용 프로그램

답변

관련 문제