Ext.define/Ext.extend in Sencha Touch 2

Question

I'm just starting to pick up Sencha Touch 2 MVC. I have heavy Ext 3 experience, but this is a totally new world.

I can't seem to get very far in building a view. I've taken my code in two directions based on what I've seen on the Internet, and neither works.

Path 1

My app.js:

Ext.application({
        name: 'BkAdmin',
        views: ['LoginForm'],
        launch: function() {
            Ext.create('BkAdmin.view.LoginForm');
    }
});

My view/LoginForm.js:

Ext.define('BkAdmin.view.LoginForm', {
        extend: 'Ext.form.FormPanel',
        config: {
            fullscreen: true,
            initComponent: function() {
                        alert('yo!');
                        BkAdmin.view.LoginForm.superclass.initComponent.apply(this, arguments);
            }
        }
    }
);

This loads error-free, and I can even add form items in the config section. However, initComponent() inexplicably never gets called, so the view is utterly inflexible.

Path 2

My app.js:

Ext.application({
    name: 'BkAdmin',
    views: ['LoginForm'],
    launch: function() {
    BkAdmin.view.LoginForm = new BkAdmin.view.LoginForm();
    }
});

My view/LoginForm.js:

BkAdmin.view.LoginForm = Ext.extend(Ext.form.FormPanel, {
    fullscreen: true,
    initComponent: function() {
                alert('yo!');
        BkAdmin.view.LoginForm.superclass.initComponent.apply(this, arguments);
    }
});

This flat-out doesn't work. Chrome reports 'Cannot set property 'LoginForm' of undefined'...how on earth did view get undefined? In addition, it says 'The following classes are not declared even if their files have been loaded: 'BkAdmin.view.LoginForm'.' Sure looks declared to me.

Many questions here: what did I do wrong in the above paths? How can I get initComponent() to be called in Path 1, and get Path 2 to work? Which code is quote-unquote better to use?

Thanks!

Answer 1

Path 1 is the (almost) correct way. You should be using Ext.define and not Ext.extend (which doesn't work very well/reliably) because of the new class system (much like Ext JS 4).

The config block is only used for configurations defined in the class/documentation for that class. Things like fullscreen, items, cls, style and so forth. Anything else that is defined in that config block which is not a configuration will be stored in instance.config.

Instead, you should be putting the methods you want to override in the main configuration object in Ext.define:

Ext.define('MyApp.view.MyView', {
    extend: 'Ext.Component',

    config: {
        cls: 'custom-cls',
        html: 'Some html'
    },

    initComponent: function() {
        // do something
    }
});

Sencha have also deprecated initComponent in Sencha Touch 2.0. When you need a method called when the class is instantiated, you should use the initialize method. Please note, that ideally you shouldn't set configurations inside initialize unless you really need to. You should always put them inside the config block.

Finally, you can call the extended class' method by using:

this.callParent(arguments);

There is a guide on the changes to the class system between Ext JS 3.x and Ext JS 4.x available here which may be of some help to you. There is also a updated class system guide for Sencha Touch 2.x here.