Print Friendly

Class Ext.SplitLayoutRegion

Package:Ext
Class:SplitLayoutRegion
Extends:LayoutRegion
Defined In:SplitLayoutRegion.js
Adds a splitbar and other (private) useful functionality to a Ext.LayoutRegion.

Properties   -  Methods   -  Events   -  Config Options

Public Properties

Property Defined By
  bodyEl : Ext.Element LayoutRegion
This region's body element
  collapsedEl : Ext.Element LayoutRegion
This region's collapsed element
  el : Ext.Element LayoutRegion
This region's container element
  panels : Ext.util.MixedCollection BasicLayoutRegion
A collection of panels in this region.
  split : Ext.SplitBar SplitLayoutRegion
The SplitBar for this region
  titleEl : Ext.Element LayoutRegion
This region's title element
  titleTextEl : HTMLElement LayoutRegion
This region's title text element

Public Methods

Method Defined By
  addContentPanel... panel ) : Ext.ContentPanel BasicLayoutRegion
Add the passed ContentPanel(s)
  addEventsObject object ) : void Observable
Used to define events on this Observable
  addListenerString eventName, Function handler, [Object scope], [Object options] ) : void Observable
Appends an event handler to this component
  collapse[Boolean skipAnim] ) : void LayoutRegion
Collapses this region.
  expandExt.EventObject e, [Boolean skipAnim] ) : void LayoutRegion
Expands this region if it was previously collapsed.
  fireEventString eventName, Object... args ) : Boolean Observable
Fires the specified event with the passed parameters (minus the event name).
  getActivePanel() : Ext.ContentPanel BasicLayoutRegion
Get the active panel for this region.
  getEl() : Ext.Element BasicLayoutRegion
Returns the container element for this region.
  getPanelNumber/String/ContentPanel panel ) : Ext.ContentPanel BasicLayoutRegion
Returns the panel specified or null if it's not in this region.
  getPosition() : String BasicLayoutRegion
Returns this regions position (north/south/east/west/center).
  getSplitBar() : Ext.SplitBar SplitLayoutRegion
Returns the Ext.SplitBar for this region.
  getTabs() : Ext.TabPanel LayoutRegion
Returns the TabPanel component used by this region
  hasListenerString eventName ) : Boolean Observable
Checks to see if this object has any listeners for a specified event
  hasPanelNumber/String/ContentPanel panel ) : Boolean BasicLayoutRegion
Returns true if the panel is in this region.
  hide() : void LayoutRegion
Hides this region.
  hidePanelNumber/String/ContentPanel panel ) : void LayoutRegion
Hides the tab for the specified panel.
  isVisible() : Boolean BasicLayoutRegion
Returns true if this region is currently visible.
  onString 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
  removeNumber/String/ContentPanel panel, Boolean preservePanel ) : Ext.ContentPanel BasicLayoutRegion
Removes the specified panel. If preservePanel is not true (either here or in the config), the panel is destroyed.
  removeListenerString eventName, Function handler, [Object scope] ) : void Observable
Removes a listener
  resizeToNumber newSize ) : void BasicLayoutRegion
Resizes the region to the specified size. For vertical regions (west, east) this adjusts the width, for horizontal (...
  setCollapsedTitle[String title] ) : void LayoutRegion
Updates the title for collapsed north/south regions (used with collapsedTitle config option)
  show() : void LayoutRegion
Shows this region if it was previously hidden.
  showPanelNumber/String/ContentPanel panelId ) : Ext.ContentPanel BasicLayoutRegion
Show the specified panel.
  unString eventName, Function handler, [Object scope] ) : void Observable
Removes a listener (shorthand for removeListener)
  unhidePanelNumber/String/ContentPanel panel ) : void LayoutRegion
Unhides the tab for a previously hidden panel.

Public Events

Event Defined By
  beforeremove : ( Ext.LayoutRegion this, Ext.ContentPanel panel, Object e ) BasicLayoutRegion
Fires before a panel is removed (or closed). To cancel the removal set "e.cancel = true" on the event argument.
  collapsed : ( Ext.LayoutRegion this ) BasicLayoutRegion
