Where do I store user specific (session) information in an ExtJS MVC application?

Is it right to define a custom base controller that can contain an object with user specific info and use it in application?

Example:

Ext.define("MyApp.controller.BaseController", {
    extend:  "Ext.app.Controller", 

    session:  Ext.create("MyApp.lib.UserSession"),

    init: function() {
      var me = this;

      me.session.init();

      /** some code **/
    },

    doSomething: function() {
      var me = this;

      var counter = me.session.get("counter"); 
    }

});

Where do I store user specific (session) information in an ExtJS MVC application?

Is it right to define a custom base controller that can contain an object with user specific info and use it in application?

Example:

Ext.define("MyApp.controller.BaseController", {
    extend:  "Ext.app.Controller", 

    session:  Ext.create("MyApp.lib.UserSession"),

    init: function() {
      var me = this;

      me.session.init();

      /** some code **/
    },

    doSomething: function() {
      var me = this;

      var counter = me.session.get("counter"); 
    }

});

• javascript
• extjs
• extjs4
• extjs-mvc

• I modified your question slightly because it sounded too much like you were polling for opinions - something that is frowned upon at SO. I have an answer though below. – egerardus Commented Oct 22, 2012 at 21:05

4 Answers 4

If you need to persist the data after page refresh you can use Ext.state.Manager.

Setup state manager with Cookie or LocalStorage provider during application launch:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

// Shortcut for quick reference across the project, if MyApp.user is null - user is not authorized.
MyApp.user = Ext.state.Manager.get('user');

Save the data you need to persist for current user after authorization or other actions:

Ext.state.Manager.set('user', {
  first_name: 'John'
  last_name: 'Doe'
});

I do it two ways depending on the application target.

My preferred method is using a LocalStorage proxy for my models I want to save locally, that way there is no change in how I interact with them in the application and it's a bit more handy when relaunching your application to set things up with out DB calls.

Alternatively, I create a global variable when starting the application. Inside the launch function do something like this.

var app = Ext.application({
    name: 'MyApp',
    launch: function() {     
        MyApp.model.User.load('profile', {
            scope: this,
            success: function(user) {
                // Setup the app space under your Application namespace
                // so you don't conflict with anything the the ExtJS framework has set
                MyApp.app.user = user;
            }
        }
    }
}

That way throughout your application, you'll have access to the current User's model through the variable MyApp.user So this can then be used in all areas of your application

var currentUserName = MyApp.app.user.get('name');

The downside of this is that you are introducing a global variable which is considered bad practise when it can be avoided.

I don't see there being anything wrong with constructing a base controller like you have suggested, but if you are doing it purely for access to the session variables you want to store I would suggest it's maybe a bit overkill.

I've done a few different apps that involved users with specific permission settings pulled from their session when they first start the app.

I struggled with doing this a few different ways, but I came to recognize that the user permission data all fit best within the MODEL context of MVC. With that in mind I decided to just put it all in a store.

This worked out nicely. If you create the store following the MVC guidelines, you can always call upon the user session data from anywhere in the app with Ext.getStore('SessionStoreId')

I almost always create a State Manager class for these kind of things. You can also create singleton classes with your own custom code and include it in your app like so:

Ext.Loader.setPath('MyApp.Util', 'app/util');

And do a require like so:

Ext.require('MyApp.Util.Class')

The class itself should be something like this:

Ext.define("MyApp.Util.Class", {
  singleton : true,
  options : {},

  myFunction: function(){}
});

That way you can put all your non-ExtJS like functionality in seperate classes.