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
  jsonData : Object View
The current json data or null
  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 component
  bufferedListener(String eventName, Function handler, [Object scope], [Number millis]) : Function Observable
Appends an event handler to this component that is buffered. If the event is triggered more than once in the specifie...
  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 component that is delayed the specified number of milliseconds. This is useful for e...
  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
  on(String eventName, Function handler, [Object scope], [boolean override]) : void Observable
Appends an event handler to this element (shorthand for addListener)
  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
  beforeselect : (YAHOO.ext.View this, HTMLElement node, Array selections) View
Fires before a selection is made. If any handlers return false, the selection is cancelled.
  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

jsonData

public Object jsonData
The current json data or null
This property is defined by View.

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

bufferedListener

public function bufferedListener(String eventName, Function handler, [Object scope], [Number millis])
Appends an event handler to this component that is buffered. If the event is triggered more than once in the specified time-frame, only the last one actually fires.
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
  • millis : Number
    (optional) The number of milliseconds to buffer (defaults to 250)
Returns:
  • Function
    The wrapped function that was created (can be used to remove the listener)
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 component that is delayed the specified number of milliseconds. This is useful for events that modify the DOM and need to wait for the browser to catch up.
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 (defaults to 1 millisecond)
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.

on

public function on(String eventName, Function handler, [Object scope], [boolean override])
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 (this object) for the handler
  • override : boolean
    (optional) If true, scope becomes the scope
Returns:
  • void
This method is defined by Observable.

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

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 : YAHOO.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 : 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.
yui-ext - Copyright © 2006 Jack Slocum. | Yahoo! UI - Copyright © 2006 Yahoo! Inc.
All rights reserved.