Properties Methods Events Config Options Direct Link

    Observable
      SplitBar

# Class Ext.SplitBar

Package: | Ext
Defined In: | SplitBar.js
Class: | SplitBar
Extends: | Observable

Creates draggable splitter bar functionality from two elements (element to be dragged and element to be resized).
Usage:

    var split = new Ext.SplitBar("elementToDrag", "elementToSize",
                       Ext.SplitBar.HORIZONTAL, Ext.SplitBar.LEFT);
    split.setAdapter(new Ext.SplitBar.AbsoluteLayoutAdapter("container"));
    split.minSize = 100;
    split.maxSize = 600;
    split.animate = true;
    split.on('moved', splitterMoved);

## Config Options

Config Options | Defined By
--- | ---
| listeners : Object A config object containing one or more event handlers to be added to this object during initialization. This should b... A config object containing one or more event handlers to be added to this object during initialization. This should be a valid listeners config object as specified in the addListener example for attaching multiple handlers at once. | Observable

## Public Properties

Property | Defined By
--- | ---
| animate : Boolean Whether to animate the transition to the new size | SplitBar
| maxSize : Number The maximum size of the resizing element. (Defaults to 2000) | SplitBar
| minSize : Number The minimum size of the resizing element. (Defaults to 0) | SplitBar
| useShim : Boolean Whether to create a transparent shim that overlays the page when dragging, enables dragging across iframes. | SplitBar

## Public Methods

Method | Defined By
--- | ---

SplitBar( `Mixed dragElement`, `Mixed resizingElement`, [`Number orientation`], [`Number placement`] )
Create a new SplitBar
Create a new SplitBar
Parameters:

- `dragElement` : Mixed
  The element to be dragged and act as the SplitBar.
- `resizingElement` : Mixed
  The element to be resized based on where the SplitBar element is dragged
- `orientation` : Number
  (optional) Either Ext.SplitBar.HORIZONTAL or Ext.SplitBar.VERTICAL. (Defaults to HORIZONTAL)
- `placement` : Number
  (optional) Either Ext.SplitBar.LEFT or Ext.SplitBar.RIGHT for horizontal or Ext.SplitBar.TOP or Ext.SplitBar.BOTTOM for vertical. (By default, this is determined automatically by the initial position of the SplitBar).

Returns:

- ``

SplitBar

addEvents( `Object object` ) : void
Used to define events on this Observable
Used to define events on this Observable
Parameters:

- `object` : Object
  The object with the events defined

Returns:

- `void`

Observable

addListener( `String eventName`, `Function handler`, [`Object scope`], [`Object options`] ) : void
Appends an event handler to this component
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 the 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.

      foo.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:

      foo.on({
          'click' : this.onClick,
          'mouseover' : this.onMouseOver,
          'mouseout' : this.onMouseOut,
           scope: this
      });

Returns:

- `void`

Observable

destroy( `Boolean removeEl` ) : void
Destroy this splitbar.
Destroy this splitbar.
Parameters:

- `removeEl` : Boolean
  True to remove the element

Returns:

- `void`

SplitBar

fireEvent( `String eventName`, `Object... args` ) : Boolean
Fires the specified event with the passed parameters (minus the event name).
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

Observable

getAdapter() : The
Get the adapter this SplitBar uses
Get the adapter this SplitBar uses
Parameters:

- None.

Returns:

- `The`
  adapter object

SplitBar

getMaximumSize() : Number
Gets the maximum size for the resizing element
Gets the maximum size for the resizing element
Parameters:

- None.

Returns:

- `Number`
  The maximum size

SplitBar

getMinimumSize() : Number
Gets the minimum size for the resizing element
Gets the minimum size for the resizing element
Parameters:

- None.

Returns:

- `Number`
  The minimum size

SplitBar

hasListener( `String eventName` ) : Boolean
Checks to see if this object has any listeners for a specified event
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

Observable

on( `String eventName`, `Function handler`, [`Object scope`], [`Object options`] ) : void
Appends an event handler to this element (shorthand for addListener)
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`

Observable

purgeListeners() : void
Removes all listeners for this object
Removes all listeners for this object
Parameters:

- None.

Returns:

- `void`

Observable

removeListener( `String eventName`, `Function handler`, [`Object scope`] ) : void
Removes a listener
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`

Observable

resumeEvents() : void
Resume firing events. (see suspendEvents)
Resume firing events. (see suspendEvents)
Parameters:

- None.

Returns:

- `void`

Observable

setAdapter( `Object adapter` ) : void
Set the adapter this SplitBar uses
Set the adapter this SplitBar uses
Parameters:

- `adapter` : Object
  A SplitBar adapter object

Returns:

- `void`

SplitBar

setCurrentSize( `Number size` ) : void
Sets the initialize size for the resizing element
Sets the initialize size for the resizing element
Parameters:

- `size` : Number
  The initial size

Returns:

- `void`

SplitBar

setMaximumSize( `Number maxSize` ) : void
Sets the maximum size for the resizing element
Sets the maximum size for the resizing element
Parameters:

- `maxSize` : Number
  The maximum size

Returns:

- `void`

SplitBar

setMinimumSize( `Number minSize` ) : void
Sets the minimum size for the resizing element
Sets the minimum size for the resizing element
Parameters:

- `minSize` : Number
  The minimum size

Returns:

- `void`

SplitBar

suspendEvents() : void
Suspend the firing of all events. (see resumeEvents)
Suspend the firing of all events. (see resumeEvents)
Parameters:

- None.

Returns:

- `void`

Observable

un( `String eventName`, `Function handler`, [`Object scope`] ) : void
Removes a listener (shorthand for removeListener)
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`

Observable

## Public Events

Event | Defined By
--- | ---

beforeresize : ( `Ext.SplitBar this` )
Fires before the splitter is dragged
Fires before the splitter is dragged
Listeners will be called with the following arguments:

- `this` : Ext.SplitBar

SplitBar

moved : ( `Ext.SplitBar this`, `Number newSize` )
Fires when the splitter is moved
Fires when the splitter is moved
Listeners will be called with the following arguments:

- `this` : Ext.SplitBar
- `newSize` : Number
  the new width or height

SplitBar

resize : ( `Ext.SplitBar this`, `Number newSize` )
Fires when the splitter is moved (alias for {@link #event-moved})
Fires when the splitter is moved (alias for {@link #event-moved})
Listeners will be called with the following arguments:

- `this` : Ext.SplitBar
- `newSize` : Number
  the new width or height

SplitBar