Package: | Ext |
Class: | JsonView |
Extends: | View |
Defined In: | JsonView.js |
var view = new Ext.JsonView("my-element",
'<div id="{id}">{foo} - {bar}</div>', // auto create template
{ multiSelect: true, jsonRoot: "data" }
);
// listen for node click?
view.on("click", function(vw, index, node, e){
alert('Node "' + node.id + '" at index: ' + index + " was clicked.");
});
// direct load of JSON data
view.load("foobar.php");
// Example from my blog list
var tpl = new Ext.Template(
'<div class="entry">' +
'<a class="entry-title" href="{link}">{title}</a>' +
"<h4>{date} by {author} | {comments} Comments</h4>{description}" +
"</div><hr />"
);
var moreView = new Ext.JsonView("entry-list", tpl, {
jsonRoot: "posts"
});
moreView.on("beforerender", this.sortEntries, this);
moreView.load({
url: "/blog/get-posts.php",
params: "allposts=true",
text: "Loading Blog Entries..."
});
Property | Defined By | |
---|---|---|
jsonData : Object | JsonView | |
The current JSON data or null | ||
jsonRoot : String | JsonView | |
The root property in the loaded JSON object that contains the data | ||
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 | |
---|---|---|
JsonView( String/HTMLElement/Element container , Template tpl , Object config ) |
JsonView | |
Create a new JsonView | ||
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 | ||
clearFilter() : void | JsonView | |
Clears the current filter. | ||
clearSelections( [Boolean suppressEvent ] ) : void |
View | |
Clear all selections | ||
filter( String property , String/RegExp value ) : void |
JsonView | |
Filter the data by a specific property. | ||
filterBy( Function fn , [Object scope ] ) : void |
JsonView | |
Filter by a function. The passed function will be called with each object in the current dataset. If the function ret... | ||
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). | ||
getCount() : Number | JsonView | |
Get the number of records in the current JSON dataset | ||
getEl() : Ext.Element | View | |
Returns the element this view is bound to. | ||
getNode( HTMLElement/String/Number nodeInfo ) : HTMLElement |
View | |
Gets a template node. | ||
getNodeData( HTMLElement/Array node ) : Object/Array |
JsonView | |
Returns the JSON object for the specified node(s) | ||
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 | ||
load( Object/String/Function url , [String/Object params ], [Function callback ], [Boolean discardUrl ] ) : void |
JsonView | |
Performs an async HTTP request, and loads the JSON from the response. If params are specified it uses POST, otherwise... | ||
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 | JsonView | |
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. | ||
sort( String property , [String direction ], [Function sortType ] ) : void |
JsonView | |
Sorts the data for this view and refreshes it. | ||
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. | ||
beforerender : ( Ext.JsonView this , Object data ) |
JsonView | |
Fires before rendering of the downloaded JSON data. | ||
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. | ||
load : ( Ext.JsonView this , Object data , Object response ) |
JsonView | |
Fires when data is loaded. | ||
loadexception : ( Ext.JsonView this , Object response ) |
JsonView | |
Fires when loading fails. | ||
selectionchange : ( Ext.View this , Array selections ) |
View | |
Fires when the selected nodes change. |
public Object jsonData
public String jsonRoot
public Ext.DomHelper.Template selectedClass
public Ext.DomHelper.Template tpl
public function JsonView( String/HTMLElement/Element container
, Template tpl
, Object config
)
container
: String/HTMLElement/Elementtpl
: 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 clearFilter()
void
public function clearSelections( [Boolean suppressEvent
] )
suppressEvent
: Booleanvoid
public function filter( String property
, String/RegExp value
)
property
: Stringvalue
: String/RegExpvoid
public function filterBy( Function fn
, [Object scope
] )
fn
: Functionscope
: Objectvoid
public function findItemFromChild( HTMLElement node
)
node
: HTMLElementHTMLElement
public function fireEvent( String eventName
, Object... args
)
eventName
: Stringargs
: Object...Boolean
public function getCount()
Number
public function getEl()
Ext.Element
public function getNode( HTMLElement/String/Number nodeInfo
)
nodeInfo
: HTMLElement/String/NumberHTMLElement
public function getNodeData( HTMLElement/Array node
)
node
: HTMLElement/ArrayObject/Array
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 load( Object/String/Function url
, [String/Object params
], [Function callback
], [Boolean discardUrl
] )
url
: Object/String/Functionview.load({
url: "your-url.php",
params: {param1: "foo", param2: "bar"}, // or a URL encoded string
callback: yourFunction,
scope: yourObject, //(optional scope)
discardUrl: false,
nocache: false,
text: "Loading...",
timeout: 30,
scripts: false
});
The only required property is url. The optional properties nocache, text and scripts
are respectively shorthand for disableCaching, indicatorText, and loadScripts and are used to set their associated property on this UpdateManager instance.params
: String/Objectcallback
: FunctiondiscardUrl
: Booleanvoid
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 sort( String property
, [String direction
], [Function sortType
] )
property
: Stringdirection
: StringsortType
: Functionvoid
public function un( String eventName
, Function handler
, [Object scope
] )
eventName
: Stringhandler
: Functionscope
: Objectvoid
public event beforeclick
this
: Ext.Viewindex
: Numbernode
: HTMLElemente
: Ext.EventObjectpublic event beforerender
this
: Ext.JsonViewdata
: Objectpublic 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 load
this
: Ext.JsonViewdata
: Objectresponse
: Objectpublic event loadexception
this
: Ext.JsonViewresponse
: Objectpublic event selectionchange
this
: Ext.Viewselections
: Array