Container vs Panel in Extjs

Question

I have a question about Extjs

I have read the official document on Sencha doc but I have some confusion about 2 kinds of Component .That's the Container and the Panel.

What is the difference between Container and Panel? Which should be used in which case?

Any answer are very appreciated.

Answer 1

Excerpt from the documentation of Container:

Base class for any Ext.Component that may contain other Components. Containers handle the basic behavior of containing items, namely adding, inserting and removing items.

The most commonly used Container classes are Ext.panel.Panel, Ext.window.Window and Ext.tab.Panel. If you do not need the capabilities offered by the aforementioned classes you can create a lightweight Container to be encapsulated by an HTML element to your specifications by using the autoEl config option.

This means, that the Panel extends the Container, meaning it can do more stuff. For example it has a header and supports dokedItems (i.e toolbars), can be closed (compare also the other events of the two components), while the container does not have by default such things.

The general rule of thumb is: use simple containers always when you do not need the features of the panel, i.e when you just need to host other children.