What is the correct way to subclass Ext JS components?

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?

score 1 · Accepted Answer · edited May 23 '17 at 11:56

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?

edited May 23 '17 at 11:56

Community

1
1

answered Jun 27 '12 at 09:46

Izhaki

23,372
9
69
107

I'll try to create more instances and see what happens then. I'm rewriting whole layout right now, but all the time I'm still a beginner and learning all the time, so I was wondering what are best practises, to start properly :) – Misiu Jun 27 '12 at 12:36
Rewriting component from scratch helped. I don't know why, but now it works perfect :) – Misiu Jul 20 '12 at 12:58

What is the correct way to subclass Ext JS components?

1 Answers1