在 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 项中以 XTYPE 的形式调用该类：[]:
我确实喜欢这样：

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

还没有运气，我得到的只是： 无法创建无法识别的别名的实例：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"
        }]

Answer 2

嗯，您是否尝试过小写您的别名。我认为别名总是以小写形式存储和获取，但不确定

Answer 3

啊，呵呵，我完全忽略了一些事情：

使用“别名”，您将在 ExtJS 类列表中创建一个新的类引用。因此，通过像上面那样添加别名，您可以通过调用来实例化它。

var newMyPanel = Ext.create('widget.MyPanel');

但是，如果您要添加带有 xtype 说明符的实例，则必须省略小部件部分，只需执行以下操作：

var myContainer = Ext.create('Ext.panel.Panel',{
    items: [{
        xtype: 'MyPanel'
    }]
});

使用上面的代码，Ext 将查找具有以下类型的类：别名“widget.MyPanel”。

除此之外，我认为你的构造函数看起来有点时髦。构造函数不应返回自身（例如，就像在 Perl 构造函数中所做的那样）

这就足够了：

constructor: function() {
     this.callParent(arguments);
     // Your own code here
}

干杯，让我知道它是否有帮助
抢

Answer 4

你所要做的就是像这样声明它：

 var panel1 =  Ext.create('Ext.app.myPanel',{title : 'panel 1',height:350});//title and hight are optionals if u have already defined them

然后像这样使用它：

...
items : [panel1 ]
...

你可能需要需要它：

 Ext.require([
, 'Ext.app.myPanel'
]);

并将 mypanel.js 放在 app 文件夹中

希望这会有所帮助