Component

Overview

Component is the base class for all GXT widgets. Component is a Widget subclass that introduces several new features and concepts to standard GWT widgets.

Lazy Rendering

Components are rendered lazily. This means that the component's DOM elements are not created when the component is first instantiated, rather created when the component is rendered.

Rendering occurs when the render method is called on a component. The render method expects both a target element and the index at which the component should be rendered. This is quite different than in GWT. In GWT, a widget's DOM is created when the widget is created and is complete before the widget has been added to the panel. Rendering a component lazily and with a parent element provides several advantages:

• The DOM is not created until the component is added to the document. You could create a 100 by 100 Table which would not result in any elements being created unless the Table is added to the document.
• Components can be "configured" before they are rendered. For example, ContentPanel supports a "frame" style where the contents are wrapped in rounded corners with margin. Since, the component is rendered lazily, you are able to call setFrame(true) on the panel before it is rendered. When rendered, the extra elements are created and wrap the original content.

So when is a component rendered? Rendering occurs at 2 different times. First, if a Component is added to a GWT Panel, it is rendered at that time. Second, if a Component is added to a GXT Container, it is rendered by the Container.

El Object

Each component, has a El instance which provides access to many DOM related functions. This instance can be accessed using the el() method. It is important to note that the El instance is only available after the component has been rendered. This makes sense, as a El instance wraps a DOM element, and a component's DOM structure is not created until the component is rendered.