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.
|
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) |
|
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. |
addEvents
public function addEvents( Object object
)
Used to define events on this Observable
addListener
public function addListener( String eventName
, Function handler
, [Object scope
], [Object options
] )
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
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:
clearSelections
public function clearSelections( [Boolean suppressEvent
] )
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:
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).
getEl
public function getEl()
Returns the element this view is bound to.
This method is defined by View.
getNode
public function getNode( HTMLElement/String/Number nodeInfo
)
This method is defined by View.
getNodes
public function getNodes( Number startIndex
, Number endIndex
)
Gets a range template nodes.
Parameters:
startIndex
: NumberendIndex
: Number
Returns:
This method is defined by View.
getSelectedIndexes
public function getSelectedIndexes()
Get the indexes of the selected nodes.
This method is defined by View.
getSelectedNodes
public function getSelectedNodes()
Get the currently selected nodes.
Parameters:
Returns:
Array
An array of HTMLElements
This method is defined by View.
getSelectionCount
public function getSelectionCount()
Get the number of selected nodes.
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
indexOf
public function indexOf( HTMLElement/String/Number nodeInfo
)
Finds the index of the passed node
This method is defined by View.
isSelected
public function isSelected( HTMLElement/Number node
)
Returns true if the passed node is selected
Parameters:
node
: HTMLElement/NumberThe node or node index
Returns:
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
: 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:
prepareData
public function prepareData( Array/Object data
)
Function to override to reformat the data that is sent to
the template for each node.
This method is defined by View.
purgeListeners
public function purgeListeners()
Removes all listeners for this object
refresh
public function refresh()
This method is defined by View.
refreshNode
public function refreshNode( Number index
)
Refresh an individual node.
This method is defined by View.
removeListener
public function removeListener( String eventName
, Function handler
, [Object scope
] )
select
public function select( Array/HTMLElement/String/Number nodeInfo
, [Boolean keepExisting
], [Boolean suppressEvent
] )
Selects nodes.
Parameters:
nodeInfo
: Array/HTMLElement/String/NumberAn 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:
This method is defined by View.
setStore
public function setStore( Store store
)
Changes the data store this view uses and refresh the view.
This method is defined by View.
un
public function un( String eventName
, Function handler
, [Object scope
] )
Removes a listener (shorthand for removeListener)
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 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 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 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 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 event is defined by View.
selectionchange
public event selectionchange
Fires when the selected nodes change.
Subscribers will be called with the following parameters:
This event is defined by View.