Question

I’m developing an web application on Ext JS 4 using the new recommended application structure. Therefore I need to implement a authentification & rights system. The idea so far:

1. The server is responsible to ensure the user role and rights.
2. ExtJS frontend has to change according to the permissions and role
3. I use a card layout. The first tab is the login screen, the second the application
4. In my controller I check if the user is logged in. If he has a valid identity I switch to tab 2. If not he is thrown back to tab 1.

My problem now is that I’m unsure about part 2 and part 4? How would you implement these two?

Answer 1

• Once the user is authenticated bring the config options over from the server into a store. For example: Ext.StoreManager.get('ConfigOptionStore').loadData(/* config data returned from server */);

• Use the beforeRender event to add components to your current view (do this in the controller), like so:

  init: function() {
      this.control({
          'myPanel': {
              beforerender: function(cmp, eOpts){
              //place the store in a var for easy access
              var myConfigStore = Ext.StoreManager.get('ActiveUserStore').getAt(0);
  
              //from here you can use add() to add stuff like so:
              if (myConfigStore.get('hasMyButton')) {
                  cmp.add({
                      xtype: 'button',
                      text: 'My Button',
                      action: 'doSomething'
                  });
               }
               //etc...
           }
       });
  }
  

• Make sure that at any given time, you update the first record of the store with the current config options (when you loadData, load just one record).

• This should get you started in the right direction. Just be sure to create your initial views with the only the most basic components, and then add the custom components based on the user’s config.