Properties Methods Events Config Options Direct Link
Observable
  Component
    BoxComponent
      Container
        Panel

Class Ext.Panel

Package:Ext
Defined In:Panel.js
Class:Panel
Subclasses:ButtonGroup, TabPanel, Tip, Window, FieldSet, FormPanel, GridPanel, TreePanel
Extends:Container

Panel is a container that has specific functionality and structural components that make it the perfect building block for application-oriented user interfaces.

Panels are, by virtue of their inheritance from Ext.Container, capable of being configured with a layout, and containing child Components.

When either specifying child items of a Panel, or dynamically adding Components to a Panel, remember to consider how you wish the Panel 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, Panels 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.

A Panel may also contain bottom and top toolbars, along with separate header, footer and body sections (see frame for additional information).

Panel also provides built-in expandable and collapsible behavior, along with a variety of prebuilt tool buttons that can be wired up to provide other customized behavior. Panels can be easily dropped into any Container or layout, and the layout and rendering pipeline is completely managed by the framework.

Config Options

Config OptionsDefined By
 allowDomMove : Boolean
Whether the component can move the Dom node when rendering (defaults to true).
Component
 collapsed : Boolean
true to render the panel collapsed, false to render it expanded (defaults to false).
Panel
 collapsedCls : String
A CSS class to add to the panel's element after it has been collapsed (defaults to 'x-panel-collapsed').
Panel
 data : Mixed
The initial set of data to apply to the tpl to update the content area of the Component.
Component
 disabledClass : String
CSS class added to the component when it is disabled (defaults to 'x-item-disabled').
Component
 headerAsText : Boolean
true to display the panel title in the header, false to hide it (defaults to true).
Panel
 hidden : Boolean
Render this component hidden (default is false). If true, the hide method will be called internally.
Component
 hideCollapseTool : Boolean
true to hide the expand/collapse toggle button when collapsible == true, false to display it (defaults to false).
Panel
 layoutConfig : Object
This is a config object containing properties specific to the chosen layout if layout has been specified as a string.

Container
 minButtonWidth : Number
Minimum width in pixels of all buttons in this panel (defaults to 75)
Panel
 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
 resizeEvent : String
The event to listen to for resizing in layouts. Defaults to 'bodyresize'.
Panel
 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

PropertyDefined By
 buttons : Array
This Panel's Array of buttons as created from the buttons config property. Read only.
Panel
 bwrap : Ext.Element
The Panel's bwrap Element used to contain other Panel elements (tbar, body, bbar, footer). See bodyCfg. Read-only.
Panel
 collapsed : Boolean
True if this panel is collapsed. Read-only.
Panel
 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

MethodDefined By

Public Events

EventDefined By