How to create Utility Class in Sencha Touch 2

Today, we are going to see how we can create a utility class in Sencha Touch 2. Before that, let me ask you the question. Why you need a utility class for Sencha Touch  Apps.

1) In Utility Class, you can add application specific configuration settings like baseUrl, animationDuration, animationType (slide, fade etc).

2) In Utility Class, you can add common methods that will be accessed by all Sencha app js files.

By maintaining above information in the Utility Class, in case if you need to modify baseUrl or modify code in the utility method. You just need to modify in one place instead of searching and modifying in all Sencha app js files.

I hope, my explanation made it clear the purpose of Utility Class in Sencha Touch App. Now, let's see the implementation

1) First, create a folder with name util inside app folder.

2) create a  js file with name AppConfig.js inside util folder and add the following code

Ext.define('MyApp.util.AppConfig', {
       singleton : true,
       alternateClassName: 'AppConfig',
        config : {
            baseUrl : 'http://sureshdotariya.blogspot.com/',
            imageUrl: 'http://sureshdotariya.blogspot.com/image.png',
            animationType : 'slide',
            animationDuration : 100
        },
       GLOBAL_APP_VARIABLE: '',
        constructor : function(config) {
           this.initConfig(config);
        },
        navigate: function(navView, view, animationStyle) {
             navView.animateActiveItem(view,this.animationType);
        }
}

Important Note: Please make the above utility class as singleton using singleton configuration set to true;

3) you need to add this Utility Class MyApp.util.AppConfig as the require one in the Ext.application Class.

Ext.application({
    name: 'sureshblogapp',
    requires: ['MyApp.util.AppConfig']
    });

In order to access baseUrl value in the Sencha app js file, you need to use the below code

MyApp.util.AppConfig.getBaseUrl();

In order to access navigate() method in the Sencha app js File, you need to use the below code

MyApp.util.AppConfig.navigate(parameter1, parameter2, parameter3);

I Hope, you enjoyed this Post.