Class Ext.Tip

A DomHelper configuration object specifying the element structure of this Panel's body Element.

This may be used to force the body Element to use a different form of markup than is created automatically. An example of this might be to create a child Panel containing custom content, such as a header, or forcing centering of all Panel content by having the body be a <center> element:

new Ext.Panel({
    title: 'New Message',
    collapsible: true,
    renderTo: Ext.getBody(),
    width: 400,
    bodyCfg: {
        tag: 'center',
        cls: 'x-panel-body'
    },
    items: [{
        border: false,
        header: false,
        bodyCfg: {tag: 'h2', html: 'Message'}
    }, {
        xtype: 'textarea',
        style: {
            width: '95%',
            marginBottom: '10px'
        }
    },
        new Ext.Button({
            text: 'Send',
            minWidth: '100',
            style: {
                marginBottom: '10px'
            }
        })
    ]
});

This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

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

True to enable dragging of this Panel (defaults to false).

For custom drag/drop implementations, an Ext.Panel.DD config could also be passed in this config instead of true. Ext.Panel.DD is an internal, undocumented class which moves a proxy Element around in place of the Panel's element, but provides no other behaviour during dragging or on drop. It is a subclass of Ext.dd.DragSource, so behaviour may be added by implementing the interface methods of Ext.dd.DragDrop eg:

new Ext.Panel({
    title: 'Drag me',
    x: 100,
    y: 100,
    renderTo: Ext.getBody(),
    floating: true,
    frame: true,
    width: 400,
    height: 200,
    draggable: {
//      Config option of Ext.Panel.DD class.
//      It's a floating Panel, so do not show a placeholder proxy in the original position.
        insertProxy: false,

//      Called for each mousemove event while dragging the DD object.
        onDrag : function(e){
//          Record the x,y position of the drag proxy so that we can
//          position the Panel at end of drag.
            var pel = this.proxy.getEl();
            this.x = pel.getLeft(true);
            this.y = pel.getTop(true);

//          Keep the Shadow aligned if there is one.
            var s = this.panel.getEl().shadow;
            if (s) {
                s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
            }
        },

//      Called on the mouseup event.
        endDrag : function(e){
            this.panel.setPosition(this.x, this.y);
        }
    }
}).show();

This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name'
    }]
});

This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield'
        hideLabel: true
    }]
});

This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

// Apply a style to the field's label:
<style>
    .required .x-form-item-label {font-weight:bold;color:red;}
</style>

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        itemCls: 'required' //this label will be styled
    },{
        xtype: 'textfield',
        fieldLabel: 'Favorite Color'
    }]
});

This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager.

new Ext.FormPanel({
    height: 100,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        labelStyle: 'font-weight:bold;'
    }]
});

• Ext.layout.Absolute
• Ext.layout.Accordion
• Ext.layout.AnchorLayout
• Ext.layout.BorderLayout
• Ext.layout.CardLayout
• Ext.layout.ColumnLayout
• Ext.layout.FitLayout
• Ext.layout.FormLayout
• Ext.layout.TableLayout

See stateful for an explanation of saving and restoring Component state.