• Content based apps
• News listings apps
• Daily deal apps

What sort of applications maybe not to use Sencha Touch 2 for?

• 3D games
• Any other sort of game
• Applications that require high processing power (and potentially a lot of high resolution imagery).

Load all of your views/panels into the viewport at application startup:

• Your views/panels are in memory and ready to display when triggered by the users input.
• If you have only a few views (around 5-10) you can most likely get away with this approach without many performance issues.

• As soon as your application grows, you will start suffering massive performance issues, slow button tap responsiveness, slow list scrolling, memory warnings (in Xcode) etc..
• A much slower application bootup time.

Create and load your views/panels into the viewport on demand:

/**
 * app/views/viewport.js
 */
Ext.define('Demo.view.Viewport', {
    extend: 'Ext.Container',
    xtype: 'demo-viewport',
    requires: [
        // Home Loading
        'Demo.view.home.Loading',
    ],
    /**
     * Configuration
     * @property {object}
     */
    config: {
        layout: {
            type: 'card',
            animation: {
                type: 'slide',
                direction: 'left',
                duration: 250
            }
        },
        fullscreen: true,
        items: [
            // Home Loading
            {xtype: 'home-loading'},
        ]
    }
});

/**
 * app/controller/Base.js
 * We use a Base Controller to do the logic that is used throughout
 * the application (eg: back button, memory handling of views etc..)
 */
Ext.define('Demo.controller.Base', {
    extend: 'Ext.app.Controller',

    /**
     * Configuration
     * @property {object}
     */
    config: {

        /**
         * Refs
         * @property {object}
         */
        refs: {
            /**
             * @ignore
             * Panels
             */
            viewport: 'demo-viewport',
            /**
             * @ignore
             * Buttons
             */
            back: 'button[action=back]'
        },
        previousPanels: [],
        /**
         * Controls
         * @property {object}
         */
        control: {
            /**
             * Generic back to button (if you want one)
             */
            back: {
                tap: function(el, e){
                    var viewport = this.getViewport();
                    var activeItem = viewport.getActiveItem();
                    var view = activeItem.oldItem;

                    // Unset oldItem as its now been used
                    activeItem.oldItem = null;

                    // Set back animation
                    viewport.getLayout().setAnimation({type: 'slide', direction: 'right'});

                    // Go back to oldItem
                    viewport.setActiveItem(view);

                    if( e.event ) {
                        // Stop events from bubbling
                        e.stopEvent();
                    }
                }
            }
        }
    },

    launch: function() {

        var viewport = this.getViewport();
        var baseController = this;

        viewport.addBeforeListener(
            'activeitemchange',
            function( card, newItem, oldItem ){

                // Fix for overlapping panels (explanation later)
                // allow the panel to change
                if (oldItem.aboutToBeVisible === true) {
                    newItem.aboutToBeVisible = false;
                    newItem.hide();
                    return false;
                }

                // flag that the new item is now in the process of being
                // transitioned to
                newItem.aboutToBeVisible = true;

                // For the "Back" functionality
                // Only set oldItem if its null,
                // If its not null it means that there is an already set oldItem that
                // should be used instead.
                if( null == newItem.oldItem ){
                    newItem.oldItem = oldItem;
                }
            }
        );

        viewport.addAfterListener(
            'activeitemchange',
            function( card, newItem, oldItem ){

                var index,
                    panels = baseController.getPreviousPanels(),
                    newId = newItem.getItemId();

                // The below code ensures that only 5 view panels are kept in memory
                // This is to speed up the application
                for( index in panels ){
                    // If panel already exists in array, remove it
                    if (panels[index].getItemId() == newId) {
                        panels.splice(index, 1);
                        break;
                    }
                }

                // Add new item to top of array
                panels.splice(0, 0, newItem);

                // remove one panel from the back of the array
                if( panels.length > 5 ) {
                    var panel = panels.pop();
                    panel.destroy();
                }

                // The new item is no longer transitioning, so flag it as such
                newItem.aboutToBeVisible = false;
            }
        );
    }
});

/**
 * app/controller/Home.js
 * Example of a controller in your application
 *
 */
Ext.define('Demo.controller.Home', {
    extend: 'Ext.app.Controller',
    requires: [
        'Demo.view.home.Index'
    ],
    /**
     * Configuration
     * @property {object}
     */
    config: {
        /**
         * Refs
         * @property {object}
         */
        refs: {
            viewport: 'demo-viewport',

            /**

             * Defining all of your views to autoCreate: true will ensure

             * Sencha will create them if the dont already exist in memory

             */

            homeIndex: {
                selector: 'home-index',
                xtype: 'home-index',
                autoCreate: true
            }
        },
        /**
         * Controls
         * @property {object}
         */
        control: {

            /**
             * Home index
             */
            homeIndex: {
                hide: function(){
                },
                show: function(){
                }
            }
        }
    }
});

