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 (ie 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, ie when you just need to host other children.

Answer 2

Always remember that panels much heavier than container. Therefore use it only needed.

Answer 3

Andrei I has explained the process pretty well and here is one more documentation . On this documentation, Sencha team details how to choose correct class to extend for three of these widgets: Component , Container & Panel .

Which Class To Extend

Choosing the best class to extend is mainly a matter of efficiency, and which capabilities the base class must provide.