这个 ext.js 的“xtype: 'app-main'”是啥

Posted 2023-02-25

【中文标题】这个 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'
    ]
);

【参考方案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。

有道理;)