Class type Ext_panel_Panel.configs

class type configs = object .. end

Inherits

Ext_panel_AbstractPanel.configs

method animCollapse : bool Js.t Js.prop

true to animate the transition when the panel is collapsed, false to skip the animation (defaults to true if the Ext.fx.Anim class is available, otherwise false). May also be specified as the animation duration in milliseconds.

method bbar : 'a. 'a Js.t Js.prop

Convenience config. Short for 'Bottom Bar'.

bbar: [
  { xtype: 'button', text: 'Button 1' }
]

is equivalent to

dockedItems: [{
    xtype: 'toolbar',
    dock: 'bottom',
    items: [
        { xtype: 'button', text: 'Button 1' }
    ]
}]

method buttonAlign : Js.js_string Js.t Js.prop

The alignment of any buttons added to this panel. Valid values are 'right', 'left' and 'center' (defaults to 'right' for buttons/fbar, 'left' for other toolbar types).

NOTE: The prefered way to specify toolbars is to use the dockedItems config. Instead of buttonAlign you would add the layout: { pack: 'start' | 'center' | 'end' } option to the dockedItem config.

method buttons : 'b. 'b Js.t Js.prop

Convenience config used for adding buttons docked to the bottom of the panel. This is a synonym for the fbar config.

buttons: [
  { text: 'Button 1' }
]

is equivalent to

dockedItems: [{
    xtype: 'toolbar',
    dock: 'bottom',
    ui: 'footer',
    defaults: {minWidth: minButtonWidth},
    items: [
        { xtype: 'component', flex: 1 },
        { xtype: 'button', text: 'Button 1' }
    ]
}]

The minButtonWidth is used as the default minWidth for each of the buttons in the buttons toolbar.

method closable : bool Js.t Js.prop

True to display the 'close' tool button and allow the user to close the window, false to hide the button and disallow closing the window.

By default, when close is requested by clicking the close button in the header, the close method will be called. This will destroy the Panel and its content meaning that it may not be reused.

To make closing a Panel hide the Panel so that it may be reused, set closeAction to 'hide'.

Defaults to: false

method closeAction : Js.js_string Js.t Js.prop

The action to take when the close header tool is clicked:

'destroy' :

remove the window from the DOM and destroy it and all descendant Components. The window will not be available to be redisplayed via the show method.
'hide' :

hide the window by setting visibility to hidden and applying negative offsets. The window will be available to be redisplayed via the show method.

Note: This behavior has changed! setting does affect the close method which will invoke the approriate closeAction.

Defaults to: 'destroy'

method collapseDirection : Js.js_string Js.t Js.prop

The direction to collapse the Panel when the toggle button is clicked.

Defaults to the headerPosition

Important: This config is ignored for collapsible Panels which are direct child items of a border layout.

Specify as 'top', 'bottom', 'left' or 'right'.

method collapseFirst : bool Js.t Js.prop

true to make sure the collapse/expand toggle button always renders first (to the left of) any other tools in the panel's title bar, false to render it last.

Defaults to: true

method collapseMode : Js.js_string Js.t Js.prop

Important: this config is only effective for collapsible Panels which are direct child items of a border layout.

When not a direct child item of a border layout, then the Panel's header remains visible, and the body is collapsed to zero dimensions. If the Panel has no header, then a new header (orientated correctly depending on the collapseDirection) will be inserted to show a the title and a re- expand tool.

When a child item of a border layout, this config has three possible values:

undefined - When collapsed, a placeholder Header is injected into the layout to represent the Panel and to provide a UI with a Tool to allow the user to re-expand the Panel.
"header" - The Panel collapses to leave its header visible as when not inside a border layout.
"mini" - The Panel collapses without a visible header.

method collapsed : bool Js.t Js.prop

true to render the panel collapsed, false to render it expanded.

Defaults to: false

method collapsedCls : Js.js_string Js.t Js.prop

A CSS class to add to the panel's element after it has been collapsed.

Defaults to: 'collapsed'

method collapsible : bool Js.t Js.prop

True to make the panel collapsible and have an expand/collapse toggle Tool added into the header tool button area. False to keep the panel sized either statically, or by an owning layout manager, with no toggle Tool. When a panel is used in a border layout, the floatable option can influence the behavior of collapsing. See collapseMode and collapseDirection

