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..."
 });

属性 - 方法 - 事件

公共属性

属性		定义对象
	jsonData : Object	JsonView
	The current json data or null	JsonView
	jsonRoot : String	JsonView
	The root property in the loaded json object that contains the data	JsonView
	selectedClass : Ext.DomHelper.Template	View
	The css class to add to selected nodes	View
	tpl : Ext.DomHelper.Template	View
	The template used by this View	View

公共方法

方法		定义对象
	JsonView(`String/HTMLElement/Element container`, `Template tpl`, `Object config`)	JsonView
	Create a new JsonView	JsonView
	addEvents(`Object object`) : void	Observable
	将对象中没有的事件从给出的对象中复制过来。	Observable
	addListener(`String eventName`, `Function handler`, [`Object scope`], [`Object options`]) : void	Observable
	为该组件加入事件处理器函数	Observable
	clearFilter() : void	JsonView
	Clears the current filter.	JsonView
	clearSelections([`Boolean suppressEvent`]) : void	View
	Clear all selections	View
	filter(`String property`, `String/RegExp value`) : void	JsonView
	Filter the data by a specific property.	JsonView
	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...	JsonView
	findItemFromChild(`HTMLElement node`) : HTMLElement	View
	Returns the template node the passed child belongs to or null if it doesn't belong to one.	View
	fireEvent(`String eventName`, `Object... args`) : Boolean	Observable
	触发指定的事件, 并将参数传入（至少要有事件名称）。	Observable
	getCount() : Number	JsonView
	Get the number of records in the current JSON dataset	JsonView
	getEl() : Ext.Element	View
	Returns the element this view is bound to.	View
	getNode(`HTMLElement/String/Number nodeInfo`) : HTMLElement	View
	Gets a template node.	View
	getNodeData(`HTMLElement/Array node`) : Object/Array	JsonView
	Returns the JSON object for the specified node(s)	JsonView
	getNodes(`Number startIndex`, `Number endIndex`) : Array	View
	Gets a range template nodes.	View
	getSelectedIndexes() : Array	View
	Get the indexes of the selected nodes.	View
	getSelectedNodes() : Array	View
	Get the currently selected nodes.	View
	getSelectionCount() : Number	View
	Get the number of selected nodes.	View
	hasListener(`String eventName`) : Boolean	Observable
	检查该对象是否拥有指定事件的侦听器	Observable
	indexOf(`HTMLElement/String/Number nodeInfo`) : Number	View
	Finds the index of the passed node	View
	isSelected(`HTMLElement/Number node`) : Boolean	View
	Returns true if the passed node is selected	View
	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...	JsonView
	on(`String eventName`, `Function handler`, [`Object options`]) : void	Observable
	为该组件加入事件处理器函数, addListener 的简写方式	Observable
	prepareData(`Array/Object data`) : void	View
	Function to override to reformat the data that is sent to the template for each node.	View
	purgeListeners() : void	Observable
	从对象身上移除所有的侦听器	Observable
	refresh() : void	JsonView
	Refreshes the view.	JsonView
	refreshNode(`Number index`) : void	View
	Refresh an individual node.	View
	removeListener(`String eventName`, `Function handler`, [`Object scope`]) : void	Observable
	移除侦听器	Observable
	select(`Array/HTMLElement/String/Number nodeInfo`, [`Boolean keepExisting`], [`Boolean suppressEvent`]) : void	View
	Selects nodes.	View
	setStore(`Store store`) : void	View
	Changes the data store this view uses and refresh the view.	View
	sort(`String property`, [`String direction`], [`Function sortType`]) : void	JsonView
	Sorts the data for this view and refreshes it.	JsonView
	un(`String eventName`, `Function handler`, [`Object scope`]) : void	Observable
	移除侦听器, removeListener 的简写方式	Observable

公共事件

