Shortcut class to create a JSON +
Ext.UpdateManager template view. Usage:
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..."
});
|
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) |
|
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. |
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:
clearFilter
public function clearFilter()
Clears the current filter.
This method is defined by JsonView.
clearSelections
public function clearSelections( [Boolean suppressEvent
] )
This method is defined by
View.
filter
public function filter( String property
, String/RegExp value
)
Filter the data by a specific property.
Parameters:
property
: StringA property on your JSON objects
value
: String/RegExpEither string that the property values
should start with, or a RegExp to test against the property
Returns:
This method is defined by JsonView.
filterBy
public function filterBy( Function fn
, [Object scope
] )
Filter by a function. The passed function will be called with each
object in the current dataset. If the function returns true the value is kept,
otherwise it is filtered.
This method is defined by JsonView.
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).
getCount
public function getCount()
Get the number of records in the current JSON dataset
This method is defined by JsonView.
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.
getNodeData
public function getNodeData( HTMLElement/Array node
)
Returns the JSON object for the specified node(s)
This method is defined by JsonView.
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.
load
public function load( Object/String/Function url
, [String/Object params
], [Function callback
], [Boolean discardUrl
] )
Performs an async HTTP request, and loads the JSON from the response. If
params are specified it uses POST, otherwise it uses GET.
Parameters:
url
: Object/String/FunctionThe URL for this request, or a function to call to get the URL, or a config object containing any of the following options:
view.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/Object(optional) The parameters to pass, as either a URL encoded string "param1=1¶m2=2" or an object {param1: 1, param2: 2}
callback
: Function(optional) Callback when transaction is complete - called with signature (oElement, bSuccess)
discardUrl
: Boolean(optional) By default when you execute an update the defaultUrl is changed to the last used URL. If true, it will not store the URL.
Returns:
This method is defined by JsonView.
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 JsonView.
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.
sort
public function sort( String property
, [String direction
], [Function sortType
] )
Sorts the data for this view and refreshes it.
Parameters:
property
: StringA property on your JSON objects to sort on
direction
: String(optional) "desc" or "asc" (defaults to "asc")
sortType
: Function(optional) A function to call to convert the data to a sortable value.
Returns:
This method is defined by JsonView.
un
public function un( String eventName
, Function handler
, [Object scope
] )
Removes a listener (shorthand for removeListener)