Fires when this region is collapsed.
  expanded : ( Ext.LayoutRegion this ) BasicLayoutRegion
Fires when this region is expanded.
  invalidated : ( Ext.LayoutRegion this ) BasicLayoutRegion
Fires when the layout for this region is changed.
  panelactivated : ( Ext.LayoutRegion this, Ext.ContentPanel panel ) BasicLayoutRegion
Fires when a panel is activated.
  paneladded : ( Ext.LayoutRegion this, Ext.ContentPanel panel ) BasicLayoutRegion
Fires when a panel is added.
  panelremoved : ( Ext.LayoutRegion this, Ext.ContentPanel panel ) BasicLayoutRegion
Fires when a panel is removed.
  resized : ( Ext.LayoutRegion this, Number newSize ) BasicLayoutRegion
Fires when the user resizes this region.
  slidehide : ( Ext.LayoutRegion this ) BasicLayoutRegion
Fires when this region slides out of view.
  slideshow : ( Ext.LayoutRegion this ) BasicLayoutRegion
Fires when this region is slid into view.
  visibilitychange : ( Ext.LayoutRegion this, Boolean visibility ) BasicLayoutRegion
Fires when this region is shown or hidden

Config Options

Config Options Defined By
  alwaysShowTabs : Boolean LayoutRegion
True to always display tabs even when there is only 1 panel (defaults to false)
  animate : Boolean LayoutRegion
True to animate expand/collapse (defaults to false)
  autoHide : Boolean LayoutRegion
False to disable auto hiding when the mouse leaves the "floated" region (defaults to true)
  autoScroll : Boolean LayoutRegion
True to enable overflow scrolling (defaults to false)
  closeOnTab : Boolean LayoutRegion
True to place the close icon on the tabs instead of the region titlebar (defaults to false)
  cmargins : Object LayoutRegion
