Untitled

var rootPanel;

Ext.setup({

    tabletStartupScreen: 'Default-Landscape.png',
    phoneStartupScreen: 'Default-Landscape.png',
    icon: 'icon.png',
    glossOnIcon: true,

    onReady: function () {

        var CreateUserFields = [
                {
                    xtype: 'emailfield',
                    placeHolder: 'Username',
                    name: 'Username',
                    id: 'Username',
                    required: true
                }, {
                    xtype: 'passwordfield',
                    placeHolder: 'Password',
                    name: 'Password',
                    required: true
                }, {
                    xtype: 'checkboxfield',
                    id: 'RememberMe',
                    name: 'RememberMe',
                    label: 'Save login?',
                    labelWidth: '40%'
                },
                {
                    xtype: 'button',
                    text: 'Login',
                    ui: 'confirm',
                    style: 'margin:2%;',
                    handler: function() { doLogin(); }
                }
            ];

        function doLogin() {

        }

        var Create = new Ext.form.FormPanel({
            title: "Create",
            id: 'loginFormSet',
            iconCls: 'user',
            dockedItems: [{
                xtype: 'toolbar',
                title: 'Create User',
                ui: 'light'
            }],
            items: [ CreateUserFields ]
        });

        var SendMessage = new Ext.Panel({
            title: "Send",
            iconCls: 'compose',
            html: "Send Message From Here",
            dockedItems: [{
                xtype: 'toolbar',
                title: 'Send a Message',
                ui: 'light'
            }]
        });

        var CheckMessages = new Ext.Panel({
            title: "Check",
            iconCls: 'download',
            html: "Check Messages From Here",
            dockedItems: [{
                xtype: 'toolbar',
                title: 'Check Messages',
                ui: 'light'
            }]
        });

        var Groups = new Ext.Panel({
            title: "Groups",
            iconCls: 'team',
            html: "List your friends and groups here",
            dockedItems: [{
                xtype: 'toolbar',
                title: 'Manage Groups',
                ui: 'light'
            }]
        });

        var TabPanel = new Ext.TabPanel({
            flex: 1,
            tabBar: {
                dock: 'bottom',
                layout: {
                pack: 'center'
                }
            },
            plugins: [new Ext.ux.touch.SwipeTabs()],
            ui: 'light',
            cardSwitchAnimation: {
                type: 'slide',
                cover: true
            },
            items: [Create,SendMessage,CheckMessages,Groups],
            dockedItems: []
        });

        rootPanel = new Ext.Panel({
            fullscreen: true,
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            items: [TabPanel],
            dockedItems: [{
                xtype: 'toolbar',
                title: 'GText'
            }]
        });
    }
});

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>GText</title>
    <script src="lib/touch/sencha-touch.js" type="text/javascript"></script>
    <link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
    <script src="lib/touch/src/index.js" type="text/javascript"></script>
    <script src="lib/touch/plugins/Ext.ux.touch.SwipeTabs.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>