Clear Up
SharpKit Reference

Ext.panel Namespace

Download SDK:


Name Description

NOTE This is a private utility class for internal use by the framework. Don't rely on its existence.

A base class which provides methods common to Panel classes across the Sencha product range.

Please refer to sub class's documentation


NOTE This is a private utility class for internal use by the framework. Don't rely on its existence.

DD implementation for Panels.


Simple header class which is used for on Ext.panel.Panel and Ext.window.Window.


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.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 Auto 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.

Panel also provides built-in collapsible, expandable and closable behavior. Panels can be easily dropped into any Container or layout, and the layout and rendering pipeline is completely managed by the framework.

Note: By default, the close header tool destroys the Panel resulting in removal of the Panel and the destruction of any descendant Components. This makes the Panel object, and all its descendants unusable. To enable the close tool to simply hide a Panel for later re-use, configure the Panel with closeAction: 'hide'.

Usually, Panels are used as constituents within an application, in which case, they would be used as child items of Containers, and would themselves use Ext.Components as child items. However to illustrate simply rendering a Panel into the document, here's how to do it:

    Ext.create('Ext.panel.Panel', {
            title: 'Hello',
            width: 200,
            html: '<p>World!</p>',
            renderTo: Ext.getBody()

A more realistic scenario is a Panel created to house input fields which will not be rendered, but used as a constituent part of a Container:

var filterPanel = Ext.create('Ext.panel.Panel', {
            bodyPadding: 5,  // Don't want content to crunch against the borders
            width: 300,
            title: 'Filters',
            items: [{
            xtype: 'datefield',
            fieldLabel: 'Start date'
            }, {
            xtype: 'datefield',
            fieldLabel: 'End date'
            renderTo: Ext.getBody()

Note that the Panel above is configured to render into the document and assigned a size. In a real world scenario, the Panel will often be added inside a Container which will use a layout to render, size and position its child Components.

Panels will often use specific layouts to provide an application with shape and structure by containing and arranging child Components:

var resultsPanel = Ext.create('Ext.panel.Panel', {
            title: 'Results',
            width: 600,
            height: 400,
            renderTo: Ext.getBody(),
            layout: {
            type: 'vbox',       // Arrange child items vertically
            align: 'stretch',    // Each takes up full width
            padding: 5
            items: [{               // Results grid specified as a config object with an xtype of 'grid'
            xtype: 'grid',
            columns: [{header: 'Column One'}],            // One header just for show. There's no data,
            store: Ext.create('', {}), // A dummy empty data store
            flex: 1                                       // Use 1/3 of Container's height (hint to Box layout)
            }, {
            xtype: 'splitter'   // A splitter between the two child items
            }, {                    // Details Panel specified as a config object (no xtype defaults to 'panel').
            title: 'Details',
            bodyPadding: 5,
            items: [{
            fieldLabel: 'Data item',
            xtype: 'textfield'
            }], // An array of form fields
            flex: 2             // Use 2/3 of Container's height (hint to Box layout)

The example illustrates one possible method of displaying search results. The Panel contains a grid with the resulting data arranged in rows. Each selected row may be displayed in detail in the Panel below. The vbox layout is used to arrange the two vertically. It is configured to stretch child items horizontally to full width. Child items may either be configured with a numeric height, or with a flex value to distribute available space proportionately.

This Panel itself may be a child item of, for exaple, a which will size its child items to fit within its content area.

Using these techniques, as long as the layout is chosen and configured correctly, an application may have any level of nested containment, all dynamically sized according to configuration, the user's preference and available browser size.


NOTE This is a private utility class for internal use by the framework. Don't rely on its existence.

A custom drag proxy implementation specific to Ext.panel.Panels. This class is primarily used internally for the Panel's drag drop implementation, and should never need to be created directly.


TablePanel is the basis of both TreePanel and GridPanel.

TablePanel aggregates:

  • a Selection Model
  • a View
  • a Store
  • Scrollers
  • Ext.grid.header.Container

This class is used to display small visual icons in the header of a panel. There are a set of 25 icons that can be specified by using the type config. The handler config can be used to provide a function that will respond to any click events. In general, this class will not be instantiated directly, rather it will be created by specifying the configuration on the Panel itself.

    Ext.create('Ext.panel.Panel', {
            width: 200,
            height: 200,
            renderTo: document.body,
            title: 'A Panel',
            tools: [{
            type: 'help',
            handler: function(){
            // show help here
            }, {
            itemId: 'refresh',
            type: 'refresh',
            hidden: true,
            handler: function(){
            // do refresh
            }, {
            type: 'search',
            handler: function(event, target, owner, tool){
            // do search
© Copyright 2005-2011 SharpKit. All rights reserved.