Sencha Touch 2.0 xtype not working

Question

Trying to follow along with the video here http://docs.sencha.com/touch/2-0/#!/guide/getting_started but once it gets to the part of adding the xtypes to put everything together about 3 minutes in. I can't get the xtype to work properly, here is what I have for my Main.js

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

    config: {
            tabBarPosition: 'bottom',

            items:[
                    {
                    xtype: 'homepanel',
                    }
    ]
    }
});

This is what I have in my Home.js file

Ext.define("GS.view.Home", {
    extend: 'Ext.tab.Panel',
    requires: ['Ext.TitleBar'],
    xtype: 'homepanel',

    config: {
    tabBarPosition: 'bottom',

    items: [
        {
            title: 'Welcome',
            iconCls: 'home',
            cls:'home',
            styleHtmlContent: true,
            scrollable: true,



            html: [
                '<img src="http://staging.sencha.com/img/sencha.png" />',
                '<h1>Welcome to Sencha Touch</h1>',
                "<p>You'rebbb 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("")
        }]
    }
});

and in the app.js I have this

views: [ 'Main', 'Home', 'Contact' ],

I did exactly what the video is doing, maybe I am missing something? Thank in advance for the help.

Macy Abbey Macy Abbey · Accepted Answer · 2012-03-12T23:42:43

You need to use the alias property in your class definition.

Ext.define("GS.view.Home", {
    extend: 'Ext.tab.Panel',
    requires: ['Ext.TitleBar'],
    alias: 'widget.homepanel',

    config: {
        tabBarPosition: 'bottom',
        items: [{
             title: 'Welcome',
             iconCls: 'home',
             cls:'home',
             styleHtmlContent: true,
             scrollable: true,
             html: [
                '<img src="http://staging.sencha.com/img/sencha.png" />',
                '<h1>Welcome to Sencha Touch</h1>',
                "<p>You'rebbb 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("")
        }]
    }
});

Sencha Touch 2.0 xtype not working

2 Answers