这个 ext.js 的“xtype: 'app-main'”是什么答案

【问题标题】：what is this ext.js's "xtype: 'app-main'"这个 ext.js 的“xtype: 'app-main'”是什么
【发布时间】：2014-05-18 15:47:27
【问题描述】：

ext.js 的新手：我想了解这是什么：

xtype: 'app-main'

在我的自动生成代码中表示。没有可用的文档。我想这是对我的别名的引用，但我找不到它..

我使用了 sencha cmd（2014 年 5 月最新 - ext.js 4.2.2），它自动生成了许多文件，其中包含 xtype: 'app-main'...

Main.js

Ext.define('test12.view.Main', {
    extend: 'Ext.container.Container',
    requires:[
        'Ext.tab.Panel',
        'Ext.layout.container.Border'
    ],

    xtype: 'app-main',    <<<<-------

    layout: {
        type: 'border'
    },

    items: [{
        region: 'west',
        xtype: 'panel',
        title: 'west',
        width: 150
    },{
        region: 'center',
        xtype: 'tabpanel',
        items:[{
            title: 'Center Tab 1'
        }]
    }]
});

viewport.js

Ext.define('test12.view.Viewport', {
    extend: 'Ext.container.Viewport',
    requires:[
        'Ext.layout.container.Fit',
        'test12.view.Main'
    ],

    layout: {
        type: 'fit'
    },

    items: [{
        xtype: 'app-main'
    }]
});

【问题讨论】：

标签： javascript extjs extjs4

【解决方案1】：

xtype 是一种配置，可让您更轻松地实例化您定义的类

例子：

Ext.define('Myapp.view.MyCoolPanel',{
    extend : 'Ext.panel.Panel',
    xtype  : 'coolpanel',
    //some cool configs ... 

});
//somewhere else 
Ext.create('Ext.window.Window',{
    //regular configs

    items: [
    {
      xtype: 'coolpanel'

    }
]
}).show();

见http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.panel.Panel-cfg-xtype

最好的问候

【讨论】：

好的，我知道了，但是'app-main'呢？
您使用的是架构师还是为什么称其为自动生成的？

【解决方案2】：

所以，似乎 xtype: ... 在 Ext.defing( ... ) { 将新视图设置为 xtype，在本例中为 app-main。

有道理;)

【讨论】：