Question

扩展/子类组件的正确方法是什么？

Ext.define('Holidays.Components.UserInfo', {
extend: 'Ext.panel.Panel',
alias: 'widget.UserInfo',
region: 'west',
split: true,
title: 'Categories',
width: 300,
collapsible: true,
layout: 'border',
animCollapse: false,

initComponent: function () {
    var me = this;

    Ext.apply(me, {
        items: [{
            xtype: 'panel',
            region: 'center',
            border: false
        }, {
            xtype: 'panel',
            title: 'Tab 2',
            region: 'south',
            collapsible: true,
            height: 200
        }, ]
    });
    me.callParent(arguments);
}
});

或者这个：

Ext.define('Holidays.Components.UserInfo', {
extend: 'Ext.panel.Panel',
alias: 'widget.UserInfo',

initComponent: function () {
    var me = this;

    Ext.apply(me, {
        width: 300,
        collapsible: true,
        layout: 'border',
        animCollapse: false,
        region: 'west',
        split: true,
        title: 'Categories',
        items: [{
            xtype: 'panel',
            region: 'center',
            border: false
        }, {
            xtype: 'panel',
            title: 'Tab 2',
            region: 'south',
            collapsible: true,
            height: 200
        }, ]
    });
    me.callParent(arguments);
}
});

当我使用第一个版本创建我的类的实例时，像这样

this.userPanel = Ext.create("Holidays.Components.UserInfo");

我的面板在拍摄时有动画，我得到了奇怪的布局行为。

我可以在define中设置哪些属性以及initComponent中必须包含哪些属性？

Answer 1

您可以在here中找到标题问题的完整说明。另请阅读我留给Molecular Man的评论，并查看我的评论中包含的链接。

我不确定为什么你会在第一个版本中得到这种奇怪的行为，因为我知道这不应该是这种情况。您是否可以告诉我们使用第一个版本时会发生什么，但在InitComponent中使用layout和animCollapse配置？此外，您是否有可能不止一次创建此组件？

将Ext JS组件子类化的正确方法是什么？

1 个答案: