This class represents a common layout manager used in desktop applications. For screenshots and more details,
please see:
Cross Browser Layouts - Part 1
Cross Browser Layouts - Part 2
Example:
var layout = new Ext.BorderLayout(document.body, {
north: {
initialSize: 25,
titlebar: false
},
west: {
split:true,
initialSize: 200,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true
},
east: {
split:true,
initialSize: 202,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true
},
south: {
split:true,
initialSize: 100,
minSize: 100,
maxSize: 200,
titlebar: true,
collapsible: true
},
center: {
titlebar: true,
autoScroll:true,
resizeTabs: true,
minTabWidth: 50,
preferredTabWidth: 150
}
});
// shorthand
var CP = Ext.ContentPanel;
layout.beginUpdate();
layout.add("north", new CP("north", "North"));
layout.add("south", new CP("south", {title: "South", closable: true}));
layout.add("west", new CP("west", {title: "West"}));
layout.add("east", new CP("autoTabs", {title: "Auto Tabs", closable: true}));
layout.add("center", new CP("center1", {title: "Close Me", closable: true}));
layout.add("center", new CP("center2", {title: "Center Panel", closable: false}));
layout.getRegion("center").showPanel("center1");
layout.endUpdate();
The container the layout is rendered into can be either the body element or any other element.
If it is not the body element, the container needs to either be an absolute positioned element,
or you will need to add "position:relative" to the css of the container. You will also need to specify
the container size if it is not the body element.
|
BorderLayout( String/HTMLElement/Element container , Object config ) |
BorderLayout |
Create a new BorderLayout |
|
add( String target , Ext.ContentPanel panel ) : Ext.ContentPanel |
BorderLayout |
Adds a ContentPanel (or subclass) to this layout. |
|
addEvents( Object object ) : void |
Observable |
Used to define events on this Observable |
|
addListener( String eventName , Function handler , [Object scope ], [Object options ] ) : void |
Observable |
Appends an event handler to this component |
|
addRegion( String target , Object config ) : BorderLayoutRegion |
BorderLayout |
Creates and adds a new region if it doesn't already exist. |
|
batchAdd( Object regions ) : void |
BorderLayout |
Adds a batch of multiple ContentPanels dynamically by passing a special regions config object. This config
object sh... |
|
beginUpdate() : void |
LayoutManager |
Suspend the LayoutManager from doing auto-layouts while
making multiple add or remove calls |
|
endUpdate( Boolean noLayout ) : void |
LayoutManager |
Restore auto-layouts and optionally disable the manager from performing a layout |
|
findPanel( String panelId ) : Ext.ContentPanel |
BorderLayout |
Searches all regions for a panel with the specified id |
|
fireEvent( String eventName , Object... args ) : Boolean |
Observable |
Fires the specified event with the passed parameters (minus the event name). |
|
getEl() : Ext.Element |
LayoutManager |
Returns the Element this layout is bound to. |
|
getRegion( String target ) : Ext.LayoutRegion |
LayoutManager |
Returns the specified region. |
|
getViewSize() : Object |
LayoutManager |
Returns the size of the current view. This method normalizes document.body and element embedded layouts and
performs ... |
|
hasListener( String eventName ) : Boolean |
Observable |
Checks to see if this object has any listeners for a specified event |
|
isUpdating() : Boolean |
LayoutManager |
Returns true if this layout is currently being updated |
|
layout() : void |
BorderLayout |
Performs a layout update. |
|
on( String eventName , Function handler , [Object scope ], [Object options ] ) : void |
Observable |
Appends an event handler to this element (shorthand for addListener) |
|
purgeListeners() : void |
Observable |
Removes all listeners for this object |
|
remove( String target , Number/String/Ext.ContentPanel panel ) : Ext.ContentPanel |
BorderLayout |
Remove a ContentPanel (or subclass) to this layout. |
|
removeListener( String eventName , Function handler , [Object scope ] ) : void |
Observable |
Removes a listener |
|
restoreState( [Ext.state.Provider provider ] ) : void |
BorderLayout |
Restores this layout's state using Ext.state.Manager or the state provided by the passed provider. |
|
showPanel( String/ContentPanel panelId ) : Ext.ContentPanel |
BorderLayout |
Searches all regions for a panel with the specified id and activates (shows) it. |
|
un( String eventName , Function handler , [Object scope ] ) : void |
Observable |
Removes a listener (shorthand for removeListener) |
add
public function add( String target
, Ext.ContentPanel panel
)
Adds a ContentPanel (or subclass) to this layout.
Parameters:
Returns:
Ext.ContentPanel
The added panel
This method is defined by BorderLayout.
addEvents
public function addEvents( Object object
)
Used to define events on this Observable
addListener
public function addListener( String eventName
, Function handler
, [Object scope
], [Object options
] )
Appends an event handler to this component
Parameters:
eventName
: StringThe type of event to listen for
handler
: FunctionThe method the event invokes
scope
: Object(optional) The scope in which to execute the handler
function. The handler function's "this" context.
options
: Object(optional) An object containing handler configuration
properties. This may contain any of the following properties:
- scope {Object} The scope in which to execute the handler function. The handler function's "this" context.
- delay {Number} The number of milliseconds to delay the invocation of the handler after te event fires.
- single {Boolean} True to add a handler to handle just the next firing of the event, and then remove itself.
- buffer {Number} Causes the handler to be scheduled to run in an Ext.util.DelayedTask delayed
by the specified number of milliseconds. If the event fires again within that time, the original
handler is not invoked, but the new handler is scheduled in its place.
Combining Options
Using the options argument, it is possible to combine different types of listeners:
A normalized, delayed, one-time listener that auto stops the event and passes a custom argument (forumId)
el.on('click', this.onClick, this, {
single: true,
delay: 100,
forumId: 4
});
Attaching multiple handlers in 1 call
The method also allows for a single argument to be passed which is a config object containing properties
which specify multiple handlers.
el.on({
'click': {
fn: this.onClick,
scope: this,
delay: 100
},
'mouseover': {
fn: this.onMouseOver,
scope: this
},
'mouseout': {
fn: this.onMouseOut,
scope: this
}
});
Or a shorthand syntax which passes the same scope object to all handlers:
el.on({
'click': this.onClick,
'mouseover': this.onMouseOver,
'mouseout': this.onMouseOut,
scope: this
});
Returns:
addRegion
public function addRegion( String target
, Object config
)
Creates and adds a new region if it doesn't already exist.
Parameters:
target
: StringThe target region key (north, south, east, west or center).
config
: ObjectThe regions config object
Returns:
BorderLayoutRegion
The new region
This method is defined by BorderLayout.
batchAdd
public function batchAdd( Object regions
)
Adds a batch of multiple ContentPanels dynamically by passing a special regions config object. This config
object should contain properties for each region to add ContentPanels to, and each property's value should be
a valid ContentPanel config object. Example:
// Create the main layout
var layout = new Ext.BorderLayout('main-ct', {
west: {
split:true,
minSize: 175,
titlebar: true
},
center: {
title:'Components'
}
}, 'main-ct');
// Create and add multiple ContentPanels at once via configs
layout.batchAdd({
west: {
id: 'source-files',
autoCreate:true,
title:'Ext Source Files',
autoScroll:true,
fitToFrame:true
},
center : {
el: cview,
autoScroll:true,
fitToFrame:true,
toolbar: tb,
resizeEl:'cbody'
}
});
This method is defined by BorderLayout.
beginUpdate
public function beginUpdate()
Suspend the LayoutManager from doing auto-layouts while
making multiple add or remove calls
endUpdate
public function endUpdate( Boolean noLayout
)
Restore auto-layouts and optionally disable the manager from performing a layout
findPanel
public function findPanel( String panelId
)
Searches all regions for a panel with the specified id
This method is defined by BorderLayout.
fireEvent
public function fireEvent( String eventName
, Object... args
)
Fires the specified event with the passed parameters (minus the event name).
getEl
public function getEl()
Returns the Element this layout is bound to.
getRegion
public function getRegion( String target
)
Returns the specified region.
getViewSize
public function getViewSize()
Returns the size of the current view. This method normalizes document.body and element embedded layouts and
performs box-model adjustments.
hasListener
public function hasListener( String eventName
)
Checks to see if this object has any listeners for a specified event
isUpdating
public function isUpdating()
Returns true if this layout is currently being updated
layout
public function layout()
Performs a layout update.
This method is defined by BorderLayout.
on
public function on( String eventName
, Function handler
, [Object scope
], [Object options
] )
Appends an event handler to this element (shorthand for addListener)
Parameters:
eventName
: StringThe type of event to listen for
handler
: FunctionThe method the event invokes
scope
: Object(optional) The scope in which to execute the handler
function. The handler function's "this" context.
options
: Object(optional)
Returns:
purgeListeners
public function purgeListeners()
Removes all listeners for this object
remove
public function remove( String target
, Number/String/Ext.ContentPanel panel
)
Remove a ContentPanel (or subclass) to this layout.
Parameters:
target
: StringThe target region key (north, south, east, west or center).
panel
: Number/String/Ext.ContentPanelThe index, id or panel to remove
Returns:
Ext.ContentPanel
The removed panel
This method is defined by BorderLayout.
removeListener
public function removeListener( String eventName
, Function handler
, [Object scope
] )
restoreState
public function restoreState( [Ext.state.Provider provider
] )
Restores this layout's state using Ext.state.Manager or the state provided by the passed provider.
This method is defined by BorderLayout.
showPanel
public function showPanel( String/ContentPanel panelId
)
Searches all regions for a panel with the specified id and activates (shows) it.
Parameters:
Returns:
Ext.ContentPanel
The shown panel or null
This method is defined by BorderLayout.
un
public function un( String eventName
, Function handler
, [Object scope
] )
Removes a listener (shorthand for removeListener)