-
-
-
-
-
- |
-
-
- SplitBar( Mixed dragElement , Mixed resizingElement , [Number orientation ], [Number placement ] )
- Create a new SplitBar
-
- Create a new SplitBar
- Parameters:
- dragElement : MixedThe element to be dragged and act as the SplitBar. resizingElement : MixedThe 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:
-
- Returns:
-
-
-
-
- |
- 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 : 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
+split.on('moved', splitterMoved); Config Options|
| listeners : ObjectA config object containing one or more event handlers to be added to this
+object during initialization. This should ... 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.
+ DOM events from ExtJs Components
+ While some ExtJs Component classes export selected DOM events (e.g. "click", "mouseover" etc), this
+is usually only done when extra value can be added. For example the DataView's
+click event passing the node clicked on. To access DOM
+events directly from a Component's HTMLElement, listeners must be added to the Element after the Component
+has been rendered. A plugin can simplify this step: // Plugin is configured with a listeners config object.
+// The Component is appended to the argument list of all handler functions.
+Ext.DomObserver = Ext.extend(Object, {
+ constructor: function(config) {
+ this.listeners = config.listeners ? config.listeners : config;
+ },
+
+ // Component passes itself into plugin's init method
+ init: function(c) {
+ var p, l = this.listeners;
+ for (p in l) {
+ if (Ext.isFunction(l[p])) {
+ l[p] = this.createHandler(l[p], c);
+ } else {
+ l[p].fn = this.createHandler(l[p].fn, c);
+ }
+ }
+
+ // Add the listeners to the Element immediately following the render call
+ c.render = c.render.createSequence(function() {
+ var e = c.getEl();
+ if (e) {
+ e.on(l);
+ }
+ });
+ },
+
+ createHandler: function(fn, c) {
+ return function(e) {
+ fn.call(this, e, c);
+ };
+ }
+});
+
+var combo = new Ext.form.ComboBox({
+
+ // Collapse combo when its element is clicked on
+ plugins: [ new Ext.DomObserver({
+ click: function(evt, comp) {
+ comp.collapse();
+ }
+ })],
+ store: myStore,
+ typeAhead: true,
+ mode: 'local',
+ triggerAction: 'all'
+});
| Observable |
Public Properties|
| 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 | | tickSize : Number The increment, in pixels by which to move this SplitBar. When undefined, the SplitBar moves smoothly. | SplitBar | | useShim : Boolean Whether to create a transparent shim that overlays the page when dragging, enables dragging across iframes. | SplitBar |
Public Methods|
| SplitBar( Mixed dragElement , Mixed resizingElement , [Number orientation ], [Number placement ] )
+ Create a new SplitBar Create a new SplitBar Parameters:dragElement : MixedThe element to be dragged and act as the SplitBar. resizingElement : MixedThe 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|String o , string Optional. )
+ :
+ voidAdds the specified events to the list of events which this Observable may fire. Adds the specified events to the list of events which this Observable may fire. | Observable | | addListener( String eventName , Function handler , [Object scope ], [Object options ] )
+ :
+ voidAppends an event handler to this object. Appends an event handler to this object. Parameters:eventName : StringThe name of the event to listen for. handler : FunctionThe method the event invokes. scope : Object(optional) The scope (this reference) in which the handler function is executed.
+If omitted, defaults to the object which fired the event. 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
+ - scope : Object
The scope (this reference) in which the handler function is executed.
+If omitted, defaults to the object which fired the event.
+- 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.
+handler is not invoked, but the new handler is scheduled in its place.
+- target : Observable
Only call the handler if the event was fired on the target Observable, not
+if the event was bubbled up from a child Observable.
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
+A delayed, one-time listener.
+myDataView.on('click', this.onClick, this, {
+single: true,
+delay: 100
});
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
- }
+myGridPanel.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:
-
-
-
-
- |
- Observable |
-
-
- |
-
-
- destroy( Boolean removeEl ) : void
- Destroy this splitbar.
-
- Destroy this splitbar.
- Parameters:
-
- Returns:
-
-
-
-
- |
- 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:
-
- Returns:
-
-
-
-
- |
- Observable |
-
-
- |
-
-
- getAdapter() : The
- Get the adapter this SplitBar uses
-
- Get the adapter this SplitBar uses
- Parameters:
-
- Returns:
-
-
-
-
- |
- SplitBar |
-
-
- |
-
-
- getMaximumSize() : Number
- Gets the maximum size for the resizing element
-
- Gets the maximum size for the resizing element
- Parameters:
-
- 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:
-
- 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:
-
- Returns:
-
-
-
-
- |
- 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 : 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:
-
-
-
-
- |
- Observable |
-
-
- |
-
-
- purgeListeners() : void
- Removes all listeners for this object
-
- Removes all listeners for this object
- Parameters:
-
- Returns:
-
-
-
-
- |
- Observable |
-
-
- |
-
-
- relayEvents( Object o , Array events ) : void
- Relays selected events from the specified Observable as if the events were fired by this.
-
- Relays selected events from the specified Observable as if the events were fired by this.
- Parameters:
-
- Returns:
-
-
-
-
- |
- Observable |
-
-
- |
-
-
- removeListener( String eventName , Function handler , [Object scope ] ) : void
- Removes a listener
-
- Removes a listener
- Parameters:
-
- Returns:
-
-
-
-
- |
- Observable |
-
-
- |
-
-
- resumeEvents() : void
-
-
- Resume firing events. (see suspendEvents)
- Parameters:
-
- Returns:
-
-
-
-
- |
- Observable |
-
-
- |
-
-
- setAdapter( Object adapter ) : void
- Set the adapter this SplitBar uses
-
- Set the adapter this SplitBar uses
- Parameters:
-
- Returns:
-
-
-
-
- |
- SplitBar |
-
-
- |
-
-
- setCurrentSize( Number size ) : void
- Sets the initialize size for the resizing element
-
- Sets the initialize size for the resizing element
- Parameters:
- size : NumberThe initial size
- Returns:
-
-
-
-
- |
- SplitBar |
-
-
- |
-
-
- setMaximumSize( Number maxSize ) : void
- Sets the maximum size for the resizing element
-
- Sets the maximum size for the resizing element
- Parameters:
- maxSize : NumberThe maximum size
- Returns:
-
-
-
-
- |
- SplitBar |
-
-
- |
-
-
- setMinimumSize( Number minSize ) : void
- Sets the minimum size for the resizing element
-
- Sets the minimum size for the resizing element
- Parameters:
- minSize : NumberThe minimum size
- Returns:
-
-
-
-
- |
- SplitBar |
-
-
- |
-
-
- suspendEvents() : void
-
-
- Suspend the firing of all events. (see resumeEvents)
- Parameters:
-
- Returns:
-
-
-
-
- |
- Observable |
-
-
- |
-
-
- un( String eventName , Function handler , [Object scope ] ) : void
- Removes a listener (shorthand for removeListener)
-
- Removes a listener (shorthand for removeListener)
- Parameters:
-
- Returns:
-
-
-
-
- |
- Observable |
-
-
-
- Public Events
-
-
-
-
-
-
- |
-
-
- beforeresize : ( Ext.SplitBar this )
- Fires before the splitter is dragged
-
- Fires before the splitter is dragged
- Listeners will be called with the following arguments:
-
-
-
-
- |
- 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.SplitBarnewSize : Numberthe new width or height
-
-
-
- |
- SplitBar |
-
-
- |
-
-
- resize : ( Ext.SplitBar this , Number newSize )
- Fires when the splitter is moved (alias for moved)
-
- Fires when the splitter is moved (alias for moved)
- Listeners will be called with the following arguments:
- this : Ext.SplitBarnewSize : Numberthe new width or height
-
-
-
- |
- SplitBar |
-
-
-
-
\ No newline at end of file
+ myGridPanel.on({
+'click' : this.onClick,
+'mouseover' : this.onMouseOver,
+'mouseout' : this.onMouseOut,
+ scope: this
+});
Returns: | Observable |
| destroy( Boolean removeEl )
+ :
+ void | SplitBar |
| enableBubble( String/Array events )
+ :
+ voidEnables events fired by this Observable to bubble up an owner hierarchy by calling
+this.getBubbleTarget() if present.... Enables events fired by this Observable to bubble up an owner hierarchy by calling
+this.getBubbleTarget() if present. There is no implementation in the Observable base class.
+ This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
+implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
+access the required target more quickly.
+ Example: Ext.override(Ext.form.Field, {
+ // Add functionality to Field's initComponent to enable the change event to bubble
+ initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
+ this.enableBubble('change');
+ }),
+
+ // We know that we want Field's events to bubble directly to the FormPanel.
+ getBubbleTarget : function() {
+ if (!this.formPanel) {
+ this.formPanel = this.findParentByType('form');
+ }
+ return this.formPanel;
+ }
+});
+
+var myForm = new Ext.formPanel({
+ title: 'User Details',
+ items: [{
+ ...
+ }],
+ listeners: {
+ change: function() {
+ // Title goes red if form has been modified.
+ myForm.header.setStyle('color', 'red');
+ }
+ }
+});
| Observable |
| fireEvent( String eventName , Object... args )
+ :
+ BooleanFires the specified event with the passed parameters (minus the event name).
+An event may be set to bubble up an Obse... | Observable |
| getAdapter()
+ :
+ TheGet the adapter this SplitBar uses Get the adapter this SplitBar uses | SplitBar |
| getMaximumSize()
+ :
+ NumberGets the maximum size for the resizing element Gets the maximum size for the resizing element | SplitBar |
| getMinimumSize()
+ :
+ NumberGets the minimum size for the resizing element Gets the minimum size for the resizing element | SplitBar |
| hasListener( String eventName )
+ :
+ BooleanChecks 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 | Observable |
| on( String eventName , Function handler , [Object scope ], [Object options ] )
+ :
+ voidAppends an event handler to this object (shorthand for addListener.) Appends an event handler to this object (shorthand for addListener.) Parameters:eventName : StringThe type of event to listen for handler : FunctionThe method the event invokes scope : Object(optional) The scope (this reference) in which the handler function is executed.
+If omitted, defaults to the object which fired the event. options : Object(optional) An object containing handler configuration. Returns: | Observable |
| purgeListeners()
+ :
+ voidRemoves all listeners for this object Removes all listeners for this object | Observable |
| relayEvents( Object o , Array events )
+ :
+ voidRelays selected events from the specified Observable as if the events were fired by this. Relays selected events from the specified Observable as if the events were fired by this. | Observable |
| removeListener( String eventName , Function handler , [Object scope ] )
+ :
+ voidRemoves an event handler. Removes an event handler. | Observable |
| resumeEvents()
+ :
+ voidResume firing events. (see suspendEvents)
+If events were suspended using the queueSuspended parameter, then all
+event... Resume firing events. (see suspendEvents)
+If events were suspended using the queueSuspended parameter, then all
+events fired during event suspension will be sent to any listeners now. | Observable |
| setAdapter( Object adapter )
+ :
+ voidSet the adapter this SplitBar uses Set the adapter this SplitBar uses | SplitBar |
| setCurrentSize( Number size )
+ :
+ voidSets the initialize size for the resizing element Sets the initialize size for the resizing element Parameters:size : NumberThe initial size Returns: | SplitBar |
| setMaximumSize( Number maxSize )
+ :
+ voidSets the maximum size for the resizing element Sets the maximum size for the resizing element Parameters:maxSize : NumberThe maximum size Returns: | SplitBar |
| setMinimumSize( Number minSize )
+ :
+ voidSets the minimum size for the resizing element Sets the minimum size for the resizing element Parameters:minSize : NumberThe minimum size Returns: | SplitBar |
| suspendEvents( Boolean queueSuspended )
+ :
+ voidSuspend the firing of all events. (see resumeEvents) Suspend the firing of all events. (see resumeEvents) Parameters:queueSuspended : BooleanPass as true to queue up suspended events to be fired
+after the resumeEvents call instead of discarding all suspended events; Returns: | Observable |
| un( String eventName , Function handler , [Object scope ] )
+ :
+ voidRemoves an event handler (shorthand for removeListener.) | Observable |