method constrain : bool Js.t Js.prop

True to constrain the panel within its containing element, false to allow it to fall outside of its containing element. By default floating components such as Windows will be rendered to document.body. To render and constrain the window within another element specify renderTo. Optionally the header only can be constrained using constrainHeader.

Defaults to: false

method constrainHeader : bool Js.t Js.prop

True to constrain the panel header within its containing element (allowing the panel body to fall outside of its containing element) or false to allow the header to fall outside its containing element. Optionally the entire panel can be constrained using constrain.

Defaults to: false

method dockedItems : 'c. 'c Js.t Js.prop

A component or series of components to be added as docked items to this panel. The docked items can be docked to either the top, right, left or bottom of a panel. This is typically used for things like toolbars or tab bars:

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

method fbar : 'd. 'd Js.t Js.prop

Convenience config used for adding items to the bottom of the panel. Short for Footer Bar.

fbar: [
  { type: 'button', text: 'Button 1' }
]

is equivalent to

dockedItems: [{
    xtype: 'toolbar',
    dock: 'bottom',
    ui: 'footer',
    defaults: {minWidth: minButtonWidth},
    items: [
        { xtype: 'component', flex: 1 },
        { xtype: 'button', text: 'Button 1' }
    ]
}]

The minButtonWidth is used as the default minWidth for each of the buttons in the fbar.

method floatable : bool Js.t Js.prop

Important: This config is only effective for collapsible Panels which are direct child items of a border layout.

true to allow clicking a collapsed Panel's placeholder to display the Panel floated above the layout, false to force the user to fully expand a collapsed region by clicking the expand button to see it again.

Defaults to: true

method frame : bool Js.t Js.prop

True to apply a frame to the panel.

Defaults to: false

method frameHeader : bool Js.t Js.prop

True to apply a frame to the panel panels header (if 'frame' is true).

Defaults to: true

method glyph : 'e. 'e Js.t Js.prop

A numeric unicode character code to use as the icon for the panel header. The default font-family for glyphs can be set globally using Ext.setGlyphFontFamily(). Alternatively, this config option accepts a string with the charCode and font-family separated by the @ symbol. For example '65@My Font Family'.

method header : 'f. 'f Js.t Js.prop

Pass as false to prevent a Header from being created and shown.

Pass as a config object (optionally containing an xtype) to custom-configure this Panel's header.

See Ext.panel.Header for all the options that may be specified here.

A panel header is a Ext.container.Container which contains the Panel's title and tools. You may also configure the Panel's header option with its own child items which go before the tools

By default the panel title is inserted after items configured in this config, but before any tools. To insert the title at any point in the full array, specify the #titlePosition config:

