2

I'm using Ext JS 4.1 to create a CRM-type application. To connect to the server side, I'm using Ext Direct via the RemotingProvider.

Before the application launches and renders, I want to retrieve some global variables from the server via Ext Direct, mainly the configured language of the currently logged in user and their configured permissions. Then, depending on the language of the user (from that result), I need to load both the Ext JS locale file and my own custom locale file. (Note that those must be loaded before any component is created, because they won't be applied afterwards.)

So, the procedure is:

  1. get Globals via Ext.php.Globals.getGlobals
  2. get Ext locale via Ext.loader.loadScript,
  3. get App locale via Ext.loader.loadScript
  4. setup viewport

Since 1.-3. are asynchronous, I saw no other way than to nest the callbacks:

Ext.application({
  name: 'MyApp',

  launch: function() {
    var app = this;

    // Welcome to callback hell...
    Ext.php.Globals.getGlobals(function(data) {
      // insert globals into app namespace
      Ext.apply(MyApp, data);

      // load ext locale
      Ext.Loader.loadScript({
        url: 'ext/locale/ext-lang-'+MyApp.currentUser.culture.toLowerCase()+'.js',
        onLoad: function() {
          // load app locale
          Ext.namespace('MyApp.locale');
          Ext.Loader.loadScript({
            url: 'app/locale/'+MyApp.currentUser.culture.toUpperCase()+'.js',
            onLoad: function() {

              // FINALLY, set up viewport
              var viewport = Ext.create('MyApp.view.Viewport', {
                controller: app
              });

              if (MyApp.util.hasPermission('usermgmt'))
                app.getController('Locations');

              // and so on ...

            }
          });
        }
      });
    });
  }
}); // end application

Is there any other, more elegant way to write this code? I know there are libraries for async flow, but can any of these work with the Ext JS API here? Or can I somehow force Ext.syncRequire to load the locales for me (so I only have one layer of nesting for the getGlobals call)? My own locales have a class defined, but Ext locales don't. Also, will this somehow mess up compiling the source files with Sencha Cmd?

pulsar
  • 560
  • 2
  • 13

2 Answers2

3

Your concept is a bit weird therefore I have some recommendations for you. I use direct in many projects and most them had the need for localization and rather complex AC-Managements.

  • Your app should not have the need to resolve or load something before it even starts.
  • Language & localization should be provided the time the main application view get loaded
  • Your frontend should never resolve any access control. You can (for most situations) perfectly achieve this with the direct API
    • reduce the API to these actions where the user have access (this also happens when the application main view get prepared)

That make your app faster and your life easier.

Update

The time the user login or just request the mainview you should have plenty information like the supported browser language or at least when the user selects a language. With that knowledge you just need to prepare the view.

A acl within a frontend is not secure and need to be rechecked at serverside it should therefore be avoided or simple. The simplest way with direct is to provide a API matching the user access and check for this within the frontend. That is a sort of implicit access control. How to implement this depends on the on the UI, but there are many ways

Update 2

Why don't you provide one build per language? I don't see any reason against it. Or split the framework from your application & classes which allows you to update while the clients can still use the cached framework lib.

The API can be easily checked for controller (backend) access and method (backend) access. Where the controller may be your tab and the actions your menu elements. Cause the API is global available you just need to check if the objects or properties exists. Let's pretend we have a backend-controller named Car and Method called Drive we can check for this like

if (Car) {
    // has controller access
    if (Car.Dirve) {
        // has access to the 'drive' action
    }
}
sra
  • 23,820
  • 7
  • 55
  • 89
  • Thanks for your answer. I have a few follow-up questions to your suggestions: 2) How do I "provide" language and localization when the main view gets loaded? I only know the correct language after asking the server, and I don't see a way to synchronously load the locale files. 3) Can you expand on this? Would you move my `MyApp.util.hasPermission` to the server, so that each line calls the server? My app has a tabbed interface and permissions will decide which tabs to load. – pulsar Feb 05 '13 at 19:59
  • I'm guessing you're suggesting a method similar to what Izhaki proposed. See my comment there on why that won't work. — Of course access control is checked on the server side, however I want to hide certain UI elements if they can't be used. About the "API matching the user access" part: Are you suggesting that I use something like: `Ext.php.User.hasPermission('usermgmt', function(data) { if (data == true) app.getController('usermgmt'); })`? – pulsar Feb 06 '13 at 10:17
  • Thanks a lot! Using multiple builds per locale might in fact be a reasonable choice. I'll have yet to get acquainted with Sencha Cmd to see if that's possible. For now, I'll stick to including the locales in the `index.html`. Your second point about the API (the "remoting specification" as Ext likes to call it) is very valuable, too. I hadn't thought about checking the members of `Ext.php` themselves! Thanks again! – pulsar Feb 06 '13 at 10:56
1

Unless I'm missing something very obvious, my take on this would be completely different.

I have a similar scenario in a system where the user may be either a superuser or an admin, and based on this the main menu will change.

But I don't query the server for this information from within the Ext application code. Instead, my header includes something very similar to how direct loads:

<script type="text/javascript" src="globals.php"></script>

Then globals.php has something along these lines:

<?php
if ( $iUserIsSuperuser ) {
?>

gUserIsSuperuser = true;

<?php
}
?>

Then as for the locale js files - can't you simply include the correct ones in your index.php using conditions?

Izhaki
  • 23,372
  • 9
  • 69
  • 107
  • Setting "superuser" flag once at load is awfully insecure - anybody with access to browser console can change that variable in a second. Unless I'm mistaken and you're checking user permissions at every back end hit? – Alex Tokarev Feb 06 '13 at 06:39
  • Alexander's concern about security is one aspect that kept me from choosing this method, another one is this: When using Sencha Cmd to compile the Javascript files for production, all I end up with is a single `all-classes.js`, if I understand correctly. But user info and locale cannot be compiled statically, so I have to still load them. Before `all-classes.js` I can't because `Ext.define` would be undefined, and afterwards is too late to be applied in viewport generation. – pulsar Feb 06 '13 at 10:11
  • @AlexanderTokarev - Security is ensured via other means. Suffice to say this aspect is covered. – Izhaki Feb 06 '13 at 13:15
  • @pulsar - this is not 100% correct, but is something of a minor complexity. Notice that when you compile your app, you'd still need to include `direct's api.php` **after** the `` block - thus it won't be part of `all-classes.js`. `api.php` makes use of the `Ext` namespace. Your application is launched **after** `Ext.onReady()` - so your app bootstrap will still have in scope any JS included after `all-classes.js`. I hope this is clear? – Izhaki Feb 06 '13 at 13:19
  • And on security - the assumption should be that **any** javascript can be hacked easily by users. So even with the solution in the question - users can set a breakpoint on the launch method, and override any javascript code before the view is created. – Izhaki Feb 06 '13 at 13:22