Print Friendly

# Class Ext.View

Package: | Ext
Class: | View
Extends: | Observable
Subclasses: | JsonView
Defined In: | View.js

Create a "View" for an element based on a data model or UpdateManager and the supplied DomHelper template. This class also supports single and multi selection modes.
Create a data model bound view:

    var store = new Ext.data.Store(...);

     var view = new Ext.View("my-element",
     '<div id="{0}">{2} - {1}</div>', // auto create template
     {
     singleSelect: true,
     selectedClass: "ydataview-selected",
     store: store
     });

     // listen for node click?
     view.on("click", function(vw, index, node, e){
     alert('Node "' + node.id + '" at index: ' + index + " was clicked.");
     });

     // load XML data
     dataModel.load("foobar.xml");

For an example of creating a JSON/UpdateManager view, see Ext.JsonView.
Note: The root of your template must be a single node. Table/row implementations may work but are not supported due to IE"s limited insertion support with tables and Opera"s faulty event bubbling.
Properties - Methods - Events

## Public Properties

Property | Defined By
--- | ---
| selectedClass : Ext.DomHelper.Template | View
The css class to add to selected nodes
| tpl : Ext.DomHelper.Template | View
The template used by this View

## Public Methods

Method | Defined By
--- | ---
| View( `String/HTMLElement/Element container`, `String/DomHelper.Template tpl`, `Object config` ) | View
Create a new View
| 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
| clearSelections( [`Boolean suppressEvent`] ) : void | View
Clear all selections
| findItemFromChild( `HTMLElement node` ) : HTMLElement | View
Returns the template node the passed child belongs to or null if it doesn't belong to one.
| fireEvent( `String eventName`, `Object... args` ) : Boolean | Observable
Fires the specified event with the passed parameters (minus the event name).
| getEl() : Ext.Element | View
Returns the element this view is bound to.
| getNode( `HTMLElement/String/Number nodeInfo` ) : HTMLElement | View
Gets a template node.
| getNodes( `Number startIndex`, `Number endIndex` ) : Array | View
Gets a range template nodes.
| getSelectedIndexes() : Array | View
Get the indexes of the selected nodes.
| getSelectedNodes() : Array | View
Get the currently selected nodes.
| getSelectionCount() : Number | View
Get the number of selected nodes.
| hasListener( `String eventName` ) : Boolean | Observable
Checks to see if this object has any listeners for a specified event
| indexOf( `HTMLElement/String/Number nodeInfo` ) : Number | View
Finds the index of the passed node
| isSelected( `HTMLElement/Number node` ) : Boolean | View
Returns true if the passed node is selected
| on( `String eventName`, `Function handler`, [`Object scope`], [`Object options`] ) : void | Observable
Appends an event handler to this element (shorthand for addListener)
| prepareData( `Array/Object data` ) : void | View
Function to override to reformat the data that is sent to the template for each node.
| purgeListeners() : void | Observable
Removes all listeners for this object
| refresh() : void | View
Refreshes the view.
| refreshNode( `Number index` ) : void | View
Refresh an individual node.
| removeListener( `String eventName`, `Function handler`, [`Object scope`] ) : void | Observable
Removes a listener
| select( `Array/HTMLElement/String/Number nodeInfo`, [`Boolean keepExisting`], [`Boolean suppressEvent`] ) : void | View
Selects nodes.
| setStore( `Store store` ) : void | View
Changes the data store this view uses and refresh the view.
| un( `String eventName`, `Function handler`, [`Object scope`] ) : void | Observable
Removes a listener (shorthand for removeListener)

## Public Events

Event | Defined By
--- | ---
| beforeclick : ( `Ext.View this`, `Number index`, `HTMLElement node`, `Ext.EventObject e` ) | View
Fires before a click is processed. Returns false to cancel the default action.
| beforeselect : ( `Ext.View this`, `HTMLElement node`, `Array selections` ) | View
Fires before a selection is made. If any handlers return false, the selection is cancelled.
| click : ( `Ext.View this`, `Number index`, `HTMLElement node`, `Ext.EventObject e` ) | View
Fires when a template node is clicked.
| contextmenu : ( `Ext.View this`, `Number index`, `HTMLElement node`, `Ext.EventObject e` ) | View
Fires when a template node is right clicked.
| dblclick : ( `Ext.View this`, `Number index`, `HTMLElement node`, `Ext.EventObject e` ) | View
Fires when a template node is double clicked.
| selectionchange : ( `Ext.View this`, `Array selections` ) | View
Fires when the selected nodes change.

## Property Details

### selectedClass

`public Ext.DomHelper.Template selectedClass`
The css class to add to selected nodes
This property is defined by View.

### tpl

`public Ext.DomHelper.Template tpl`
The template used by this View
This property is defined by View.

## Constructor Details

### View

`public function View( `String/HTMLElement/Element container`, `String/DomHelper.Template tpl`, `Object config` )`
Create a new View
Parameters:

- `container` : String/HTMLElement/Element
  The container element where the view is to be rendered.
- `tpl` : String/DomHelper.Template
  The rendering template or a string to create a template with
- `config` : Object
  The config object

## Method Details

### 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.

### clearSelections

`public function clearSelections( [`Boolean suppressEvent`] )`
Clear all selections
Parameters:

- `suppressEvent` : Boolean
  (optional) true to skip firing of the selectionchange event

Returns:

- `void`

This method is defined by View.

### findItemFromChild

`public function findItemFromChild( `HTMLElement node` )`
Returns the template node the passed child belongs to or null if it doesn't belong to one.
Parameters:

- `node` : HTMLElement

Returns:

- `HTMLElement`
  The template node

This method is defined by View.

### 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 the element this view is bound to.
Parameters:

- None.

Returns:

- `Ext.Element`

This method is defined by View.

### getNode

`public function getNode( `HTMLElement/String/Number nodeInfo` )`
Gets a template node.
Parameters:

- `nodeInfo` : HTMLElement/String/Number
  An HTMLElement template node, index of a template node or the id of a template node

Returns:

- `HTMLElement`
  The node or null if it wasn't found

This method is defined by View.

### getNodes

`public function getNodes( `Number startIndex`, `Number endIndex` )`
Gets a range template nodes.
Parameters:

- `startIndex` : Number
- `endIndex` : Number

Returns:

- `Array`
  An array of nodes

This method is defined by View.

### getSelectedIndexes

`public function getSelectedIndexes()`
Get the indexes of the selected nodes.
Parameters:

- None.

Returns:

- `Array`

This method is defined by View.

### getSelectedNodes

`public function getSelectedNodes()`
Get the currently selected nodes.
Parameters:

- None.

Returns:

- `Array`
  An array of HTMLElements

This method is defined by View.

### getSelectionCount

`public function getSelectionCount()`
Get the number of selected nodes.
Parameters:

- None.

Returns:

- `Number`

This method is defined by View.

### 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.

### indexOf

`public function indexOf( `HTMLElement/String/Number nodeInfo` )`
Finds the index of the passed node
Parameters:

- `nodeInfo` : HTMLElement/String/Number
  An HTMLElement template node, index of a template node or the id of a template node

Returns:

- `Number`
  The index of the node or -1

This method is defined by View.

### isSelected

`public function isSelected( `HTMLElement/Number node` )`
Returns true if the passed node is selected
Parameters:

- `node` : HTMLElement/Number
  The node or node index

Returns:

- `Boolean`

This method is defined by View.

### 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.

### prepareData

`public function prepareData( `Array/Object data` )`
Function to override to reformat the data that is sent to the template for each node.
Parameters:

- `data` : Array/Object
  The raw data (array of colData for a data model bound view or a JSON object for an UpdateManager bound view).

Returns:

- `void`

This method is defined by View.

### purgeListeners

`public function purgeListeners()`
Removes all listeners for this object
Parameters:

- None.

Returns:

- `void`

This method is defined by Observable.

### refresh

`public function refresh()`
Refreshes the view.
Parameters:

- None.

Returns:

- `void`

This method is defined by View.

### refreshNode

`public function refreshNode( `Number index` )`
Refresh an individual node.
Parameters:

- `index` : Number

Returns:

- `void`

This method is defined by View.

### 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.

### select

`public function select( `Array/HTMLElement/String/Number nodeInfo`, [`Boolean keepExisting`], [`Boolean suppressEvent`] )`
Selects nodes.
Parameters:

- `nodeInfo` : Array/HTMLElement/String/Number
  An HTMLElement template node, index of a template node, id of a template node or an array of any of those to select
- `keepExisting` : Boolean
  (optional) true to keep existing selections
- `suppressEvent` : Boolean
  (optional) true to skip firing of the selectionchange vent

Returns:

- `void`

This method is defined by View.

### setStore

`public function setStore( `Store store` )`
Changes the data store this view uses and refresh the view.
Parameters:

- `store` : Store

Returns:

- `void`

This method is defined by View.

### 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

### beforeclick

`public event beforeclick`
Fires before a click is processed. Returns false to cancel the default action.
Subscribers will be called with the following parameters:

- `this` : Ext.View
- `index` : Number
  The index of the target node
- `node` : HTMLElement
  The target node
- `e` : Ext.EventObject
  The raw event object

This event is defined by View.

### beforeselect

`public event beforeselect`
Fires before a selection is made. If any handlers return false, the selection is cancelled.
Subscribers will be called with the following parameters:

- `this` : Ext.View
- `node` : HTMLElement
  The node to be selected
- `selections` : Array
  Array of currently selected nodes

This event is defined by View.

### click

`public event click`
Fires when a template node is clicked.
Subscribers will be called with the following parameters:

- `this` : Ext.View
- `index` : Number
  The index of the target node
- `node` : HTMLElement
  The target node
- `e` : Ext.EventObject
  The raw event object

This event is defined by View.

### contextmenu

`public event contextmenu`
Fires when a template node is right clicked.
Subscribers will be called with the following parameters:

- `this` : Ext.View
- `index` : Number
  The index of the target node
- `node` : HTMLElement
  The target node
- `e` : Ext.EventObject
  The raw event object

This event is defined by View.

### dblclick

`public event dblclick`
Fires when a template node is double clicked.
Subscribers will be called with the following parameters:

- `this` : Ext.View
- `index` : Number
  The index of the target node
- `node` : HTMLElement
  The target node
- `e` : Ext.EventObject
  The raw event object

This event is defined by View.

### selectionchange

`public event selectionchange`
Fires when the selected nodes change.
Subscribers will be called with the following parameters:

- `this` : Ext.View
- `selections` : Array
  Array of the selected nodes

This event is defined by View.

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