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"
        }]

还没有运气，我得到的是： 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"
        }]

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 文件夹

希望这会有所帮助

在Ext.Define中创建xtype并在TabPanel项目中调用它：[]

4 个答案: