Tag: sencha

Adding gmaps to sencha extjs app through Sencha Architect

If your extjs development workflow is based on Sencha Architect then you must have already faced some issues while trying to make gmaps api work with your sencha app. Actually its not that straightforward task to add gmaps as an external js resource as it is for adding other js resources in Sencha Architect. Problem is that gmaps (if added as a remote js resource ) loader interferes with the sencha extjs microloader and hence the gmaps api is not properly utilized.

If you have a requirement where you want to utilize the gmaps functionality within your sencha app then you could follow along the below steps to integrate gmaps api with your app.

1. Add the gmap script url in the index.html (you need to manually edit index.html and make sure overwriting index.html is disabled on build, because otherwise your index.html would be reset after each app build).

2. Lets say we have a Container named googlemapcontainer where we want to show the googlemap. Initially it is hidden, we would want to show it only when we have coordinates where the google map should be centered.

a. Let us assume that the coordinates for map center comes from a remote api, we store the response (having coordinates) on viewModel of the current view where map needs to be shown.

b. Define an addGmap function on view controller that adds the gmap in googlemapcontainer. it takes the longitude and latitude values from viewModel. A listener “afterrender” is defined which does the task of getting coordinates from viewModel and creating a map and map marker.

c. Define a showMap function on view controller to get coordinates through ajax and make googlemapcontainer visible.

All the code changes are available in the below snippets:

Capturing User details for re-using throughout a Sencha app

For a simple Extjs app it would be desirable to have a dedicated User class which captures the logged in user details so that certain components that should be visible/hidden based on the user roles. So we can define such a User class and initialize the user’s roles and other details just after login. Below is one way to implement such a functionality where user details are captured and re-used for checking current logged in user roles.

1. Create a new singleton Extjs User class (User.js).

2. Get the User rights through ajax call (this can be done at the app startup in the launch method, or just after a successful login) and save them for reuse (app.js).

3. Use saved user to check whether logged in user has certian role or not. Lets say we want to show certain menu items based on roles (usage.js)

Setting global default ajax timeout in sencha app

Most of the times we need to configure a timeout for all the ajax calls fired from anywhere in the sencha application. This can be done by simply setting up some properties for the Ext.Ajax, Ext.data.proxy and Ext.data.connection classes during application startup.

You may add a function setup to Application through Sencha Architect just to keep this code in a separate function (otherwise you may add the code to launch method as well. Below is the configuration required for setting global default ajax timeouts

Above code sets the timeout to 300000 ms and additionally disables the default xhr headers to false (disabling this might save you some time in case you face any issues when the headers provided to your ajax calls seems to be changed)

 

Edit 05-01-2017: For Extjs 6.2 just adding below to launch method should handle the default timeout for ajax in your application :

Ext.override(Ext.data.proxy.Ajax, {
timeout: 60000
});

 

Adding global exception handler in sencha extjs app

In most of the sencha extjs applications, its always good practice to have a global exception handler so that any common exceptions from server can be handled in a uniform way from a single place. One such instance is, having a global exception handler for handling HTTP status 401. This status is returned by server to the client application when the user is not authenticated to access a server side functionality.

From UI perspective, two main use cases when HTTP 401 can be thrown could be :

  1. User tries to open an app for the first time, usually a login screen is presented where a user can enter the credentials and log in to the app. If the credentials entered are incorrect then an HTTP status 401 is returned by server. User should not be able to close login screen until correct credentials are provided.
  2. User has successfully logged in to app and after some time, the session on server for this user expires. So any subsequent api requests to server will return HTTP 401 unless a session is again established. In such a case, usually user is again presented a login pop up window to enter credentials and continue working on the app.
    So to achieve this in a Sencha app, we can setup up a global exception handler for all ajax calls by adding the below code in the application’s launch function.

Above code basically routes the application to login route where the actual login to open up a login window can be written.

In sencha architect this can be done by simply selecting Application, adding a launch function (if not already present) and adding the above code.