Class Ext.Panel

An array of events that, when fired, should be bubbled to any parent container. See Ext.util.Observable.enableBubble. Defaults to ['add', 'remove'].

The sizing and positioning of the component Elements is the responsibility of the Component's layout manager which creates and manages the type of layout specific to the component.

If the layout configuration is not explicitly specified for a general purpose compopnent the default layout manager will be used.

Optional. Specify an existing HTML element, or the id of an existing HTML element to use as the content for this component.

• Description :
  This config option is used to take an existing HTML element and place it in the layout element of a new component (it simply moves the specified DOM element after the Component is rendered to use as the content.
• Notes :
  The specified HTML element is appended to the layout element of the component after any configured HTML has been inserted, and so the document will not contain this element at the time the render event is fired.
  The specified HTML element used will not participate in any layout scheme that the Component may use. It is just HTML. Layouts operate on child items.
  Add either the x-hidden or the x-hide-display CSS class to prevent a brief flicker of the content before it is rendered to the panel.

The default xtype of child Components to create in this Container when a child item is specified as a raw configuration object, rather than as an instantiated Component.

Defaults to 'panel'.

This option is a means of applying default settings to all added items whether added through the items config or via the add or insert methods.

If an added item is a config object, and not an instantiated Component, then the default properties are unconditionally applied. If the added item is an instantiated Component, then the default properties are applied conditionally so as not to override existing properties in the item.

If the defaults option is specified as a function, then the function will be called using this Container as the scope (this reference) and passing the added item as the first parameter. Any resulting object from that call is then applied to the item as default properties.

For example, to automatically apply padding to the body of each of a set of contained Ext.Panel items, you could pass: defaults: {bodyStyle:'padding:15px'}.

Usage:

defaults: {               // defaults are applied to items, not the container
    autoScroll:true
},
items: [
    {
        xtype: 'panel',   // defaults do not have precedence over
        id: 'panel1',     // options in config objects, so the defaults
        autoScroll: false // will not be applied here, panel1 will be autoScroll:false
    },
    new Ext.Panel({       // defaults do have precedence over options
        id: 'panel2',     // options in components, so the defaults
        autoScroll: false // will be applied here, panel2 will be autoScroll:true.
    })
]

var panel = new Ext.Panel({
    fullscreen: true,
    dockedItems: [{
        xtype: 'toolbar',
        dock: 'top',
        items: [{
            text: 'Docked to the bottom'
        }]
    }]
});

** IMPORTANT: be sure to specify a layout if needed ! **

A single item, or an array of child Components to be added to this container, for example:

// specifying a single item
items: {...},
layout: 'fit',    // specify a layout!

// specifying multiple items
items: [{...}, {...}],
layout: 'hbox', // specify a layout!

Each item may be:

Notes:

*Important: In order for child items to be correctly sized and positioned, typically a layout manager must be specified through the layout configuration option.

The sizing and positioning of child items is the responsibility of the Container's layout manager which creates and manages the type of layout you have in mind. For example:

If the layout configuration is not explicitly specified for a general purpose container (e.g. Container or Panel) the default layout manager will be used which does nothing but render child components sequentially into the Container (no sizing or positioning will be performed in this situation).

layout may be specified as either as an Object or as a String:

A config object containing one or more event handlers to be added to this object during initialization. This should be a valid listeners config object as specified in the addListener example for attaching multiple handlers at once.

DOM events from ExtJs Components

While some ExtJs Component classes export selected DOM events (e.g. "click", "mouseover" etc), this is usually only done when extra value can be added. For example the DataView's click event passing the node clicked on. To access DOM events directly from a a child element of a Component, we need to specify this explicitly:

new Ext.Panel({
    width: 400,
    height: 200,
    dockedItems: [{
        xtype: 'toolbar'
    }],
    listeners: {
        click: {
            element: 'el', //bind to the underlying el property on the panel
            fn: function(){ console.log('click el'); }
        },
        dblclick: {
            element: 'body', //bind to the underlying body property on the panel
            fn: function(){ console.log('dblclick body'); }
        }
    }
});

The maximum value in pixels which this Component will set its height to.

Warning: This will override any size management applied by layout managers.

The maximum value in pixels which this Component will set its width to.

Warning: This will override any size management applied by layout managers.

The minimum value in pixels which this Component will set its height to.

Warning: This will override any size management applied by layout managers.

The minimum value in pixels which this Component will set its width to.

Warning: This will override any size management applied by layout managers.

Specify the id of the element, a DOM element or an existing Element that this component will be rendered into.

See render also.

An XTemplate used to create the Element which will encapsulate this Component.

You do not normally need to specify this. For the base classes Ext.Component, Ext.Component, and Ext.Container, this defaults to 'div'. The more complex Ext classes use a more complex DOM structure.

This is intended to allow the developer to create application-specific utility Components encapsulated by different DOM elements.

• 'horizontal', 'vertical', 'both' to enabling scrolling for that direction.
• A Scroller configuration.
• false to explicitly disable scrolling.

new Ext.Panel({
            title: 'Some Title',
            renderTo: Ext.getBody(),
            width: 400, height: 300,
            layout: 'form',
            items: [{
                xtype: 'textareafield',
                style: {
                    width: '95%',
                    marginBottom: '10px'
                }
            },
            new Ext.Button({
                text: 'Send',
                minWidth: '100',
                style: {
                    marginBottom: '10px'
                }
            })
            ]
        });

new Ext.Panel({
          title: 'Some Title',
          baseCls: 'x-component'
          ui: 'green'
      });

The ui configuration in this example would add 'x-component-green' as an additional class.