Demo

Application.js

/**
 * The main application class. An instance of this class is created by app.js when it
 * calls Ext.application(). This is the ideal place to handle application launch and
 * initialization details.
 */

Ext.define('test.Application', {
    extend: 'Ext.app.Application',
    
    name: 'test',

    requires: [
        'Ext.MessageBox',
        'Ext.app.ViewModel'
    ],

    stores: [
        // TODO: add global / shared stores here
    ],
    
    launch: function () {
        Ext.Viewport.add({
            xtype: 'formpanel',
            title: 'test',
            viewModel: {
                data: {
                    field1: 'abc',
                    field2: 'def',
                    field3: 'ghi'
                }
            },
            layout: 'card',
            items: [
                {
                    xtype: 'toolbar',
                    docked: 'bottom',
                    items: [
                        {
                            xtype: 'button',
                            text: 'submit',
                            handler: function() {
                                var panel = this.up('formpanel'),
                                    fields = panel.getFields(),
                                    errors = '',
                                    valid;

                                panel.validate();
                                valid = panel.isValid();

                                if (!valid) {
                                    errors = Object.keys(fields).map(function(key) {
                                        var field = fields[key];
                                        if (!field.isValid()) {
                                            return '<li>' + field.name + '</li>';
                                        }
                                    });
                                    errors = '<h2>Invalid fields:</h2><ul>' + errors.join('') + '</ul>';

                                }

                                Ext.Msg.alert(valid ? 'VALID' : 'INVALID', errors);
                            }
                        },
                        '->',
                        {
                            xtype: 'button',
                            text: 'prev',
                            handler: function() {
                                this.up('formpanel').getLayout().previous();
                            }
                        },
                        {
                            xtype: 'button',
                            text: 'next',
                            handler: function() {
                                this.up('formpanel').getLayout().next();
                            }
                        }
                    ]
                },
                {
                    padding: 10,
                    items: [
                        {
                            xtype: 'textfield',
                            label: 'card1',
                            name: 'card1',
                            required: true,
                            bind: '{field1}'
                        }

                    ]
                },
                {
                    padding: 10,
                    items: [
                        {
                            xtype: 'textfield',
                            label: 'card2',
                            name: 'card2',
                            required: true,
                            bind: '{field2}'
                        }

                    ]
                },
                {
                    padding: 10,
                    items: [
                        {
                            xtype: 'textfield',
                            label: 'card3',
                            name: 'card3',
                            required: true,
                            bind: '{field3}'
                        }

                    ]
                },
            ]
        })
    },

    onAppUpdate: function () {
        Ext.Msg.confirm('Application Update', 'This application has an update, reload?',
            function (choice) {
                if (choice === 'yes') {
                    window.location.reload();
                }
            }
        );
    }
});