Print Friendly

Class Ext.ContentPanel

Package:Ext
Class:ContentPanel
Extends:Observable
Subclasses:GridPanel, NestedLayoutPanel
Defined In:ContentPanels.js
A basic ContentPanel element.

Properties   -  Methods   -  Events   -  Config Options

Public Properties

This class has no public properties.

Public Methods

Method Defined By
  ContentPanel(String/HTMLElement/Element el, String/Object config, [String content]) ContentPanel
Create a new ContentPanel.
  addEvents(Object object) : void Observable
Copies any events from the passed object onto this object if they do not already exist. The passed object must also ...
  addListener(String eventName, Function handler, [Object scope], [Object options]) : void Observable
Appends an event handler to this component
  destroy() : void ContentPanel
Destroys this panel
  fireEvent(String eventName, Object... args) : Boolean Observable
Fires the specified event with the passed parameters (minus the event name).
  getEl() : Ext.Element ContentPanel
Returns this panel's element
  getId() : String ContentPanel
Returns this panel's id
  getTitle() : String ContentPanel
Returns this panel's title
  getToolbar() : Ext.Toolbar ContentPanel
Returns the toolbar for this Panel if one was configured.
  getUpdateManager() : Ext.UpdateManager ContentPanel
Get the Ext.UpdateManager for this panel. Enables you to perform Ajax updates.
  hasListener(String eventName) : Boolean Observable
Checks to see if this object is currently listening for a specified event
  isClosable() : Boolean ContentPanel
Returns true is this panel was configured to be closable
  load(Object/String/Function url, [String/Object params], [Function callback], [Boolean discardUrl]) : Ext.ContentPanel ContentPanel
Loads this content panel immediately with content from XHR. Note: to delay loading until the panel is activated, use ...
  on(String eventName, Function handler, [Object options]) : void Observable
Appends an event handler to this element (shorthand for addListener)
  purgeListeners() : void Observable
Removes all listeners for this object
  refresh() : void ContentPanel
Force a content refresh from the URL specified in the setUrl() method. Will fail silently if the setUrl method has no...
  removeListener(String eventName, Function handler, [Object scope]) : void Observable
Removes a listener
  setContent(String content, [Boolean loadScripts]) : void ContentPanel
Updates this panel's element
  setTitle(String title) : void ContentPanel
Set this panel's title
  setUrl(String/Function url, [String/Object params], [Boolean loadOnce]) : Ext.UpdateManager ContentPanel
Set a URL to be used to load the content for this panel. When this panel is activated, the content will be loaded fro...
  un(String eventName, Function handler, [Object scope]) : void Observable
Removes a listener (shorthand for removeListener)

Public Events

Event Defined By
  activate : (Ext.ContentPanel this) ContentPanel
Fires when this panel is activated.
  deactivate : (Ext.ContentPanel this) ContentPanel
Fires when this panel is activated.
  resize : (Ext.ContentPanel this, Number width, Number height) ContentPanel
Fires when this panel is resized if fitToFrame is true.

Config Options

Config Options Defined By
  adjustments : Array ContentPanel
Values to add to the width/height when doing a fitToFrame (default is [0, 0])
  autoCreate : Boolean/Object ContentPanel
True to auto generate the DOM element for this panel, or a DomHelper config of the element to create
  autoScroll : Boolean ContentPanel
True to scroll overflow in this panel (use with fitToFrame)
  background : Boolean ContentPanel
True if the panel should not be activated when it is added (defaults to false)
  closable : Boolean ContentPanel
True if the panel can be closed/removed
  fitContainer : Boolean ContentPanel
When using fitToFrame and resizeEl, you can also fit the parent container (defaults to false)
  fitToFrame : Boolean ContentPanel
True for this panel to adjust its size to fit when the region resizes (defaults to false)
  loadOnce : Boolean ContentPanel
Calls When used with "url", calls setUrl() with this value
  params : String/Object ContentPanel
When used with "url", calls setUrl() with this value
  resizeEl : String/HTMLElement/Element ContentPanel
An element to resize if fitToFrame is true (instead of this panel's element)
  title : String ContentPanel
The title for this panel
  toolbar : Toolbar ContentPanel
A toolbar for this panel
  url : String ContentPanel
Calls setUrl() with this value

Constructor Details

ContentPanel

public function ContentPanel(String/HTMLElement/Element el, String/Object config, [String content])
Create a new ContentPanel.
Parameters:
  • el : String/HTMLElement/Element
    The container element for this panel
  • config : String/Object
    A string to set only the title or a config object
  • content : String
    (optional) Set the HTML content for this panel

Method Details

addEvents

public function addEvents(Object object)
Copies any events from the passed object onto this object if they do not already exist. The passed object must also inherit from Observable for this method to have any effect.
Parameters:
  • object : Object
    The object from which to copy events
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.
    • delegate {String} A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} True to prevent the default action
    • stopPropagation {Boolean} True to prevent event propagation
    • normalized {Boolean} False to pass a browser event to the handler function instead of an Ext.EventObject
    • 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)

    Code: 
    el.on('click', this.onClick, this, { single: true, delay: 100, stopEvent : true, forumId: 4 });

    The method also allows for a single argument to be passed which is a config object containing properties which specify multiple handlers.

    Attaching multiple handlers in 1 call
    Code: 

    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:
    Code: 

    el.on({ 'click' : this.onClick, 'mouseover' : this.onMouseOver, 'mouseout' : this.onMouseOut scope: this });
Returns:
  • void
This method is defined by Observable.

destroy

public function destroy()
Destroys this panel
Parameters:
  • None.
Returns:
  • void
This method is defined by ContentPanel.

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.

getEl

public function getEl()
Returns this panel's element
Parameters:
  • None.
Returns:
  • Ext.Element
This method is defined by ContentPanel.

getId

public function getId()
Returns this panel's id
Parameters:
  • None.
Returns:
  • String
This method is defined by ContentPanel.

getTitle

public function getTitle()
Returns this panel's title
Parameters:
  • None.
Returns:
  • String
This method is defined by ContentPanel.

getToolbar

public function getToolbar()
Returns the toolbar for this Panel if one was configured.
Parameters:
  • None.
Returns:
  • Ext.Toolbar
This method is defined by ContentPanel.

getUpdateManager

public function getUpdateManager()
Get the Ext.UpdateManager for this panel. Enables you to perform Ajax updates.
Parameters:
  • None.
Returns:
  • Ext.UpdateManager
    The UpdateManager
This method is defined by ContentPanel.

hasListener

public function hasListener(String eventName)
Checks to see if this object is currently listening 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.

isClosable

public function isClosable()
Returns true is this panel was configured to be closable
Parameters:
  • None.
Returns:
  • Boolean
This method is defined by ContentPanel.

load

public function load(Object/String/Function url, [String/Object params], [Function callback], [Boolean discardUrl])
Loads this content panel immediately with content from XHR. Note: to delay loading until the panel is activated, use setUrl.
Parameters:
  • url : Object/String/Function
    The url for this request or a function to call to get the url or a config object containing any of the following options: 
     panel.load({
     url: "your-url.php",
     params: {param1: "foo", param2: "bar"}, // or a URL encoded string
     callback: yourFunction,
     scope: yourObject, //(optional scope) 
     discardUrl: false, 
     nocache: false,
     text: "Loading...",
     timeout: 30,
     scripts: false
     });
    The only required property is url. The optional properties nocache, text and scripts are shorthand for disableCaching, indicatorText and loadScripts and are used to set their associated property on this panel UpdateManager instance.
  • params : String/Object
    (optional) The parameters to pass as either a url encoded string "param1=1&param2=2" or an object {param1: 1, param2: 2}
  • callback : Function
    (optional) Callback when transaction is complete - called with signature (oElement, bSuccess, oResponse)
  • discardUrl : Boolean
    (optional) By default when you execute an update the defaultUrl is changed to the last used url. If true, it will not store the url.
Returns:
  • Ext.ContentPanel
    this
This method is defined by ContentPanel.

on

public function on(String eventName, Function handler, [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
  • 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.

refresh

public function refresh()
Force a content refresh from the URL specified in the setUrl() method. Will fail silently if the setUrl method has not been called. This does not activate the panel, just updates its content.
Parameters:
  • None.
Returns:
  • void
This method is defined by ContentPanel.

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.

setContent

public function setContent(String content, [Boolean loadScripts])
Updates this panel's element
Parameters:
  • content : String
    The new content
  • loadScripts : Boolean
    (optional) true to look for and process scripts
Returns:
  • void
This method is defined by ContentPanel.

setTitle

public function setTitle(String title)
Set this panel's title
Parameters:
  • title : String
Returns:
  • void
This method is defined by ContentPanel.

setUrl

public function setUrl(String/Function url, [String/Object params], [Boolean loadOnce])
Set a URL to be used to load the content for this panel. When this panel is activated, the content will be loaded from that URL.
Parameters:
  • url : String/Function
    The url to load the content from or a function to call to get the url
  • params : String/Object
    (optional) The string params for the update call or an object of the params. See Ext.UpdateManager.update for more details. (Defaults to null)
  • loadOnce : Boolean
    (optional) Whether to only load the content once. If this is false it makes the Ajax call every time this panel is activated. (Defaults to false)
Returns:
  • Ext.UpdateManager
    The UpdateManager
This method is defined by ContentPanel.

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.

Event Details

activate

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

deactivate

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

resize

public event resize
Fires when this panel is resized if fitToFrame is true.
Subscribers will be called with the following parameters:
  • this : Ext.ContentPanel
  • width : Number
    The width after any component adjustments
  • height : Number
    The height after any component adjustments
This event is defined by ContentPanel.

Config Details

adjustments

adjustments : Array
Values to add to the width/height when doing a fitToFrame (default is [0, 0])
This config option is defined by ContentPanel.

autoCreate

autoCreate : Boolean/Object
True to auto generate the DOM element for this panel, or a DomHelper config of the element to create
This config option is defined by ContentPanel.

autoScroll

autoScroll : Boolean
True to scroll overflow in this panel (use with fitToFrame)
This config option is defined by ContentPanel.

background

background : Boolean
True if the panel should not be activated when it is added (defaults to false)
This config option is defined by ContentPanel.

closable

closable : Boolean
True if the panel can be closed/removed
This config option is defined by ContentPanel.

fitContainer

fitContainer : Boolean
When using fitToFrame and resizeEl, you can also fit the parent container (defaults to false)
This config option is defined by ContentPanel.

fitToFrame

fitToFrame : Boolean
True for this panel to adjust its size to fit when the region resizes (defaults to false)
This config option is defined by ContentPanel.

loadOnce

loadOnce : Boolean
Calls When used with "url", calls setUrl() with this value
This config option is defined by ContentPanel.

params

params : String/Object
When used with "url", calls setUrl() with this value
This config option is defined by ContentPanel.

resizeEl

resizeEl : String/HTMLElement/Element
An element to resize if fitToFrame is true (instead of this panel's element)
This config option is defined by ContentPanel.

title

title : String
The title for this panel
This config option is defined by ContentPanel.

toolbar

toolbar : Toolbar
A toolbar for this panel
This config option is defined by ContentPanel.

url

url : String
Calls setUrl() with this value
This config option is defined by ContentPanel.
Ext - Copyright © 2006-2007 Ext JS, LLC
All rights reserved.