Question

Which is correct way to extend/subclass components?

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);
}
});

Or this:

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);
}
});

When I create an instance of my class using first version, like this

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

my panel has animation when colapsed and I get weird layout behaviour.

Which properties I can set in define and which I must in initComponent?

Answer 1

You will find the full explanation for your title question in here. Please also read the comment I’ve left to Molecular Man and have a look at the link included in my comment.

I’m not sure why you get this weird behaviour with the first version, for all I know this shouldn’t be the case. Could you perhaps let us know what happens when using the first version, but having the layout and animCollapse configs in InitComponent? Also, is there a chance you create this component more than once?