Class Ext.form.FormPanel

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'
    }]
});

How this component should be hidden. Supported values are "visibility" (css visibility), "offsets" (negative offset position) and "display" (css display) - defaults to "display".

For Containers which may be hidden and shown as part of a card layout Container such as a TabPanel, it is recommended that hideMode is configured as "offsets". This ensures that hidden Components still have height and width so that layout managers can perform measurements when calculating layouts.

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.