extjs - 在 Ext.Define 中创建 xtype 并在 TabPanel 项中调用它 :[]

Question

我一般是 extjs 的新手，特别是 4 版本:

我创建了一个类:

Ext.define('MyPanel', {
    extend:'Ext.panel.Panel',
    views: ["MyPanel"],

    config: {
        width: 200,
        height: 300,
        title: "HELLO"
    },

    constructor:function(config) {
        this.initConfig(config);
        return this;
    },
    alias: 'widget.MyPanel'
});

接下来，我想在 tabPanel items:[] 中以 XTYPE 的形式调用这个类:
我是这样的:

items: [{
    title: 'Kontakt',
    id: 'kontaktTab',
    closable:true,
    closeAction: 'hide',
    layout: 'fit',
    items:[{
            xtype: "MyPanel"
        }]

还没有运气，我得到的是: Cannot create an instance of unrecognized alias: widget.MyPanel"你一定会想，真是个菜鸟……
;-)

有人请帮忙!!!

Answer 1

在定义 View (MyPanel)时，为什么要设置views属性(property)？

Ext.define('MyPanel', {
    extend:'Ext.panel.Panel',
    alias: 'widget.MyPanel'
    views: ["MyPanel"],    <------ Why do you need this???
    config: {
        width: 200,
        height: 300,
        title: "HELLO"
    },
    constructor:function(config) {
        this.initConfig(config);
        return this;
    }
});

并且当您使用新 View 时，您需要在 requires 中指定它。 .下面是一个例子:

Ext.define('MyApp.view.Viewport',{
    extend: 'Ext.container.Viewport', 
    layout: 'border',
    requires: [
        'MyPanel'       <--- This will ensure that this view file needs to be loaded
    ],  
    .
    .
    .
    items: [{
        title: 'Kontakt',
        id: 'kontaktTab',
        closable:true,
        closeAction: 'hide',
        layout: 'fit',
        items:[{
            xtype: "MyPanel"
        }]