事件		定义对象
	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.	View
	beforerender : (`Ext.View this`, `Object data`)	JsonView
	Fires before rendering of the downloaded json data.	JsonView
	beforeselect : (`Ext.View this`, `HTMLElement node`, `Array selections`)	View
	Fires before a selection is made. If any handlers return false, the selection is cancelled.	View
	click : (`Ext.View this`, `Number index`, `HTMLElement node`, `Ext.EventObject e`)	View
	Fires when a template node is clicked.	View
	contextmenu : (`Ext.View this`, `Number index`, `HTMLElement node`, `Ext.EventObject e`)	View
	Fires when a template node is right clicked.	View
	dblclick : (`Ext.View this`, `Number index`, `HTMLElement node`, `Ext.EventObject e`)	View
	Fires when a template node is double clicked.	View
	load : (`Ext.View this`, `Object data`, `Object response`)	JsonView
	* Fires when data is loaded.	JsonView
	loadexception : (`Ext.View this`, `Object response`)	JsonView
	* Fires when loading fails.	JsonView
	selectionchange : (`Ext.View this`, `Array selections`)	View
	Fires when the selected nodes change.	View

属性详情

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.

构造函数

JsonView

public function JsonView(String/HTMLElement/Element container, Template tpl, Object config)

Create a new JsonView

参数：

container : String/HTMLElement/Element
The container element where the view is to be rendered.
tpl : Template
The rendering template
config : Object
The config object

方法详情

addEvents

public function addEvents(Object object)

将对象中没有的事件从给出的对象中复制过来。给出的对象必须也继承于 Observable 对象此方法才会有效果。

参数：

object : Object
要复制事件的源对象

返回：

void

This method is defined by Observable.

addListener

public function addListener(String eventName, Function handler, [Object scope], [Object options])

为组件添加一个事件监听器

参数：

eventName : String
侦听事件的类型
handler : Function
事件调用的方法
scope : Object
（可选）处理函数执行的作用域。处理函数 "this" 的内容。
options : Object
（可选）一个包含处理设置属性的对象。可以包含下列的属性：
- scope {Object} 处理函数执行的作用域。处理函数 "this" 的内容。
- delegate {String} 一个简单的选择器用来过滤目标或查找目标的子节点。
- stopEvent {Boolean} 值为 True 时用来中止事件。那样将中止传播，并防止缺省动作。
- preventDefault {Boolean} 值为 True 时用来防止缺省动作。
- stopPropagation {Boolean} 值为 True 时用来中止事件传播。
- normalized {Boolean} 值为 False 时向处理函数传递浏览器事件用以代替 Ext.EventObject 对象。
- delay {Number} 当事件触发后启用处理函数的延迟微秒数。
- single {Boolean} 值为 True 时将添加一个处理函数用来处理下个触发的事件，并在处理完后移除。
- buffer {Number} 使处理函数计划在由 Ext.util.DelayedTask 指定的微秒数后执行。如果事件在延迟期间再次触发，原来的处理函数将不再启动，而是由新的计划代替。
组合选项
使用选项参数可以组合不同类型的监听器：

下面是一个标准的、延迟执行的、一次性的监听器，将会自动停止事件并传递一个自定义的参数(forumId)
代码：
```
el.on('click', this.onClick, this, { single: true, delay: 100, stopEvent : true, forumId: 4 });
```
这个方法也允许传递的单个参数是一个包含多个指定处理函数的设置对象。

一次调用多个处理函数
代码：
```
el.on({ 'click' : { fn: this.onClick scope: this, delay: 100 }, 'mouseover' : { fn: this.onMouseOver scope: this }, 'mouseout' : { fn: this.onMouseOut scope: this } });
```
或者简写为：
代码：
```
el.on({ 'click' : this.onClick, 'mouseover' : this.onMouseOver, 'mouseout' : this.onMouseOut scope: this });
```

返回：

void

This method is defined by Observable.

clearFilter

public function clearFilter()

Clears the current filter.

参数：

无。

返回：

void

This method is defined by JsonView.

clearSelections

public function clearSelections([Boolean suppressEvent])

Clear all selections

参数：

suppressEvent : Boolean
（可选） true to skip firing of the selectionchange event

返回：

void

This method is defined by View.

filter

public function filter(String property, String/RegExp value)

Filter the data by a specific property.

参数：

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

返回：

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.

参数：

fn : Function
scope : Object
（可选） The scope of the function (defaults to this JsonView)

返回：

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.

参数：

node : HTMLElement

返回：

HTMLElement
The template node

This method is defined by View.

fireEvent

public function fireEvent(String eventName, Object... args)

触发指定的事件并给出参数（至少要有事件名称）。

参数：

eventName : String
args : Object...
传入处理函数的参数