• Low resolution images are smaller in file size:
  • Requires less bandwidth to download each image.
  • Smaller amount of data stored in local memory cache.
• Lower quality images animate faster (less processor intense).
• You can look into staggering the loading of images (so as to make less concurrent web requests). We do this, if you would like a code sample contact me.

• Hiding/showing components
• Populating form data
• Populating dynamic data into panel.
• etc..

/**
 * app/controller/Portfolio.js
 *
 */
Ext.define('Demo.controller.Portfolio', {
    extend: 'Ext.app.Controller',
    requires: [
        'Demo.view.portfolio.Index'
    ],
    /**
     * Configuration
     */
    config: {
        /**
         * Refs
         */
        refs: {
            viewport: 'demo-viewport',
            portfolioIndex: {
                selector: 'portfolio-index',
                xtype: 'portfolio-index',
                autoCreate: true
            }
        },
        /**
         * Controls
         */
        control: {
            /**
             * Product index events
             */
            index: {
                show: function(){
                    var me = this;

                    Ext.create('Ext.util.DelayedTask', function () {
                        me.getIndex().fireEvent('showDelay');
                    }).delay(500);
                    // 500 should be set to more than your card layout transition time
                },
                showDelay: function(){

                    /**
                     * More processor intense processing can be done
                     * here, as panel will have been in view
                     */
                }
            }
        }
    }
});

Screen overlay bug

/**
 * app/controller/Base.js
 *
 */
Ext.define('Demo.controller.Base', {
    extend: 'Ext.app.Controller',
    launch: function() {

        var viewport = this.getViewport();
        var baseController = this;

        // Listen to the before event for setting activeItem in viewport.
        viewport.addBeforeListener(
            'activeitemchange',
            function( card, newItem, oldItem ){

                // Fix for overlapping panels

                // If a panel is already in process of becoming visible,

                // hide this new panel and return false to stop the transition.
                if (oldItem.aboutToBeVisible === true) {
                    newItem.aboutToBeVisible = false;
                    newItem.hide();
                    return false;
                }

                // Set that the new item is now in the process of being transitioned to
                newItem.aboutToBeVisible = true;

                // If not null set oldItem so we can use the back button
                if( null == newItem.oldItem ){
                    newItem.oldItem = oldItem;
                }
            }
        );

        // Listen to the before event for setting activeItem in viewport.
        viewport.addAfterListener(
            'activeitemchange',
            function( card, newItem, oldItem ){

                var index,
                    panels = baseController.getPreviousPanels(),
                    newId = newItem.getItemId();

                // The below code ensures that only 5 view panels are kept in memory
                // This is to speed up the application
                for( index in panels ){
                    // If panel already exists in array, remove it
                    if (panels[index].getItemId() == newId) {
                        panels.splice(index, 1);
                        break;
                    }
                }

                // Add new item to top of array
                panels.splice(0, 0, newItem);

                // remove one panel from the back of the array
                if( panels.length > 5 ) {
                    var panel = panels.pop();
                    panel.destroy();
                }

                // The new item is no longer transitioning, so flag it as such
                newItem.aboutToBeVisible = false;
            }
        );
    }
});

/**
 * app/override/Button.js
 */
Ext.define('Demo.override.Button', {
    override: 'Ext.Button',
    lastTapped: 0,
    /**
     * Update button icon to support masking
     * @return {String} icon
     */
    updateIcon: function(icon) {
        var me = this,
            element = me.iconElement;

        if (icon) {
            me.showIconElement();

            if( this.getIconMask() ){
                element.setStyle('-webkit-mask-image', icon ? 'url(' + icon + ')' : '');
            } else {
                element.setStyle('background-image', icon ? 'url(' + icon + ')' : '');
            }
            me.refreshIconAlign();
            me.refreshIconMask();
        }
        else {
            me.hideIconElement();
            me.setIconAlign(false);
        }
    },
    /**
     * On slower devices Sencha registers multiple button taps
     * which ends up causing strange behaviour. Ensure only a single
     * button tap every 2seconds per button
     */
    onTap: function(e) {

        var now = Date.now();

        if (this.getDisabled()) {
            return false;
        }

        if ( (now - this.lastTapped) > 2000 ) {
            this.lastTapped = now;

            this.fireAction('tap', [this, e], 'doTap');
        }
    }
});

