在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项目中以XTY​​PE的形式调用此类:[]:
我这样做:

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

在定义视图(MyPanel)时,为什么要设置views属性？

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;
    }
});

当您使用新视图时,需要指定它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"
        }]