Clear Up
SharpKit Reference

Border Class

This is a multi-pane, application-oriented UI layout style that supports multiple nested panels, automatic bars between regions and built-in expanding and collapsing of regions.

This class is intended to be extended or created via the layout:'border'Ext.container.Container.layout config, and should generally not need to be created directly via the new keyword.

  
    Ext.create('Ext.panel.Panel', {
            width: 500,
            height: 300,
            title: 'Border Layout',
            layout: 'border',
            items: [{
            title: 'South Region is resizable',
            region: 'south',     // position for region
            xtype: 'panel',
            height: 100,
            split: true,         // enable resizing
            margins: '0 5 5 5'
            },{
            // xtype: 'panel' implied by default
            title: 'West Region is collapsible',
            region:'west',
            xtype: 'panel',
            margins: '5 0 0 5',
            width: 200,
            collapsible: true,   // make collapsible
            id: 'west-region-container',
            layout: 'fit'
            },{
            title: 'Center Region',
            region: 'center',     // center region is required, no width/height specified
            xtype: 'panel',
            layout: 'fit',
            margins: '5 5 0 0'
            }],
            renderTo: Ext.getBody()
            });
            

Notes

  • When using the split option, the layout will automatically insert a Ext.resizer.Splitter into the appropriate place. This will modify the underlying items collection in the container.

  • Any Container using the Border layout must have a child item with region:'center'. The child item in the center region will always be resized to fill the remaining space not used by the other regions in the layout.

  • Any child items with a region of west or east may be configured with either an initial width, or a Ext.layout.container.Box.flex value, or an initial percentage width string (Which is simply divided by 100 and used as a flex value). The 'center' region has a flex value of 1.

  • Any child items with a region of north or south may be configured with either an initial height, or a Ext.layout.container.Box.flex value, or an initial percentage height string (Which is simply divided by 100 and used as a flex value). The 'center' region has a flex value of 1.

  • There is no BorderLayout.Region class in ExtJS 4.0+

Namespace: Ext.layout.container

Base Interfaces

Constructors

Fields

Name Description
padding Sets the padding to be applied to all child items managed by this layout. This property can be specified as a string containing space-separated, numeric padding values. The order of the sides associated with each value matches the way CSS processes padding values:
  • If there is only one value, it applies to all sides.
  • If there are two values, the top and bottom borders are set to the first value and the right and left are set to the second.
  • If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third.
  • If there are four values, they apply to the top, right, bottom, and left, respectively.
  • regionWeights The default weights to assign to regions in the border layout. These values are used when a region does not contain a weight property. This object must have properties for all regions ("north", "south", "east" and "west"). IMPORTANT: Since this is an object, changing its properties will impact ALL instances of Border layout. If this is not desired, provide a replacement object as a config option instead:
    layout: {
               type: 'border',
               regionWeights: {
               west: 20,
               north: 10,
               south: -10,
               east: -20
               }
               }
                
    The region with the highest weight is assigned space from the border before other regions. Regions of equal weight are assigned space based on their position in the owner's items list (first come, first served).
    split This configuration option is to be applied to the child items managed by this layout. Each region with split:true will get a Splitter that allows for manual resizing of the container. Except for the center region.
    splitterResize This configuration option is to be applied to the child items managed by this layout and is used in conjunction with split. By default, when specifying split, the region can be dragged to be resized. Set this option to false to show the split bar but prevent resizing. Defaults to: true
    © Copyright 2005-2011 SharpKit. All rights reserved.