Question

When the application loads, it calls app.js (This is called in the index.html). What i want to do is when the app calls app.js, i need app.js to initialize the Main.js view.

in a nutshell, when app.js gets called, it should call the Main.js view.

How can i do this programatically;

app.js

    //<debug>
Ext.Loader.setPath({
                   'Ext': 'lib/touch/src'
                   });
    //</debug>

Ext.application({
                name: 'My',

                requires: [
                           'Ext.MessageBox'
                           ],

                views: ['Main'],

                icon: {


                phoneStartupScreen: 'resources/loading/Homescreen.jpg',
                tabletStartupScreen: 'resources/loading/Homescreen~ipad.jpg',

                launch: function() {
                // Destroy the #appLoadingIndicator element
                Ext.fly('appLoadingIndicator').destroy();

                // Initialize the main view
                Ext.Viewport.add(Ext.create('My.view.Main'));
                },

                onUpdated: function() {

                }
                });

Main.js

Ext.define("My.view.Main", {
    extend: 'Ext.tab.Panel',
    requires: ['Ext.TitleBar'],

    config: {
        tabBarPosition: 'bottom',

        items: [
            {
                title: 'Welcome',
                iconCls: 'home',

                styleHtmlContent: true,
                scrollable: true,

                items: {
                    docked: 'top',
                    xtype: 'titlebar',
                    title: 'Welcome to Sencha Touch 2'
                },

                html: [
                    "You've just generated a new Sencha Touch 2 project. What you're looking at right now is the ",
                    "contents of <a target='_blank' href=\"app/view/Main.js\">app/view/Main.js</a> - edit that file ",
                    "and refresh to change what's rendered here."
                ].join("")
            },
            {
                title: 'Get Started',
                iconCls: 'action',

                items: [
                    {
                        docked: 'top',
                        xtype: 'titlebar',
                        title: 'Getting Started'
                    },
                    {
                        xtype: 'video',
                        url: 'http://av.vimeo.com/64284/137/87347327.mp4?token=1330978144_f9b698fea38cd408d52a2393240c896c',
                        posterUrl: 'http://b.vimeocdn.com/ts/261/062/261062119_640.jpg'
                    }
                ]
            }
        ]
    }
});

Answer 1

Do this,

// Initialize the main view
Ext.Viewport.add({
     xclass:'My.view.Main'
});