Extjs share class config with all instances

2
votes

My goal is to share a config property lang of class User with all instances of this class. lang will hold an instance of a translation class Language, that will once async load data.

The problem is I cannot get the callback in the config to call a function of the instance.

Ext.define( 'X.User.controller.Main', {
  extend: 'Deft.mvc.ViewController',

  config: {
     // create one Language instance once for all User instances
     lang: Ext.create( 'X.Language.Main', { 
        loaded: false,
        language: 'de', 
        // this callback gets called correctly after loading language resources
        callback: function() { 
           // ERROR since "this" is window, not the User instance
           this.lang.loaded = true; // should mark it loaded for next instances
           this.start(); // should start the instance logic
        }
     } )
  },

  init: function() {
     var that = this;
     if( that.lang && that.lang.loaded )
     {
        that.start();
     }
  },

  start: function() {
     // use the translation functions...
     oView.setLoading( that.lang.get( 'checkingPrivileges' ) );
     ...
  }

How can I get that to work? Is there a better design for this case?

Callback invoking:

constructor: function( oConfig ) {
     var that = this;
     that.getLanguageFile( oConfig );
     that.initConfig( oConfig );
}

getLanguageFile: function( oConfig ) {
   var fCallback = oConfig.callback || Ext.emptyFn;
   ...
   // in my ajax success function...
      fCallback();
}
2
extjsextjs4.1

2 Answers

0
votes

Judging by "this is window" your way of callback function invoking is wrong. Here is no code but it seems you call it directly callback(arg), to make a call with context, you should use the scope like callback.call(scope, arg)

The problem is your X.Language.Main instance initiated before X.Language.Main, that's why you have no scope. Do it after: 

Ext.define( 'X.User.controller.Main', {
  extend: 'Deft.mvc.ViewController',         

  init: function() {
      var lang = Ext.create( 'X.Language.Main', { 
        loaded: false,
        language: 'de', 
        callback: function() { 
           this.lang.loaded = true; // should mark it loaded for next instances
           this.start(); // should start the instance logic
        },
        scope: this
      });

      this.config = {lang: lang};

      var that = this;
      if( that.lang && that.lang.loaded ){
        that.start();
      }
  },
  ....

then call it with scope or use binding.

0
votes

My current solution is:

Ext.define( 'X.plugins.language.Main', {
  config: {
     loaded: null,
     plugin: null,
     translations: null,
     listening: false
  },
  constructor: function( oConfig ) {
     this.initConfig( oConfig );
  },
  ...

And all other classes go like:

Ext.define( 'X.plugins.usermanagement.controller.Main', {     
  config: {
     language: Ext.create( 'X.plugins.language.Main', {
        plugin: 'usermanagement'
     } )
  },

  init: function() {
     this.language.init( {
        callback: Ext.bind( that.start, that )
     } );
  },
  start: function() { // now start the plugin  }