Margins for the element when collapsed (defaults to: north/south {top: 2, left: 0, right:0, bottom: 2} or east/west {...
  collapsed : Boolean LayoutRegion
True to set the initial display to collapsed (defaults to false)
  collapsedTitle : String LayoutRegion
Optional string message to display in the collapsed block of a north or south region
  collapsible : Boolean LayoutRegion
False to disable collapsing (defaults to true)
  disableTabTips : Boolean LayoutRegion
True to disable tab tooltips
  floatable : Boolean LayoutRegion
False to disable floating (defaults to true)
  hidden : Boolean LayoutRegion
True to start the region hidden (defaults to false)
  hideTabs : Boolean LayoutRegion
True to hide the tab strip (defaults to false)
  hideWhenEmpty : Boolean LayoutRegion
True to hide the region when it has no panels
  margins : Object LayoutRegion
Margins for the element (defaults to {top: 0, left: 0, right:0, bottom: 0})
  minTabWidth : Number LayoutRegion
The minimum tab width (defaults to 40)
  preferredTabWidth : Number LayoutRegion
The preferred tab width (defaults to 150)
  preservePanels : Boolean LayoutRegion
True to preserve removed panels so they can be readded later (defaults to false)
  resizeTabs : Boolean LayoutRegion
True to enable automatic tab resizing. This will resize the tabs so they are all the same size and fit within the spa...
  showPin : Boolean LayoutRegion
True to show a pin button
  tabPosition : String LayoutRegion
"top" or "bottom" (defaults to "bottom")
  title : String LayoutRegion
The title for the region (overrides panel titles)
  titlebar : Boolean LayoutRegion
True to display a title bar (defaults to true)

Property Details

bodyEl

public Ext.Element bodyEl
This region's body element
This property is defined by LayoutRegion.

collapsedEl

public Ext.Element collapsedEl
This region's collapsed element
This property is defined by LayoutRegion.

el

public Ext.Element el
This region's container element
This property is defined by LayoutRegion.

panels

public Ext.util.MixedCollection panels
A collection of panels in this region.
This property is defined by BasicLayoutRegion.

split

public Ext.SplitBar split
The SplitBar for this region
This property is defined by SplitLayoutRegion.

titleEl

public Ext.Element titleEl
This region's title element
This property is defined by LayoutRegion.

titleTextEl

public HTMLElement titleTextEl
This region's title text element
This property is defined by LayoutRegion.

Method Details

add

public function add( ContentPanel... panel )
Add the passed ContentPanel(s)
Parameters:
  • panel : ContentPanel...
    The ContentPanel(s) to add (you can pass more than one)
Returns:
  • Ext.ContentPanel
    The panel added (if only one was added)
This method is defined by BasicLayoutRegion.

addEvents

public function addEvents( Object object )
Used to define events on this Observable
Parameters:
  • object : Object
    The object with the events defined
Returns:
  • void
This method is defined by Observable.

addListener

public function addListener( String eventName, Function handler, [Object scope], [Object options] )
Appends an event handler to this component
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The 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:
  • void
This method is defined by Observable.

collapse

public function collapse( [Boolean skipAnim] )
Collapses this region.
Parameters:
  • skipAnim : Boolean
    (optional) true to collapse the element without animation (if animate is true)
Returns:
  • void
This method is defined by LayoutRegion.

expand

public function expand( Ext.EventObject e, [Boolean skipAnim] )
Expands this region if it was previously collapsed.
Parameters:
  • e : Ext.EventObject
    The event that triggered the expand (or null if calling manually)
  • skipAnim : Boolean
    (optional) true to expand the element without animation (if animate is true)
Returns:
  • void
This method is defined by LayoutRegion.

fireEvent

public function fireEvent( String eventName, Object... args )
Fires the specified event with the passed parameters (minus the event name).
Parameters:
  • eventName : String
  • args : Object...
    Variable number of parameters are passed to handlers
Returns:
  • Boolean
    returns false if any of the handlers return false otherwise it returns true
This method is defined by Observable.

getActivePanel

public function getActivePanel()
Get the active panel for this region.
Parameters:
  • None.
Returns:
  • Ext.ContentPanel
    The active panel or null
This method is defined by BasicLayoutRegion.

getEl

public function getEl()
Returns the container element for this region.
Parameters:
  • None.
Returns:
  • Ext.Element
This method is defined by BasicLayoutRegion.

getPanel

public function getPanel( Number/String/ContentPanel panel )
Returns the panel specified or null if it's not in this region.
Parameters:
  • panel : Number/String/ContentPanel
    The panels index, id or the panel itself
Returns:
  • Ext.ContentPanel
This method is defined by BasicLayoutRegion.

getPosition

public function getPosition()
Returns this regions position (north/south/east/west/center).
Parameters:
  • None.
Returns:
  • String
This method is defined by BasicLayoutRegion.

getSplitBar

public function getSplitBar()
Returns the Ext.SplitBar for this region.
Parameters:
  • None.
Returns:
  • Ext.SplitBar
This method is defined by SplitLayoutRegion.

getTabs

public function getTabs()
Returns the TabPanel component used by this region
Parameters:
  • None.
Returns:
  • Ext.TabPanel
This method is defined by LayoutRegion.

hasListener

public function hasListener( String eventName )
Checks to see if this object has any listeners for a specified event
Parameters:
  • eventName : String
    The name of the event to check for
Returns:
  • Boolean
    True if the event is being listened for, else false
This method is defined by Observable.

hasPanel

public function hasPanel( Number/String/ContentPanel panel )
Returns true if the panel is in this region.
Parameters:
  • panel : Number/String/ContentPanel
    The panels index, id or the panel itself
Returns:
  • Boolean
This method is defined by BasicLayoutRegion.

hide

public function hide()
Hides this region.
Parameters:
  • None.
Returns:
  • void
This method is defined by LayoutRegion.

hidePanel

public function hidePanel( Number/String/ContentPanel panel )
Hides the tab for the specified panel.
Parameters:
  • panel : Number/String/ContentPanel
    The panel's index, id or the panel itself
Returns:
  • void
This method is defined by LayoutRegion.

isVisible

public function isVisible()
Returns true if this region is currently visible.
Parameters:
  • None.
Returns:
  • Boolean
This method is defined by BasicLayoutRegion.

on

public function on( String eventName, Function handler, [Object scope], [Object options] )
Appends an event handler to this element (shorthand for addListener)
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The 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:
  • void
This method is defined by Observable.

purgeListeners

public function purgeListeners()
Removes all listeners for this object
Parameters:
  • None.
Returns:
  • void
This method is defined by Observable.

remove

public function remove( Number/String/ContentPanel panel, Boolean preservePanel )
Removes the specified panel. If preservePanel is not true (either here or in the config), the panel is destroyed.
Parameters:
  • panel : Number/String/ContentPanel
    The panels index, id or the panel itself
  • preservePanel : Boolean
    Overrides the config preservePanel option
Returns:
  • Ext.ContentPanel
    The panel that was removed
This method is defined by BasicLayoutRegion.

removeListener

public function removeListener( String eventName, Function handler, [Object scope] )
Removes a listener
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The handler to remove
  • scope : Object
    (optional) The scope (this object) for the handler
Returns:
  • void
This method is defined by Observable.

resizeTo

public function resizeTo( Number newSize )
Resizes the region to the specified size. For vertical regions (west, east) this adjusts the width, for horizontal (north, south) the height.
Parameters:
  • newSize : Number
    The new width or height
Returns:
  • void
This method is defined by BasicLayoutRegion.

setCollapsedTitle

public function setCollapsedTitle( [String title] )
Updates the title for collapsed north/south regions (used with collapsedTitle config option)
Parameters:
  • title : String
    (optional) The title text (accepts HTML markup, defaults to the numeric character reference for a non-breaking space, " ")
Returns:
  • void
This method is defined by LayoutRegion.

show

public function show()
Shows this region if it was previously hidden.
Parameters:
  • None.
Returns:
  • void
This method is defined by LayoutRegion.

showPanel

public function showPanel( Number/String/ContentPanel panelId )
Show the specified panel.
Parameters:
  • panelId : Number/String/ContentPanel
    The panels index, id or the panel itself
Returns:
  • Ext.ContentPanel
    The shown panel or null
This method is defined by BasicLayoutRegion.

un

public function un( String eventName, Function handler, [Object scope] )
Removes a listener (shorthand for removeListener)
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The handler to remove
  • scope : Object
    (optional) The scope (this object) for the handler
Returns:
  • void
This method is defined by Observable.

unhidePanel

public function unhidePanel( Number/String/ContentPanel panel )
Unhides the tab for a previously hidden panel.
Parameters:
  • panel : Number/String/ContentPanel
    The panel's index, id or the panel itself
Returns:
  • void
This method is defined by LayoutRegion.

Event Details

beforeremove

public event beforeremove
Fires before a panel is removed (or closed). To cancel the removal set "e.cancel = true" on the event argument.
Subscribers will be called with the following parameters:
  • this : Ext.LayoutRegion
  • panel : Ext.ContentPanel
    The panel
  • e : Object
    The cancel event object
This event is defined by BasicLayoutRegion.

collapsed

public event collapsed
Fires when this region is collapsed.
Subscribers will be called with the following parameters:
  • this : Ext.LayoutRegion
This event is defined by BasicLayoutRegion.

expanded

public event expanded
Fires when this region is expanded.
Subscribers will be called with the following parameters:
  • this : Ext.LayoutRegion
This event is defined by BasicLayoutRegion.

invalidated

public event invalidated
Fires when the layout for this region is changed.
Subscribers will be called with the following parameters:
  • this : Ext.LayoutRegion
This event is defined by BasicLayoutRegion.

panelactivated

public event panelactivated
Fires when a panel is activated.
Subscribers will be called with the following parameters:
  • this : Ext.LayoutRegion
  • panel : Ext.ContentPanel
    The activated panel
This event is defined by BasicLayoutRegion.

paneladded

public event paneladded
Fires when a panel is added.
Subscribers will be called with the following parameters:
  • this : Ext.LayoutRegion
  • panel : Ext.ContentPanel
    The panel
This event is defined by BasicLayoutRegion.

panelremoved

public event panelremoved
Fires when a panel is removed.
Subscribers will be called with the following parameters:
  • this : Ext.LayoutRegion
  • panel : Ext.ContentPanel
    The panel
This event is defined by BasicLayoutRegion.

resized

public event resized
Fires when the user resizes this region.
Subscribers will be called with the following parameters:
  • this : Ext.LayoutRegion
  • newSize : Number
    The new size (width for east/west, height for north/south)
This event is defined by BasicLayoutRegion.

slidehide

public event slidehide
Fires when this region slides out of view.
Subscribers will be called with the following parameters:
  • this : Ext.LayoutRegion
This event is defined by BasicLayoutRegion.

slideshow

public event slideshow
Fires when this region is slid into view.
Subscribers will be called with the following parameters:
  • this : Ext.LayoutRegion
This event is defined by BasicLayoutRegion.

visibilitychange

public event visibilitychange
Fires when this region is shown or hidden
Subscribers will be called with the following parameters:
  • this : Ext.LayoutRegion
  • visibility : Boolean
    true or false
This event is defined by BasicLayoutRegion.

Config Details

alwaysShowTabs

alwaysShowTabs : Boolean
True to always display tabs even when there is only 1 panel (defaults to false)
This config option is defined by LayoutRegion.

animate

animate : Boolean
True to animate expand/collapse (defaults to false)
This config option is defined by LayoutRegion.

autoHide

autoHide : Boolean
False to disable auto hiding when the mouse leaves the "floated" region (defaults to true)
This config option is defined by LayoutRegion.

autoScroll

autoScroll : Boolean
True to enable overflow scrolling (defaults to false)
This config option is defined by LayoutRegion.

closeOnTab

closeOnTab : Boolean
True to place the close icon on the tabs instead of the region titlebar (defaults to false)
This config option is defined by LayoutRegion.

cmargins

cmargins : Object
Margins for the element when collapsed (defaults to: north/south {top: 2, left: 0, right:0, bottom: 2} or east/west {top: 0, left: 2, right:2, bottom: 0})
This config option is defined by LayoutRegion.

collapsed

collapsed : Boolean
True to set the initial display to collapsed (defaults to false)
This config option is defined by LayoutRegion.

collapsedTitle

collapsedTitle : String
Optional string message to display in the collapsed block of a north or south region
This config option is defined by LayoutRegion.

collapsible

collapsible : Boolean
False to disable collapsing (defaults to true)
This config option is defined by LayoutRegion.

disableTabTips

disableTabTips : Boolean
True to disable tab tooltips
This config option is defined by LayoutRegion.

floatable

floatable : Boolean
False to disable floating (defaults to true)
This config option is defined by LayoutRegion.

hidden

hidden : Boolean
True to start the region hidden (defaults to false)
This config option is defined by LayoutRegion.

hideTabs

hideTabs : Boolean
True to hide the tab strip (defaults to false)
This config option is defined by LayoutRegion.

hideWhenEmpty

hideWhenEmpty : Boolean
True to hide the region when it has no panels
This config option is defined by LayoutRegion.

margins

margins : Object
Margins for the element (defaults to {top: 0, left: 0, right:0, bottom: 0})
This config option is defined by LayoutRegion.

minTabWidth

minTabWidth : Number
The minimum tab width (defaults to 40)
This config option is defined by LayoutRegion.

preferredTabWidth

preferredTabWidth : Number
The preferred tab width (defaults to 150)
This config option is defined by LayoutRegion.

preservePanels

preservePanels : Boolean
True to preserve removed panels so they can be readded later (defaults to false)
This config option is defined by LayoutRegion.

resizeTabs

resizeTabs : Boolean
True to enable automatic tab resizing. This will resize the tabs so they are all the same size and fit within the space available, similar to FireFox 1.5 tabs (defaults to false)
This config option is defined by LayoutRegion.

showPin

showPin : Boolean
True to show a pin button
This config option is defined by LayoutRegion.

tabPosition

tabPosition : String
"top" or "bottom" (defaults to "bottom")
This config option is defined by LayoutRegion.

title

title : String
The title for the region (overrides panel titles)
This config option is defined by LayoutRegion.

titlebar

titlebar : Boolean
True to display a title bar (defaults to true)
This config option is defined by LayoutRegion.

Ext - Copyright © 2006-2007 Ext JS, LLC
All rights reserved.