Properties Methods Events Config Options Direct Link
Observable
  Component
    BoxComponent
      Container

Class Ext.Container

Package:Ext
Defined In:Container.js
Class:Container
Subclasses:Panel, Viewport
Extends:BoxComponent

Base class for any Ext.BoxComponent that can contain other components. Containers handle the basic behavior of containing items, namely adding, inserting and removing them. The specific layout logic required to visually render contained items is delegated to any one of the different layout classes available. This class is intended to be extended and should generally not need to be created directly via the new keyword.

When either specifying child items of a Container, or dynamically adding components to a Container, remember to consider how you wish the Container to arrange those child elements, and whether those child elements need to be sized using one of Ext's built-in layout schemes.

By default, Containers use the ContainerLayout scheme. This simply renders child components, appending them one after the other inside the Container, and does not apply any sizing at all. This is a common source of confusion when widgets like GridPanels or TreePanels are added to Containers for which no layout has been specified. If a Container is left to use the ContainerLayout scheme, none of its child components will be resized, or changed in any way when the Container is resized.

A very common example of this is where a developer will attempt to add a GridPanel to a TabPanel by wrapping the GridPanel inside a wrapping Panel and add that wrapping Panel to the TabPanel. This misses the point that Ext's inheritance means that a GridPanel is a Component which can be added unadorned into a Container. If that wrapping Panel has no layout configuration, then the GridPanel will not be sized as expected.

Below is an example of adding a newly created GridPanel to a TabPanel. This requires prior knowledge of how to create GridPanels. See Ext.grid.GridPanel, Ext.data.Store and Ext.data.JsonReader as well as the grid examples in the Ext installation's examples/grid directory.

//  Create the GridPanel.
myGrid = new Ext.grid.GridPanel({
    myStore,
    myColumnModel,
    title: 'Results',
});

myTabPanel.add(myGrid);
myTabPanel.setActiveItem(myGrid);

Config Options

Config Options Defined By
  allowDomMove : Boolean
Whether the component can move the Dom node when rendering (defaults to true).
Component
  defaultType : String
The default type of container represented by this object as registered in Ext.ComponentMgr (defaults to 'panel').
Container
  disabledClass : String
CSS class added to the component when it is disabled (defaults to "x-item-disabled").
Component
  height : Number
The height of this component in pixels (defaults to auto).
BoxComponent
  id : String
The unique id of this component (defaults to an auto-assigned id).
Component
  pageX : Number
The page level x coordinate for this component if contained within a positioning container.
BoxComponent
  pageY : Number
The page level y coordinate for this component if contained within a positioning container.
BoxComponent
  width : Number
The width of this component in pixels (defaults to auto).
BoxComponent
  x : Number
The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
  y : Number
The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent

Public Properties

Property Defined By
  disabled : Boolean
True if this component is disabled. Read-only.
Component
  hidden : Boolean
True if this component is hidden. Read-only.
Component
  initialConfig : Object
This Component's initial configuration specification. Read-only.
Component
  items : MixedCollection
The collection of components in this container as a Ext.util.MixedCollection
Container
  rendered : Boolean
True if this component has been rendered. Read-only.
Component

Public Methods

Method Defined By

Public Events

Event Defined By