I am totally new to Ext-Designer and Ext-JS. My monther tongue is german and I am not familiar with specifics used in Ext.
Is there a compressed information telling me differences between Container, Panel, Viewport, Window, etc?
What type is to be used in what situation?
Main differences between the Container-Classes, not in detail, just simple explanations would help.
Welcome to Ext JS! :-) Thanks for trying out the products! I can give you a short explanation of each type of Container and their differences:
Container
This is the base Container class that extends BoxComponent. It provides the fundamental ability of containing child Components and managing the Layout of those Components. it is light-weight and creates a simple "div" DOM element.
Panel
Panel extends the Container class and provides enhanced UI features for application-oriented user interfaces. Where as a Container is a simple "div" that manages its child components, a Panel is much more: it provides a header, body, footer, and "frame", all of which can contain different pieces of your UI. For example, a Panel can have a title that renders in the header, and it can have Toolbars (tbar, bbar, fbar) at the top of the body, bottom of the body, or in the footer respectively. There are many other Panel options above and beyond a simple Container, but it provides the same abilities of a Container and renders its child components in the body of the Panel.
Viewport
The Viewport literally represents the "body" element of your HTML document, and sizes itself to fill the entire viewport/screen of the browser window (no overflow, no scrolling). It will always maintain its size to be the size of the browser viewport, even when the browser window is resized. Besides that, it is identical to a Container.
Window
A Window is a Panel that acts like a dialog...it is floated, can be resized, minimized/maximized, etc. All of the same things you'd expect from a window in any window-based OS. Besides the added window features, a Window contains the same rendering style as a Panel (header, body, footer, etc.).
TabPanel
TabPanel is obviously a Panel that renders tabs for each child component. It has a default/mandatory layout of card and that cannot change. Each child component ("tab") can be any Panel sub-class and provide its own layout of course.
GridPanel
A Panel that renders data in a tabular format. A GridPanel is a Panel, but it cannot act like a Container and have other child components. It can however have Toolbars and other Panel features in the header/footer.
FormPanel
This is a Panel that defaults to the form layout (which can be overwritten of course) and provides features for loading and submitting form data both synchronously or asynchronously using AJAX, and validating user input.
TreePanel
This is simply a Panel that renders tree data/nodes. Like the GridPanel, it too cannot contain child components, but can have the other Panel UI features in the header/footer such as Toolbars.
I hope my explanations have helped! Let us know if you have any more questions. Thanks.
thanks for this reply. It's exactly what I was searching for: a comprehensive overview to get along with the Ext JS classes quickly.
Is there something similar for the other classes and groups of classes? Especially when used in context of Ext Designer it may help to identify correct class and put into a context/hierarchy of objects that make sense.
What type of container to be used?
Reply With Quote
