This blog is about tips
on using Sencha Touch.

Follow it via
RSS or Twitter.

Steffen Hiller is owner & lead developer of 360releases Ltd.,
a Sencha Touch, Ext JS & Ruby on Rails consultancy shop.

You can follow him on Twitter @steffenhiller.

#11 Hello World! Remember the Ext.onReady days?

October 22, 2011

Do you remember the Ext.onReady days?
There used to be just one way to initiate and render your application's viewport.

You simply did a

Ext.onReady(function () {
    new Ext.Viewport({
        html: 'Hello World!'
    })
});

and done!

Those days are over. (No reason to be sad, though.)

Now we have Ext.onReady, Ext.setup, Ext.application, Ext.app.Application, Ext.viewport.Viewport, Ext.create, Ext.Loader, autoCreateViewport, fullscreen, autoMaximize, profiles, init and launch to name a few.

We at 360releases started to work with Sencha Touch 2 the same day the Developer Preview got released.

The start with Sencha Touch 2 was a bit rocky for us. The weirdest issue of all was a non-Sencha Touch related bug on our side. Anyway, while playing around with the way of initiating our Sencha Touch 2 app, I realized that there are a bunch of ways of doing so.

Back in the Ext JS 1.x and 2.x days, there was just one. So I thought it'd be interesting to list a few different ways of initializing a Sencha Touch app today.

Don't hold your breath. ;) There are certainly more, but I thought listing 9 different examples should be enough.

All Hello World examples result in the exact same DOM structure and view (except for the numbering obviously).

Each example has the following output in Mobile Safari on the iPhone:

Hello World #1

Using Ext.setup, onReady and Ext.create.

Ext.setup({
    onReady: function () {
        Ext.create('Ext.Panel', {
            fullscreen: true,
            html: 'Hello World! #1'
        });
    }
});

Hello World #2

Using Ext.setup, onReady and Ext.Viewport.add.

Ext.setup({
    onReady: function () {
        Ext.Viewport.add({
            fullscreen: true,
            html: 'Hello World! #2'
        });
    }
});

Hello World #3

Using Ext.application, onReady and Ext.Viewport.add.

Ext.application({
   onReady: function () {
       Ext.Viewport.add({
           fullscreen: true,
           html: 'Hello World! #3'
       });
   } 
});

Hello World #4

Using Ext.application, launch and Ext.Viewport.add.

Ext.application({
   launch: function () {
       Ext.Viewport.add({
           fullscreen: true,
           html: 'Hello World! #4'
       });
   } 
});

Hello World #5

Using Ext.application, launch and Ext.create.

Ext.application({
   launch: function () {
       Ext.create('Ext.Panel', {
           fullscreen: true,
           html: 'Hello World! #5'
       });
   } 
});

Hello World #6

Using Ext.application and autoCreateViewport.

Ext.define('App.view.Viewport', {
    extend: 'Ext.Container',
    
    config: {
        fullscreen: true,
        html: 'Hello World! #6'
    }
});

Ext.application({
    name: 'App',
    autoCreateViewport: true
});

Hello World #7

Using Ext.application, controller, getView and create.

Ext.define('App.view.HelloWorld', {
    extend: 'Ext.Container',
    
    config: {
        fullscreen: true,
        html: 'Hello World! #7'
    }
});

Ext.define('App.controller.HelloWorld', {
    extend: 'Ext.app.Controller',

    views : [
        'HelloWorld'
    ],
    
    init: function () {
        this.getView('HelloWorld').create();
    }
});


Ext.application({
    name: 'App',
    controllers: ['HelloWorld']
});

Hello World #8

Using Ext.application, controller, automatic generated view getter and create.

Ext.define('App.view.WorldStage', {
    extend: 'Ext.Container',
    
    config: {
        fullscreen: true,
        html: 'Hello World! #8'
    }
});

Ext.define('App.controller.HelloWorld', {
    extend: 'Ext.app.Controller',

    views : [
        'WorldStage'
    ],
    
    init: function () {
        this.getWorldStageView().create();
    }
});

Ext.application({
    name: 'App',
    controllers: ['HelloWorld']
});

Hello World #9

Using Ext.application, controller, refs and ref's autoCreate.

Ext.define('App.view.WorldStage', {
    extend: 'Ext.Container',

    config: {
        fullscreen: true,
        html: 'Hello World! #9'
    }
});

Ext.define('App.controller.HelloWorld', {
    extend: 'Ext.app.Controller',

    views : [
        'WorldStage'
    ],

    refs: [
        {
            ref: 'worldstage',
            selector: 'worldstageview',
            xtype: 'worldstageview',
            autoCreate: true
        }
    ],

    init: function () {
        // Note that autoCreate is not creating the world stage view
        // automatically while the controller is initiated!
        // It only means that if you reference it the first time
        // through ref's getter method, it'll be created.
        this.getWorldstage();
    }
});

Ext.application({
    name: 'App',
    controllers: ['HelloWorld']
});

I'll be in Austin, TX, for SenchaCon, in fact I'm already there. So maybe see there. :) Follow me on Twitter @steffenhiller if you can't get enough of Sencha Touch talk.

That's all for now.