Print Friendly

Class Ext.JsonView

Package:Ext
Class:JsonView
Extends:View
Defined In:JsonView.js
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..."
 });

Properties   -  Methods   -  Events

Public Properties

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

Public Methods

Method Defined By
  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 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 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) : 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)

Public Events

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.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.

Property Details

jsonData

public Object jsonData
The current json data or null
This property is defined by JsonView.

jsonRoot

public String jsonRoot
The root property in the loaded json object that contains the data
This property is defined by JsonView.

selectedClass

public Ext.DomHelper.Template selectedClass
The css class to add to selected nodes
This property is defined by View.

tpl

public Ext.DomHelper.Template tpl
The template used by this View
This property is defined by View.

Constructor Details

JsonView

public function JsonView(String/HTMLElement/Element container, Template tpl, Object config)
Create a new JsonView
Parameters:
  • container : String/HTMLElement/Element
    The container element where the view is to be rendered.
  • tpl : Template
    The rendering template
  • config : Object
    The config object

Method Details

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.
Parameters:
  • object : Object
    The object from which to copy events
Returns:
  • void
This method is defined by Observable.

addListener

public function addListener(String eventName, Function handler, [Object scope], [Object options])
Appends an event handler to this component
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The 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.
    • delegate {String} A simple selector to filter the target or look for a descendant of the target
    • stopEvent {Boolean} True to stop the event. That is stop propagation, and prevent the default action.
    • preventDefault {Boolean} True to prevent the default action
    • stopPropagation {Boolean} True to prevent event propagation
    • normalized {Boolean} False to pass a browser event to the handler function instead of an Ext.EventObject
    • 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)

    Code: 
    el.on('click', this.onClick, this, { single: true, delay: 100, stopEvent : true, forumId: 4 });

    The method also allows for a single argument to be passed which is a config object containing properties which specify multiple handlers.

    Attaching multiple handlers in 1 call
    Code: 

    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:
    Code: 

    el.on({ 'click' : this.onClick, 'mouseover' : this.onMouseOver, 'mouseout' : this.onMouseOut scope: this });
Returns:
  • void
This method is defined by Observable.

clearFilter

public function clearFilter()
Clears the current filter.
Parameters:
  • None.
Returns:
  • void
This method is defined by JsonView.

clearSelections

public function clearSelections([Boolean suppressEvent])
Clear all selections
Parameters:
  • suppressEvent : Boolean
    (optional) true to skip firing of the selectionchange event
Returns:
  • void
This method is defined by View.

filter

public function filter(String property, String/RegExp value)
Filter the data by a specific property.
Parameters:
  • property : String
    A property on your JSON objects
  • value : String/RegExp
    Either string that the property values should start with or a RegExp to test against the property
Returns:
  • void
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.
Parameters:
  • fn : Function
  • scope : Object
    (optional) The scope of the function (defaults to this JsonView)
Returns:
  • void
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:
  • node : HTMLElement
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).
Parameters:
  • eventName : String
  • args : Object...
    Variable number of parameters are passed to handlers
Returns:
  • Boolean
    returns false if any of the handlers return false otherwise it returns true
This method is defined by Observable.

getCount

public function getCount()
Get the number of records in the current JSON dataset
Parameters:
  • None.
Returns:
  • Number
This method is defined by JsonView.

getEl

public function getEl()
Returns the element this view is bound to.
Parameters:
  • None.
Returns:
  • Ext.Element
This method is defined by View.

getNode

public function getNode(HTMLElement/String/Number nodeInfo)
Gets a template node.
Parameters:
  • nodeInfo : HTMLElement/String/Number
    An HTMLElement template node, index of a template node or the id of a template node
Returns:
  • HTMLElement
    The node or null if it wasn't found
This method is defined by View.

getNodeData

public function getNodeData(HTMLElement/Array node)
Returns the JSON object for the specified node(s)
Parameters:
  • node : HTMLElement/Array
    The node or an array of nodes
Returns:
  • Object/Array
    If you pass in an array, you get an array back, otherwise you get the JSON object for the node
This method is defined by JsonView.

getNodes

public function getNodes(Number startIndex, Number endIndex)
Gets a range template nodes.
Parameters:
  • startIndex : Number
  • endIndex : Number
Returns:
  • Array
    An array of nodes
This method is defined by View.

getSelectedIndexes

public function getSelectedIndexes()
Get the indexes of the selected nodes.
Parameters:
  • None.
Returns:
  • Array
This method is defined by View.

getSelectedNodes

