Sencha Touch 2.0 xtype不工作

Question

我试着跟着视频走，在这里http://docs.sencha.com/touch/2-0/#!/guide/getting_started，但是一旦到了添加xtype的部分，就会把所有的东西放在一起，大约3分钟。我无法让xtype正常工作，下面是我的Main.js

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

    config: {
            tabBarPosition: 'bottom',

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

这是我的Home.js文件中的内容

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

在app.js中，我有这个

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

我做了视频正在做的事情，也许我遗漏了什么？提前感谢你的帮助。

Answer 1

您需要在类定义中使用别名属性。

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

Answer 2

这可能是因为您试图在Home.js中扩展: Ext.tab.Panel。

这样做会使您看起来像是在选项卡面板中添加选项卡面板。

尝试在你的Home.js中扩展：'Ext.Panel'，这样就可以了，你也可以使用

扩展：'Ext.Container'，