• Passbook functionality (on IOS6) - only visible on IOS6 devices.
• Local notifications (eg: setting up calendar reminders) - Only available on the iPhone - to any other user (web browser) this functionality is not available/hidden.
• Email composer - only available if within Cordova application.

Always compile your javascript into app-all.js.

• Production (default)
• Staging
• Emulator (Used for automated user testing)
• Development (included only within the index-dev.html file)

/**
 * app/Configuration.js
 */
var settings = settings || {
    environment: 'production'
};

/**
 * Production environment
 */
settings.production = {
    'version': '2.0',
    'api.user': '',
    'api.key': '',
    'api.timeout': 30000,
    'logger.writer.db': true,
    'logger.writer.alert': false,
    'logger.writer.console': false,
    'logger.writer.remote': true,

    // Cache
    'cache.user.login': 3600,
    'cache.configuration.list': 86400,

    // Our system has 2 performance profiles
    // High profile - for newer phones (iPhone 4S & 5)
    'performance.high.base.transition.time': 250,
    'performance.high.scrolltotop.time': 500,
    'performance.high.list.acceleration': 15,
    'performance.high.list.friction': 0.3,

    // Low profile - for older phones (iPhone 3S, 4)
    'performance.low.base.transition.time': 400,
    'performance.low.scrolltotop.time': 750,
    'performance.low.list.acceleration': 10,
    'performance.low.list.friction': 0.4
};

/**
 * Staging overrides
 */
settings.staging = {
    'api.user': '',
    'api.key': ''
};

/**
 * Development environment
 * @ignore
 *
 * See app/ConfigurationDev.js
 */

/**
 * Override configuration with merged config.
 * This is so there is no possible way settings
 * from other environments can be accessed unless
 * through the configuration object
 */

for( var i in settings.production ) {
    settings[i] = settings.production[i];
}

// This defines which environment will be deployed
for( var i in settings[settings.environment] ) {
    settings[i] = settings[settings.environment][i];
}

settings.production = undefined;
settings.staging = undefined;
settings.development = undefined;
settings.emulator = undefined;

/**
 * All configuration within application goes through this object
 */
Ext.define('Demo.Configuration', {

    /**
     * Performance profile high
     */
    PERFORMANCE_HIGH: 'high',

    /**
     * Performance profile low
     */
    PERFORMANCE_LOW: 'low',

    /**
     * Configuration
     * @property {object}
     */
    config: {
        settings: settings,
        performance: null
    },
    /**
     * Singleton
     */
    singleton: true,
    /**
     * Constructor
     * @contructor
     */
    constructor: function(config) {

        if( undefined == config ) {
            config = {};
        }

        // Default performance to high
        config.performance = this.PERFORMANCE_HIGH;

        // If devicePixelRatio is 1, it implies low res display (on iphone)
        // Drop performance to low for this device
        if( 1 == window.devicePixelRatio ) {
            config.performance = this.PERFORMANCE_LOW;
        }

        this.initConfig(config);
    },

    /**
     * Get property
     *
     * @param {String} name
     * @return {String}
     */
    getProperty: function( name )
    {
        return this.getSettings()[name];
    },

    /**
     * Set property
     * Not is use yet
     *
     * @param {String} name
     * @param {String} value
     */
    setProperty: function( name, value )
    {
        this.getSettings()[name] = value;
    },

    /**
     * Get properties
     */
    getProperties: function()
    {
        return this.getSettings();
    },

    /**
     * Get environment
     */
    getEnvironment: function()
    {
        return this.getSettings().environment;
    },

    /**
     * Is environment development
     */
    isEnvironmentDevelopment: function()
    {
        return ('development' == this.getSettings().environment);
    },

    /**
     * Is environment staging
     */
    isEnvironmentStaging: function()
    {
        return ('staging' == this.getSettings().environment);
    },

    /**
     * Is environment production
     */
    isEnvironmentProduction: function()
    {
        return ('production' == this.getSettings().environment);
    },

    /**
     * Get a config value based off profile in use
     */
    setPerformanceHigh: function()
    {
        // Set performance to high
        this.setPerformance(this.PERFORMANCE_HIGH);
    },

    /**
     * Get a config value based off profile in use
     */
    getPerformanceProperty: function(name)
    {
        return this.getProperty('performance.' + this.getPerformance() + '.' + name);
    }
});

Working code sample