Package: | Ext |
Class: | View |
Extends: | Observable |
Subclasses: | JsonView |
Defined In: | View.js |
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.
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 |
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) |
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. |
public Ext.DomHelper.Template selectedClass
public Ext.DomHelper.Template tpl
public function View( String/HTMLElement/Element container
, String/DomHelper.Template tpl
, Object config
)
container
: String/HTMLElement/Elementtpl
: String/DomHelper.Templateconfig
: Objectpublic function addEvents( Object object
)
object
: Objectvoid
public function addListener( String eventName
, Function handler
, [Object scope
], [Object options
] )
eventName
: Stringhandler
: Functionscope
: Objectoptions
: Object
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
});
void
public function clearSelections( [Boolean suppressEvent
] )
suppressEvent
: Booleanvoid
public function findItemFromChild( HTMLElement node
)
node
: HTMLElementHTMLElement
public function fireEvent( String eventName
, Object... args
)
eventName
: Stringargs
: Object...Boolean
public function getEl()
Ext.Element
public function getNode( HTMLElement/String/Number nodeInfo
)
nodeInfo
: HTMLElement/String/NumberHTMLElement
public function getNodes( Number startIndex
, Number endIndex
)
startIndex
: NumberendIndex
: NumberArray
public function getSelectedIndexes()
Array
public function getSelectedNodes()
Array
public function getSelectionCount()
Number
public function hasListener( String eventName
)
eventName
: StringBoolean
public function indexOf( HTMLElement/String/Number nodeInfo
)
nodeInfo
: HTMLElement/String/NumberNumber
public function isSelected( HTMLElement/Number node
)
node
: HTMLElement/NumberBoolean
public function on( String eventName
, Function handler
, [Object scope
], [Object options
] )
eventName
: Stringhandler
: Functionscope
: Objectoptions
: Objectvoid
public function prepareData( Array/Object data
)
data
: Array/Objectvoid
public function purgeListeners()
void
public function refresh()
void
public function refreshNode( Number index
)
index
: Numbervoid
public function removeListener( String eventName
, Function handler
, [Object scope
] )
eventName
: Stringhandler
: Functionscope
: Objectvoid
public function select( Array/HTMLElement/String/Number nodeInfo
, [Boolean keepExisting
], [Boolean suppressEvent
] )
nodeInfo
: Array/HTMLElement/String/NumberkeepExisting
: BooleansuppressEvent
: Booleanvoid
public function setStore( Store store
)
store
: Storevoid
public function un( String eventName
, Function handler
, [Object scope
] )
eventName
: Stringhandler
: Functionscope
: Objectvoid
public event beforeclick
this
: Ext.Viewindex
: Numbernode
: HTMLElemente
: Ext.EventObjectpublic event beforeselect
this
: Ext.Viewnode
: HTMLElementselections
: Arraypublic event click
this
: Ext.Viewindex
: Numbernode
: HTMLElemente
: Ext.EventObjectpublic event contextmenu
this
: Ext.Viewindex
: Numbernode
: HTMLElemente
: Ext.EventObjectpublic event dblclick
this
: Ext.Viewindex
: Numbernode
: HTMLElemente
: Ext.EventObjectpublic event selectionchange
this
: Ext.Viewselections
: Array