CODEWITHSUNDEEP
extjssencha-touch-2
Santiago Moreno
Santiago Moreno

Reputation: 113

Sencha Touch 2.0 xtype not working

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.

Upvotes: 3

Views: 1489

Answers (2)

Scientist_Chidi
Scientist_Chidi

Reputation: 1

That is probably because you are trying to extend: Ext.tab.Panel in your Home.js .

Doing that makes it look like you are adding a tab panel inside a tab panel.

try extend: 'Ext.Panel', in your Home.js that should do or you could also use

extend: 'Ext.Container',

Upvotes: 0

Macy Abbey
Macy Abbey

Reputation: 3887

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("")
        }]
    }
});

Upvotes: 1

Related Questions