When following Sencha Touch 2 MVC in Depth Part 1 session from Senchacon 2011 i keep getting same error all over again:

Uncaught Error: [Ext.createByAlias] Cannot create an instance of 
unrecognized alias: widget.homepage

Normaly in extjs4 I would use alias : widget.homepage and It worked fine.But, when folowing Ed Spencer's tutorial on Sencha Touch MVC app I keep getting same error:

APP.JS

Ext.Loader.setConfig({
    enabled:true
});

Ext.application({
    name: 'Sencha',

    controllers: ['Main'],

    launch: function () {
        Ext.create("Ext.tab.Panel", {
            fullscreen: true,
            tabBarPosition: 'bottom',
            items: [
               {
                   xtype: 'homepage'
               }
            ]
        });
    }
});

View (HOME.JS)

Ext.define('Sencha.view.Home', {
    extend: 'Ext.Panel',
    xtype: 'homepage',
    config: {
        title: 'Home',
        iconCls: 'home',
        cls: 'home',
        html: [
            '<img src=".png" />',
            '<h1>Wele to Sencha Touch</h1>',
            "<p>You're creating the Getting Started app. This demonstrates how ",
            "to use tabs, lists and forms to create a simple app</p>",
            '<h2>Sencha Touch (2.0.0)</h2>'
        ].join("");
    }
});

Controller(MAIN.JS)

Ext.define('Sencha.controller.Main', {
    extend: 'Ext.app.Controller',
    views: ['Home'],
    init: function () {
        console.log('inited');
    }
});

When following Sencha Touch 2 MVC in Depth Part 1 session from Senchacon 2011 i keep getting same error all over again:

Uncaught Error: [Ext.createByAlias] Cannot create an instance of 
unrecognized alias: widget.homepage

Normaly in extjs4 I would use alias : widget.homepage and It worked fine.But, when folowing Ed Spencer's tutorial on Sencha Touch MVC app I keep getting same error:

APP.JS

Ext.Loader.setConfig({
    enabled:true
});

Ext.application({
    name: 'Sencha',

    controllers: ['Main'],

    launch: function () {
        Ext.create("Ext.tab.Panel", {
            fullscreen: true,
            tabBarPosition: 'bottom',
            items: [
               {
                   xtype: 'homepage'
               }
            ]
        });
    }
});

View (HOME.JS)

Ext.define('Sencha.view.Home', {
    extend: 'Ext.Panel',
    xtype: 'homepage',
    config: {
        title: 'Home',
        iconCls: 'home',
        cls: 'home',
        html: [
            '<img src="http://staging.sencha./img/sencha.png" />',
            '<h1>Wele to Sencha Touch</h1>',
            "<p>You're creating the Getting Started app. This demonstrates how ",
            "to use tabs, lists and forms to create a simple app</p>",
            '<h2>Sencha Touch (2.0.0)</h2>'
        ].join("");
    }
});

Controller(MAIN.JS)

Ext.define('Sencha.controller.Main', {
    extend: 'Ext.app.Controller',
    views: ['Home'],
    init: function () {
        console.log('inited');
    }
});

• javascript
• html
• sencha-touch
• extjs
• sencha-touch-2

• I was having same Uncaught Error: [Ext.createByAlias] Cannot create an instance of unrecognized alias: widget.somename but i fixed by declaring the inner views before the main viewport on ext.application, like this: views: ['someViewWithXtype','anotherViewWithXtype','myViewport'], – RaphaelDDL Commented Mar 6, 2012 at 18:21

2 Answers 2

It looks like they changed where the definition of your views goes - it goes in app.js instead of the controller, main.js.

So if you cut and paste views: ['Home'], from main.js into app.js right above the controllers: definition, your example should work.

This is a good thing in my opinion in the long run - basically you define your views, controllers, models, etc all in one place now. But it's a shame that by making this change, anyone trying to follow along with this video with the latest and greatest version of Sencha 2 is going to run into this issue.

EDIT: found another issue. When you get to the part where you add a ref to the contact form in the controller, the syntax for that has changed as well - it goes into a config. Adding this to the controller worked for me:

config: {
    refs: {
        contactForm: {
            selector: '#contactForm'
        }
    }
},

In case someone is having the same problem, i was defining the config property fullScreen (camelCase) instead of fullscreen (with small case).

After I fixed that the problem was solved.