loading table of contents...

Studio Developer Manual / Version 2310

Table Of Contents

5.1.1 Components

Ext JS defines three basic types of components

  • Ext.Component

  • Ext.container.Container

  • Ext.container.Viewport

The base class for Ext JS UI controls is Ext.Component. Components are registered with the Ext.ComponentManager at construction time. They can be referenced at any time by id using the Ext.getCmp utility function. For more sophisticated searches like by xtype or component structure the Ext.ComponentQuery can be used as well as methods provided by Ext.mixin.Queryable as for example in Ext.container.Container. 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.

Components are nested in containers of class Ext.container.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.container.Viewport, which represents the viewable application area of the browser.

The API documentation of Ext JS is available at 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 Ext.ComponentManager, Ext.dom.Element, and the Ext namespace/utility class which contains many useful singletons like for example the Ext.ComponentQuery.

Search Results

Table Of Contents

Your Internet Explorer is no longer supported.

Please use Mozilla Firefox, Google Chrome, or Microsoft Edge.