loading table of contents...

5.1.1. Components

Ext JS defines three basic types of components

  • ext.Component

  • ext.Container

  • ext.ViewPort

The base class for Ext JS UI controls is ext.Component. Components are registered with the ext.ComponentMgr at construction time. They can be referenced at any time by id using the Ext.getCmp utility function. Component classes are required to define a static property named "xtype" that is used by the component manager to determine the runtime type of a component given in JSON notation. Note that when you use EXML to declare your components, the Jangaroo framework will take care of that for you.

Components are nested in containers of class ext.Container which is a subclass of ext.Component. Containers manage the lifecycle (that is, control creation, rendering and destruction) of their child components.

The top-level component of Studio's component tree is ext.Viewport, which represents the viewable application area of the browser.

The API documentation of Ext JS is available at sencha.com. Specifically, the documentation of Ext.Component provides a list of component types available in Ext JS. It is also worth looking into the API documentation of ComponentMgr, Element, and the Ext utility class.