Clever Geek Handbook

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 xtypes add part to get it all together in about 3 minutes. I cannot get xtype to work correctly, 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 app.js i have this

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

I did exactly what the video does, maybe I am missing something? Thanks in advance for your help.

+3


source to share


2 answers


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


source


It might have something to do with what you are trying to extend: Ext.tab.Panel in your Home.js.

This makes it look like adding a tab bar inside a tab bar.



try extending: "Ext.Panel", in your Home.js, which should do, or you can also use

expand: 'Ext.Container',

0


source






More articles:


All Articles