public function getSelectedNodes()
Get the currently selected nodes.
Parameters:
  • None.
Returns:
  • Array
    An array of HTMLElements
This method is defined by View.

getSelectionCount

public function getSelectionCount()
Get the number of selected nodes.
Parameters:
  • None.
Returns:
  • Number
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
Parameters:
  • eventName : String
    The name of the event to check for
Returns:
  • Boolean
    True if the event is being listened for, else false
This method is defined by Observable.

indexOf

public function indexOf(HTMLElement/String/Number nodeInfo)
Finds the index of the passed node
Parameters:
  • nodeInfo : HTMLElement/String/Number
    An HTMLElement template node, index of a template node or the id of a template node
Returns:
  • Number
    The index of the node or -1
This method is defined by View.

isSelected

public function isSelected(HTMLElement/Number node)
Returns true if the passed node is selected
Parameters:
  • node : HTMLElement/Number
    The node or node index
Returns:
  • Boolean
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/Function
    The 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&param2=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:
  • void
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)
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The method the event invokes
  • options : Object
    (optional)
Returns:
  • void
This method is defined by Observable.

prepareData

public function prepareData(Array/Object data)
Function to override to reformat the data that is sent to the template for each node.
Parameters:
  • data : Array/Object
    The raw data (array of colData for a data model bound view or a JSON object for an UpdateManager bound view).
Returns:
  • void
This method is defined by View.

purgeListeners

public function purgeListeners()
Removes all listeners for this object
Parameters:
  • None.
Returns:
  • void
This method is defined by Observable.

refresh

public function refresh()
Refreshes the view.
Parameters:
  • None.
Returns:
  • void
This method is defined by JsonView.

refreshNode

public function refreshNode(Number index)
Refresh an individual node.
Parameters:
  • index : Number
Returns:
  • void
This method is defined by View.

removeListener

public function removeListener(String eventName, Function handler, [Object scope])
Removes a listener
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The handler to remove
  • scope : Object
    (optional) The scope (this object) for the handler
Returns:
  • void
This method is defined by Observable.

select

public function select(Array/HTMLElement/String/Number nodeInfo, [Boolean keepExisting], [Boolean suppressEvent])
Selects nodes.
Parameters:
  • nodeInfo : Array/HTMLElement/String/Number
    An 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:
  • void
This method is defined by View.

setStore

public function setStore(Store store)
Changes the data store this view uses and refresh the view.
Parameters:
  • store : Store
Returns:
  • void
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 : String
    A 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:
  • void
This method is defined by JsonView.

un

public function un(String eventName, Function handler, [Object scope])
Removes a listener (shorthand for removeListener)
Parameters:
  • eventName : String
    The type of event to listen for
  • handler : Function
    The handler to remove
  • scope : Object
    (optional) The scope (this object) for the handler
Returns:
  • void
This method is defined by Observable.

Event Details

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 : Ext.View
  • index : Number
    The index of the target node
  • node : HTMLElement
    The target node
  • e : Ext.EventObject
    The raw event object
This event is defined by View.

beforerender

public event beforerender
Fires before rendering of the downloaded json data.
Subscribers will be called with the following parameters:
  • this : Ext.View
  • data : Object
    The json data loaded
This event is defined by JsonView.

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 : Ext.View
  • node : HTMLElement
    The node to be selected
  • selections : Array
    Array of currently selected nodes
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 : Ext.View
  • index : Number
    The index of the target node
  • node : HTMLElement
    The target node
  • e : Ext.EventObject
    The raw event object
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 : Ext.View
  • index : Number
    The index of the target node
  • node : HTMLElement
    The target node
  • e : Ext.EventObject
    The raw event object
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 : Ext.View
  • index : Number
    The index of the target node
  • node : HTMLElement
    The target node
  • e : Ext.EventObject
    The raw event object
This event is defined by View.

load

public event load
* Fires when data is loaded.
Subscribers will be called with the following parameters:
  • this : Ext.View
  • data : Object
    The json data loaded
  • response : Object
    The raw Connect response object
This event is defined by JsonView.

loadexception

public event loadexception
* Fires when loading fails.
Subscribers will be called with the following parameters:
  • this : Ext.View
  • response : Object
    The raw Connect response object
This event is defined by JsonView.

selectionchange

public event selectionchange
Fires when the selected nodes change.
Subscribers will be called with the following parameters:
  • this : Ext.View
  • selections : Array
    Array of the selected nodes
This event is defined by View.
Ext - Copyright © 2006-2007 Ext JS, LLC
All rights reserved.