Logging in Sencha Touch application

Today at work I faced an interesting issue, I spent so much time looking for an instruction of how to implement the Ext.Logger in Sencha Touch application. Unfortunately, there is no information about this in the official documentation. Therefore, just to save you some time I would like to explain some details that I found out during my research.

First of all, the described technique for implementing the Ext.Logger works for Debug-Mode only, which means, the created Log messages are not visible when you use one of the following build-modes:

• testing 
• production 
• native 
• package 

The initial Logger setup is done, by putting the following lines to your app.js file:

    //<debug>
    logger: {
        enabled: true,
        xclass: 'Ext.log.Logger',
        minPriority: 'verbose',
        writers: {
            console: {
                xclass: 'Ext.log.writer.Console',
                throwOnErrors: true,
                formatter: {
                    xclass: 'Ext.log.formatter.Default'
                }
            }
        }
    },
    //</debug>

Pay attention that you put these lines between the //<debug> comment tags. Anything between //<debug> and //</debug> will be removed after you do a build with Sencha Cmd. If you are not putting your Logger setup between these lines, you won't be able to build your application with Sencha Cmd again.

For further information also checkout src/log/writter. There you can see how to Log in browsers document title or how to do a remote Log.

After the main configuration is done, the Log messages can be implemented like:

    //<debug>
    Ext.Logger.info('Hello World!');
    //</debug>

Take also a look at http://docs.sencha.com/touch/2.2.1/#!/api/Ext.Logger for a complete list of the Ext.Logger methods.

While Sencha Cmd is removing all code between //debug, your application should also run a little bit faster after building it. At least when you are using a huge amount of logging information.

Happy Logging...