Shortcut class to create a JSON + 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 |
Copies any events from the passed object onto this object if they do not already exist. The passed object
must also ... |
|
addListener(String eventName , Function handler , [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 is currently listening 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 request, loading the JSON from the response. If params are specified it uses POST, otherwise it use... |
|
on(String eventName , Function handler , [Object options ]) : 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 |
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.View 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.View this , Object data , Object response ) |
JsonView |
Fires when data is loaded. |
|
loadexception : (Ext.View 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
)
Copies any events from the passed object onto this object if they do not already exist. The passed object
must also inherit from Observable for this method to have any effect.
addListener
public function addListener(String eventName
, Function handler
, [Object options
])
Appends an event handler to this component
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.
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 is currently listening 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 request, loading 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 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 options
])
Appends an event handler to this element (shorthand for addListener)
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.
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)