Print Friendly

# Class YAHOO.ext.View

Package: | YAHOO.ext
Class: | View
Extends: | Observable
Subclasses: | JsonView
Defined In: | TemplateView.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 dataModel = new YAHOO.ext.grid.XMLDataModel(...);
    var view = new YAHOO.ext.View('my-element',
               '<div id="{0}">{2} - {1}</div>', // auto create template
               dataModel, {
                  singleSelect: true,
                  selectedClass: 'ydataview-selected'
               });

    // 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 YAHOO.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.

## Public Properties

Property | Defined By
--- | ---
| jsonRoot : String | View
The root property in the loaded json object that contains the data
| selectedClass : YAHOO.ext.DomHelper.Template | View
The css class to add to selected nodes
| tpl : YAHOO.ext.DomHelper.Template | View
The template used by this View

## Public Methods

Method | Defined By
--- | ---
| View(`String/HTMLElement/Element container`, `String/DomHelper.Template tpl`, `DataModel dataModel`, `Object config`) | View
Create a new View
| addListener(`String eventName`, `Function handler`, [`Object scope`], [`boolean override`]) : void | Observable
Appends an event handler to this element
| clearSelections([`Boolean suppressEvent`]) : void | View
Clear all selections
| delayedListener(`String eventName`, `Function handler`, [`Object scope`], [`Number delay`]) : Function | Observable
Appends an event handler to this element that is delayed the specified number of milliseconds.
| 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() : YAHOO.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.
| indexOf(`HTMLElement/String/Number nodeInfo`) : Number | View
Finds the index of the passed node
| prepareData(`Array/Object data`, `Number index`) : 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.
| setDataModel(`DataModel dataModel`) : void | View
Changes the data model this view uses and refresh the view.
| unplugDataModel(`DataModel dataModel`) : void | View
Unplug the data model and stop updates.

## Public Events

Event | Defined By
--- | ---
| click : (`YAHOO.ext.View this`, `Number index`, `HTMLElement node`, `YAHOO.ext.EventObject e`) | View
Fires when a template node is clicked.
| contextmenu : (`YAHOO.ext.View this`, `Number index`, `HTMLElement node`, `YAHOO.ext.EventObject e`) | View
Fires when a template node is right clicked.
| dblclick : (`YAHOO.ext.View this`, `Number index`, `HTMLElement node`, `YAHOO.ext.EventObject e`) | View
Fires when a template node is double clicked.
| selectionchange : (`YAHOO.ext.View this`, `Array selections`) | View
Fires when the selected nodes change.

## Property Details

### jsonRoot

`public String jsonRoot`
The root property in the loaded json object that contains the data
This property is defined by View.

### selectedClass

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

### tpl

`public YAHOO.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`, `DataModel dataModel`, `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
- `dataModel` : DataModel
  The bound data model
- `config` : Object
  The config object

## Method Details

### addListener

`public function addListener(`String eventName`, `Function handler`, [`Object scope`], [`boolean override`])`
Appends an event handler to this element
Parameters:

- `eventName` : String
  The type of event to listen for
- `handler` : Function
  The method the event invokes
- `scope` : Object
  (optional) The scope (this object) for the handler
- `override` : boolean
  (optional) If true, scope becomes the scope

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.

### delayedListener

`public function delayedListener(`String eventName`, `Function handler`, [`Object scope`], [`Number delay`])`
Appends an event handler to this element that is delayed the specified number of milliseconds.
Parameters:

- `eventName` : String
  The type of event to listen for
- `handler` : Function
  The method the event invokes
- `scope` : Object
  (optional) The scope (this object) for the handler
- `delay` : Number
  (optional) The number of milliseconds to delay

Returns:

- `Function`
  The wrapped function that was created (can be used to remove the listener)

This method is defined by Observable.

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

- `YAHOO.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.

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

### prepareData

`public function prepareData(`Array/Object data`, `Number index`)`
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).
- `index` : Number
  The index of the data within the data model

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.

### setDataModel

`public function setDataModel(`DataModel dataModel`)`
Changes the data model this view uses and refresh the view.
Parameters:

- `dataModel` : DataModel

Returns:

- `void`

This method is defined by View.

### unplugDataModel

`public function unplugDataModel(`DataModel dataModel`)`
Unplug the data model and stop updates.
Parameters:

- `dataModel` : DataModel

Returns:

- `void`

This method is defined by View.

## Event Details

### click

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

- `this` : YAHOO.ext.View
- `index` : Number
  The index of the target node
- `node` : HTMLElement
  The target node
- `e` : YAHOO.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` : YAHOO.ext.View
- `index` : Number
  The index of the target node
- `node` : HTMLElement
  The target node
- `e` : YAHOO.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` : YAHOO.ext.View
- `index` : Number
  The index of the target node
- `node` : HTMLElement
  The target node
- `e` : YAHOO.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` : YAHOO.ext.View
- `selections` : Array
  Array of the selected nodes

This event is defined by View.

Copyright © 2006 Jack Slocum. All rights reserved.