Class Ext.View

Package:	Ext
Class:	View
Extends:	Observable
Subclasses:	JsonView
Defined In:	View.js

创建某个元素的“视图（View）”，这个“视图”可基于Data Model（数据模型）或 UpdateManager，并由 DomHelper提供模板的支持。选区模式支持单选或多选。
将Data Model绑定到 View：

var store = new Ext.data.Store(...);

 var view = new Ext.View("my-element",
 '<div id="{0}">{2} - {1}</div>', // 自动创建模板
 {
 singleSelect: true,
 selectedClass: "ydataview-selected",
 store: store
 });

 // 是否侦听节点的单击事件？
 view.on("click", function(vw, index, node, e){
 alert('Node "' + node.id + '" at index: ' + index + " was clicked.");
 });

 // 加载XML数据
 dataModel.load("foobar.xml");

关于创建 JSON/UpdateManager view 的例子，可见 Ext.JsonView 。

注意：模板的根节点必须是单一节点。由于IE插入的限制和Opera事件上报的失效,表格/行（table/row）的实现可能渲染失真。

属性 - 方法 - 事件

公共属性

属性		定义对象
	selectedClass : Ext.DomHelper.Template	View
	显示节点已选取的CSS样式类	View
	tpl : Ext.DomHelper.Template	View
	渲染模板对象或是创建模板的字符串	View

公共方法

方法		定义对象
	View (`String/HTMLElement/Element container`, `String/DomHelper.Template tpl`, `Object config`)	View
	创建一个 View 对象	View
	addEvents (`Object object`) : void	Observable
	将对象中没有的事件从给出的对象中复制过来。	Observable
	addListener (`String eventName`, `Function handler`, [`Object scope`], [`Object options`]) : void	Observable
	为该组件加入事件处理器函数	Observable
	clearSelections ([`Boolean suppressEvent`]) : void	View
	Clear all selections	View
	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
	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
	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
	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	View
	Refreshes the view.	View
	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
	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
	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
	selectionchange : (`Ext.View this`, `Array selections`)	View
	Fires when the selected nodes change.	View

属性详情

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.

构造函数

View

public function View(String/HTMLElement/Element container, String/DomHelper.Template tpl, Object config)

Create a new View

参数：

container : String/HTMLElement/Element
The container element where the view is to be rendered.
tpl : String/DomHelper.Template
The rendering template or a string to create a template with
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 .

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.

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 .

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.

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.

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

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.

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.

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.

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.