new Ext.panel.Panel({ title: 'Test', tools: [{ type: 'refresh }, { type: 'help' }], titlePosition: 2 // Title will come AFTER the two tools ... });

method headerOverCls : Js.js_string Js.t Js.prop

Optional CSS class to apply to the header element on mouseover

method headerPosition : Js.js_string Js.t Js.prop

Specify as 'top', 'bottom', 'left' or 'right'.

Defaults to: 'top'

method hideCollapseTool : bool Js.t Js.prop

true to hide the expand/collapse toggle button when collapsible == true, false to display it.

Defaults to: false

method icon : Js.js_string Js.t Js.prop

Path to image for an icon in the header. Used for displaying an icon to the left of a title.

method iconCls : Js.js_string Js.t Js.prop

CSS class for an icon in the header. Used for displaying an icon to the left of a title.

method lbar : 'g. 'g Js.t Js.prop

Convenience config. Short for 'Left Bar' (left-docked, vertical toolbar).

lbar: [
  { xtype: 'button', text: 'Button 1' }
]

is equivalent to

dockedItems: [{
    xtype: 'toolbar',
    dock: 'left',
    items: [
        { xtype: 'button', text: 'Button 1' }
    ]
}]

method manageHeight : bool Js.t Js.prop

When true, the dock component layout writes height information to the panel's DOM elements based on its shrink wrap height calculation. This ensures that the browser respects the calculated height. When false, the dock component layout will not write heights on the panel or its body element. In some simple layout cases, not writing the heights to the DOM may be desired because this allows the browser to respond to direct DOM manipulations (like animations).

Defaults to: true

method minButtonWidth : Js.number Js.t Js.prop

Minimum width of all footer toolbar buttons in pixels. If set, this will be used as the default value for the Ext.button.Button.minWidth config of each Button added to the footer toolbar via the fbar or buttons configurations. It will be ignored for buttons that have a minWidth configured some other way, e.g. in their own config object or via the defaults of their parent container.

Defaults to: 75

method overlapHeader : bool Js.t Js.prop

True to overlap the header in a panel over the framing of the panel itself. This is needed when frame:true (and is done automatically for you). Otherwise it is undefined. If you manually add rounded corners to a panel header which does not have frame:true, this will need to be set to true.

method placeholder : 'h. 'h Js.t Js.prop

Important: This config is only effective for collapsible Panels which are direct child items of a border layout when not using the 'header' collapseMode.

Optional. A Component (or config object for a Component) to show in place of this Panel when this Panel is collapsed by a border layout. Defaults to a generated Header containing a Tool to re-expand the Panel.

method placeholderCollapseHideMode : Js.number Js.t Js.prop

The mode for hiding collapsed panels when using collapseMode "placeholder".

method rbar : 'i. 'i Js.t Js.prop

Convenience config. Short for 'Right Bar' (right-docked, vertical toolbar).

rbar: [
  { xtype: 'button', text: 'Button 1' }
]

is equivalent to

dockedItems: [{
    xtype: 'toolbar',
    dock: 'right',
    items: [
        { xtype: 'button', text: 'Button 1' }
    ]
}]

method simpleDrag : bool Js.t Js.prop

When draggable is true, Specify this as true to cause the draggable config to work the same as it does in Window. This Panel just becomes movable. No DragDrop instances receive any notifications. For example:

var win = Ext.create('widget.window', {
    height: 300,
    width: 300,
    title: 'Constraining Window',
    closable: false,
    items: {
        title: "Floating Panel",
        width: 100,
        height: 100,
        floating: true,
        draggable: true,
        constrain: true,
        simpleDrag: true
    }
});
win.show();
// Floating components begin life hidden
win.child('[title=Floating Panel]').show();

Defaults to: false

method tbar : 'j. 'j Js.t Js.prop

Convenience config. Short for 'Top Bar'.

tbar: [
  { xtype: 'button', text: 'Button 1' }
]

is equivalent to

dockedItems: [{
    xtype: 'toolbar',
    dock: 'top',
    items: [
        { xtype: 'button', text: 'Button 1' }
    ]
}]

method title : Js.js_string Js.t Js.prop

The title text to be used to display in the panel header. When a title is specified the Ext.panel.Header will automatically be created and displayed unless header is set to false.

Defaults to: ''

method titleAlign : Js.js_string Js.t Js.prop

The alignment of the title text within the available space between the icon and the tools.

May be "left", "right" or "center". Defaults to the browser's natural behavior depending on the css direction property - "left" when direction is ltr and "right" when direction is rtl (see Ext.AbstractComponent.rtl).

method titleCollapse : bool Js.t Js.prop

true to allow expanding and collapsing the panel (when collapsible = true) by clicking anywhere in the header bar, false) to allow it only by clicking to tool button). When a panel is used in a border layout, the floatable option can influence the behavior of collapsing.

method tools : 'k. 'k Js.t Js.prop

An array of Ext.panel.Tool configs/instances to be added to the header tool area. The tools are stored as child components of the header container. They can be accessed using down and {query}, as well as the other component methods. The toggle tool is automatically created if collapsible is set to true.

Note that, apart from the toggle tool which is provided when a panel is collapsible, these tools only provide the visual button. Any required functionality must be provided by adding handlers that implement the necessary behavior.

Example usage:

tools:[{
    type:'refresh',
    tooltip: 'Refresh form Data',
    // hidden:true,
    handler: function(event, toolEl, panelHeader) {
        // refresh logic
    }
},
{
    type:'help',
    tooltip: 'Get Help',
    callback: function(panel, tool, event) {
        // show help here
    }
}]

The difference between handler and callback is the signature. For details on the distinction, see Ext.panel.Tool.

method afterCollapse : ((< activeItem : 'n. 'n Js.t Js.prop; afterCollapse : 'l;
           afterComponentLayout : 'o 'p.
                                    ('m Js.t,
                                     Js.number Js.t ->
                                     Js.number Js.t -> 'o Js.t -> 'p Js.t -> unit)
                                    Js.meth_callback Js.writeonly_prop;
           afterExpand : ('m Js.t, bool Js.t -> unit) Js.meth_callback
                         Js.writeonly_prop;
           afterHide : 'q 'r.
                         ('m Js.t,
                          'q Js.callback Js.optdef -> 'r Js.t Js.optdef -> unit)
                         Js.meth_callback Js.writeonly_prop;
           afterLayout : 's.
                           ('m Js.t,
                            (#Ext_layout_container_Container.t as 's) Js.t -> unit)
                           Js.meth_callback Js.writeonly_prop;
           afterRender : ('m Js.t, unit -> unit) Js.meth_callback Js.writeonly_prop;
           afterSetPosition : ('m Js.t, Js.number Js.t -> Js.number Js.t -> unit)
                              Js.meth_callback Js.writeonly_prop;
           afterShow : 't 'u 'v.
                         ('m Js.t,
                          't Js.t Js.optdef ->
                          'u Js.callback Js.optdef -> 'v Js.t Js.optdef -> unit)
                         Js.meth_callback Js.writeonly_prop;
           anchorSize : 'w. 'w Js.t Js.prop; animCollapse : bool Js.t Js.prop;
           autoDestroy : bool Js.t Js.prop; autoEl : 'x. 'x Js.t Js.prop;
           autoRender : 'y. 'y Js.t Js.prop; autoScroll : bool Js.t Js.prop;
           autoShow : bool Js.t Js.prop; baseCls : Js.js_string Js.t Js.prop;
           bbar : 'a. 'a Js.t Js.prop;
           beforeComponentLayout : ('m Js.t,
                                    Js.number Js.t -> Js.number Js.t -> unit)
                                   Js.meth_callback Js.writeonly_prop;
           beforeDestroy : ('m Js.t, unit -> unit) Js.meth_callback
                           Js.writeonly_prop;
           beforeLayout : ('m Js.t, unit -> unit) Js.meth_callback Js.writeonly_prop;
           beforeShow : ('m Js.t, unit -> unit) Js.meth_callback Js.writeonly_prop;
           bodyBorder : bool Js.t Js.prop; bodyCls : 'z. 'z Js.t Js.prop;
           bodyPadding : 'a1. 'a1 Js.t Js.prop; bodyStyle : 'b1. 'b1 Js.t Js.prop;
           border : 'c1. 'c1 Js.t Js.prop;
           bubbleEvents : Js.js_string Js.t Js.js_array Js.t Js.prop;
           buttonAlign : Js.js_string Js.t Js.prop; buttons : 'b. 'b Js.t Js.prop;
           childEls : 'd1. 'd1 Js.t Js.js_array Js.t Js.prop;
           closable : bool Js.t Js.prop; closeAction : Js.js_string Js.t Js.prop;
           cls : Js.js_string Js.t Js.prop;
           collapseDirection : Js.js_string Js.t Js.prop;
           collapseFirst : bool Js.t Js.prop;
           collapseMode : Js.js_string Js.t Js.prop; collapsed : bool Js.t Js.prop;
           collapsedCls : Js.js_string Js.t Js.prop;
           collapsible : bool Js.t Js.prop; columnWidth : 'e1. 'e1 Js.t Js.prop;
           componentCls : Js.js_string Js.t Js.prop;
           componentLayout : 'f1. 'f1 Js.t Js.prop; constrain : bool Js.t Js.prop;
           constrainHeader : bool Js.t Js.prop; constrainTo : 'g1. 'g1 Js.t Js.prop;
           constraintInsets : 'h1. 'h1 Js.t Js.prop;
           contentEl : Js.js_string Js.t Js.prop; data : 'i1. 'i1 Js.t Js.prop;
           defaultAlign : Js.js_string Js.t Js.prop;
           defaultDockWeights : 'j1. 'j1 Js.t Js.prop;
           defaultType : Js.js_string Js.t Js.prop;
           defaults : 'k1. 'k1 Js.t Js.prop; detachOnRemove : bool Js.t Js.prop;
           disabled : bool Js.t Js.prop; disabledCls : Js.js_string Js.t Js.prop;
           dockedItems : 'c. 'c Js.t Js.prop; draggable : bool Js.t Js.prop;
           draggable_obj : 'l1. 'l1 Js.t Js.prop; fbar : 'd. 'd Js.t Js.prop;
           fixed : bool Js.t Js.prop; floatable : bool Js.t Js.prop;
           floating : bool Js.t Js.prop; focusOnToFront : bool Js.t Js.prop;
           formBind : bool Js.t Js.prop; frame : bool Js.t Js.prop;
           frameHeader : bool Js.t Js.prop; glyph : 'e. 'e Js.t Js.prop;
           header : 'f. 'f Js.t Js.prop; headerOverCls : Js.js_string Js.t Js.prop;
           headerPosition : Js.js_string Js.t Js.prop;
           height : Js.number Js.t Js.prop; hidden : bool Js.t Js.prop;
           hideCollapseTool : bool Js.t Js.prop;
           hideMode : Js.js_string Js.t Js.prop; html : 'm1. 'm1 Js.t Js.prop;
           icon : Js.js_string Js.t Js.prop; iconCls : Js.js_string Js.t Js.prop;
           id : Js.js_string Js.t Js.prop;
           initComponent : ('m Js.t, unit -> unit) Js.meth_callback
                           Js.writeonly_prop;
           itemId : Js.js_string Js.t Js.prop; items : 'n1. 'n1 Js.t Js.prop;
           layout : 'o1. 'o1 Js.t Js.prop; lbar : 'g. 'g Js.t Js.prop;
           listeners : 'p1. 'p1 Js.t Js.prop; loader : 'q1. 'q1 Js.t Js.prop;
           manageHeight : bool Js.t Js.prop; margin : 'r1. 'r1 Js.t Js.prop;
           maxHeight : Js.number Js.t Js.prop; maxWidth : Js.number Js.t Js.prop;
           minButtonWidth : Js.number Js.t Js.prop;
           minHeight : Js.number Js.t Js.prop; minWidth : Js.number Js.t Js.prop;
           onAdd : 's1.
                     ('m Js.t,
                      (#Ext_Component.t as 's1) Js.t -> Js.number Js.t -> unit)
                     Js.meth_callback Js.writeonly_prop;
           onAdded : 't1.
                       ('m Js.t, 't1 Js.t -> Js.number Js.t -> unit)
                       Js.meth_callback Js.writeonly_prop;
           onBeforeAdd : 'u1.
                           ('m Js.t, (#Ext_Component.t as 'u1) Js.t -> unit)
                           Js.meth_callback Js.writeonly_prop;
           onDestroy : ('m Js.t, unit -> unit) Js.meth_callback Js.writeonly_prop;
           onDisable : ('m Js.t, unit -> unit) Js.meth_callback Js.writeonly_prop;
           onDockedAdd : 'v1.
                           ('m Js.t, (#Ext_Component.t as 'v1) Js.t -> unit)
                           Js.meth_callback Js.writeonly_prop;
           onDockedRemove : 'w1.
                              ('m Js.t, (#Ext_Component.t as 'w1) Js.t -> unit)
                              Js.meth_callback Js.writeonly_prop;
           onEnable : ('m Js.t, unit -> unit) Js.meth_callback Js.writeonly_prop;
           onHide : 'x1 'y1 'z1.
                      ('m Js.t,
                       'x1 Js.t Js.optdef ->
                       'y1 Js.callback Js.optdef -> 'z1 Js.t Js.optdef -> unit)
                      Js.meth_callback Js.writeonly_prop;
           onPosition : ('m Js.t, Js.number Js.t -> Js.number Js.t -> unit)
                        Js.meth_callback Js.writeonly_prop;
           onRemove : 'a2.
                        ('m Js.t,
                         (#Ext_Component.t as 'a2) Js.t -> bool Js.t -> unit)
                        Js.meth_callback Js.writeonly_prop;
           onRemoved : ('m Js.t, bool Js.t -> unit) Js.meth_callback
                       Js.writeonly_prop;
           onRender : ('m Js.t, Ext_dom_Element.t Js.t -> Js.number Js.t -> unit)
                      Js.meth_callback Js.writeonly_prop;
           onResize : 'b2 'c2 'd2 'e2.
                        ('m Js.t,
                         'b2 Js.t -> 'c2 Js.t -> 'd2 Js.t -> 'e2 Js.t -> unit)
                        Js.meth_callback Js.writeonly_prop;
           onShow : 'f2 'g2 'h2.
                      ('m Js.t,
                       'f2 Js.t Js.optdef ->
                       'g2 Js.callback Js.optdef -> 'h2 Js.t Js.optdef -> unit)
                      Js.meth_callback Js.writeonly_prop;
           onShowComplete : 'i2 'j2.
                              ('m Js.t,
                               'i2 Js.callback Js.optdef ->
                               'j2 Js.t Js.optdef -> unit)
                              Js.meth_callback Js.writeonly_prop;
           overCls : Js.js_string Js.t Js.prop;
           overflowX : Js.js_string Js.t Js.prop;
           overflowY : Js.js_string Js.t Js.prop; overlapHeader : bool Js.t Js.prop;
           padding : 'k2. 'k2 Js.t Js.prop; placeholder : 'h. 'h Js.t Js.prop;
           placeholderCollapseHideMode : Js.number Js.t Js.prop;
           plugins : 'l2. 'l2 Js.t Js.prop; rbar : 'i. 'i Js.t Js.prop;
           region : 'm2. 'm2 Js.t Js.prop; renderData : 'n2. 'n2 Js.t Js.prop;
           renderSelectors : 'o2. 'o2 Js.t Js.prop;
           renderTo : 'p2. 'p2 Js.t Js.prop; renderTpl : 'q2. 'q2 Js.t Js.prop;
           resizable : 'r2. 'r2 Js.t Js.prop;
           resizeHandles : Js.js_string Js.t Js.prop; rtl : bool Js.t Js.prop;
           saveDelay : Js.number Js.t Js.prop; shadow : 's2. 's2 Js.t Js.prop;
           shadowOffset : Js.number Js.t Js.prop;
           shrinkWrap : 't2. 't2 Js.t Js.prop;
           shrinkWrapDock : 'u2. 'u2 Js.t Js.prop; simpleDrag : bool Js.t Js.prop;
           stateEvents : Js.js_string Js.t Js.js_array Js.t Js.prop;
           stateId : Js.js_string Js.t Js.prop; stateful : bool Js.t Js.prop;
           style : 'v2. 'v2 Js.t Js.prop; suspendLayout : bool Js.t Js.prop;
           tbar : 'j. 'j Js.t Js.prop; title : Js.js_string Js.t Js.prop;
           titleAlign : Js.js_string Js.t Js.prop;
           titleCollapse : bool Js.t Js.prop; toFrontOnShow : bool Js.t Js.prop;
           tools : 'k. 'k Js.t Js.prop; tpl : 'w2. 'w2 Js.t Js.prop;
           tplWriteMode : Js.js_string Js.t Js.prop; ui : Js.js_string Js.t Js.prop;
           width : Js.number Js.t Js.prop; xtype : Js.js_string Js.t Js.prop; .. >
         as 'm)
        Js.t, bool Js.t -> unit)
       Js.meth_callback Js.writeonly_prop as 'l

See method t.afterCollapse

method afterExpand : ('m Js.t, bool Js.t -> unit) Js.meth_callback Js.writeonly_prop

See method t.afterExpand

method beforeDestroy : ('m Js.t, unit -> unit) Js.meth_callback Js.writeonly_prop

See method t.beforeDestroy

method onHide : 'x1 'y1 'z1.
         ('m Js.t,
          'x1 Js.t Js.optdef ->
          'y1 Js.callback Js.optdef -> 'z1 Js.t Js.optdef -> unit)
         Js.meth_callback Js.writeonly_prop

See method t.onHide

method onRemoved : ('m Js.t, bool Js.t -> unit) Js.meth_callback Js.writeonly_prop

See method t.onRemoved

method onShow : 'f2 'g2 'h2.
         ('m Js.t,
          'f2 Js.t Js.optdef ->
          'g2 Js.callback Js.optdef -> 'h2 Js.t Js.optdef -> unit)
         Js.meth_callback Js.writeonly_prop

See method t.onShow