3

一般来说，我是 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 items:[] 中以 XTYPE 的形式调用这个类：
我这样做了：

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

还没有运气，我得到的只是： Cannot create an instance of unrecognized alias: widget.MyPanel"
你一定想，真是个菜鸟.... ;-)

有人请帮忙！！！

4

4 回答 4

7

在定义视图（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"
        }]
于 2011-05-17T17:41:22.797 回答
4

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

于 2011-05-17T16:17:57.533 回答
4

啊，呵呵，我完全忽略了一点：

使用“别名”，您将在 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
}

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

于 2011-05-27T09:32:08.790 回答
3

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

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

希望这可以帮助

于 2011-06-09T09:22:05.463 回答