返回：

Boolean
如果任何处理函数返回 false 则返回值为 false, 否则返回 true。

This method is defined by Observable.

getCount

public function getCount()

Get the number of records in the current JSON dataset

参数：

无。

返回：

Number

This method is defined by JsonView.

getEl

public function getEl()

Returns the element this view is bound to.

参数：

无。

返回：

Ext.Element

This method is defined by View.

getNode

public function getNode(HTMLElement/String/Number nodeInfo)

Gets a template node.

参数：

nodeInfo : HTMLElement/String/Number
An HTMLElement template node, index of a template node or the id of a template node

返回：

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)

参数：

node : HTMLElement/Array
The node or an array of nodes

返回：

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.

参数：

startIndex : Number
endIndex : Number

返回：

Array
An array of nodes

This method is defined by View.

getSelectedIndexes

public function getSelectedIndexes()

Get the indexes of the selected nodes.

参数：

无。

返回：

Array

This method is defined by View.

getSelectedNodes

public function getSelectedNodes()

Get the currently selected nodes.

参数：

无。

返回：

Array
An array of HTMLElements

This method is defined by View.

getSelectionCount

public function getSelectionCount()

Get the number of selected nodes.

参数：

无。

返回：

Number

This method is defined by View.

hasListener

public function hasListener(String eventName)

检查该对象是否拥有指定事件的侦听器

参数：

eventName : String
查询事件之名称

返回：

Boolean
值为 True 值表示事件监听器存在, 否则值为 false。

This method is defined by Observable.

indexOf

public function indexOf(HTMLElement/String/Number nodeInfo)

Finds the index of the passed node

参数：

nodeInfo : HTMLElement/String/Number
An HTMLElement template node, index of a template node or the id of a template node

返回：

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

参数：

node : HTMLElement/Number
The node or node index

返回：

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.

参数：

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
（可选） The parameters to pass as either a url encoded string "param1=1&param2=2" or an object {param1: 1, param2: 2}
callback : Function
（可选） Callback when transaction is complete - called with signature (oElement, bSuccess)
discardUrl : Boolean
（可选） By default when you execute an update the defaultUrl is changed to the last used url. If true, it will not store the url.

返回：

void

This method is defined by JsonView.

on

public function on(String eventName, Function handler, [Object options])

为该组件加入事件处理器函数, addListener 的简写方式

参数：

eventName : String
侦听事件的类型
handler : Function
事件调用的方法
options : Object
（可选）

返回：

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.

参数：

data : Array/Object
The raw data (array of colData for a data model bound view or a JSON object for an UpdateManager bound view).

返回：

void

This method is defined by View.

purgeListeners

public function purgeListeners()

从对象身上移除所有的侦听器

参数：

无。

返回：

void

This method is defined by Observable.

refresh

public function refresh()

Refreshes the view.

参数：

无。

返回：

void

This method is defined by JsonView.

refreshNode

public function refreshNode(Number index)

Refresh an individual node.

参数：

index : Number

返回：

void

This method is defined by View.

removeListener

public function removeListener(String eventName, Function handler, [Object scope])

移除侦听器

参数：

eventName : String
侦听事件的类型
handler : Function
删除的处理函数
scope : Object
（可选） The scope (this object) for the handler

返回：

void

This method is defined by Observable.

select

public function select(Array/HTMLElement/String/Number nodeInfo, [Boolean keepExisting], [Boolean suppressEvent])

Selects nodes.

参数：

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
（可选） true to keep existing selections
suppressEvent : Boolean
（可选） true to skip firing of the selectionchange vent

返回：

void

This method is defined by View.

setStore

public function setStore(Store store)

Changes the data store this view uses and refresh the view.

参数：

store : Store

返回：

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.

参数：

property : String
A property on your JSON objects to sort on
direction : String
（可选） desc or asc (defaults to asc)
sortType : Function
（可选） A function to call to convert the data to a sortable value.

返回：

void

This method is defined by JsonView.

un

public function un(String eventName, Function handler, [Object scope])

移除侦听器, removeListener 的简写方式

参数：

eventName : String
侦听事件的类型
handler : Function
删除的处理函数
scope : Object
（可选） The scope (this object) for the handler

返回：

void

This method is defined by Observable.

事件详情

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.