ajax中xtemplate使用,Ext.XTemplate使用入门

Ext.Template类

Template类主要是功能是生产html片断,例

var t = new Ext.Template(

'

',

'{name:trim}

{value:ellipsis(10)}',

'

'

);

t.append('some-element', {id: 'myid', cls: 'myclass', name: 'foo',

value: 'bar'});

公用方法:

Template( String/Array html )

构造一个Ext.Template对象，参数可以是字符串形式的html代码或它们组成的数组，

Template.from( String/HTMLElement el, Object config ) :

Ext.Template

能过el的value(优先)或innerHTML来构造模板

append( Mixed el, Object values, [Boolean returnElement] ) :

HTMLElement/Ext.Element

insertAfter( Mixed el, Object values, [Boolean returnElement] ) :

HTMLElement/Ext.Element

insertBefore( Mixed el, Object values, [Boolean returnElement] ) :

HTMLElement/Ext.Element

insertFirst( Mixed el, Object values, [Boolean returnElement] ) :

HTMLElement/Ext.Element

这组方法提供由 value产生的html 代码，并添加到dom

做为el的最后一个子节点/下一个兄弟节点/前一个兄弟节点/第一个子节点

values解释参见applyTemplate

apply() : void

applyTemplate( Object values ) : String

apply是applyTemplate的简写，如果参数是数字values可以是一个数组，或者一个象 {id: 'myid', cls:

'myclass', name: 'foo', value: 'bar'}这样的json对象

compile() : Ext.Template

编译模板,替换掉模板中的\=>\\ ,\r\n|\n==>\\n,

'=\',主要是为了js自己处理方便

overwrite( Mixed el, Object values, [Boolean returnElement] )

:

利用values生成html替换el的内容

set( String html, [Boolean compile] ) : Ext.Template

设置模板的html,如果compile为真将调用compile方法

Ext.XTemplate

增强型模板，支持更多功能了，虽然方法不多，但用起来来还真的很麻烦，但并不建议大家学习这样的自定义语法，不如用xslt

另外这个Xtemplate虽然命名空间在Ext之下，但源文件却是放在util目录中的

XTemplate( String/Array html )

XTemplate.from( String/HTMLElement el ) : Ext.XTemplate

apply() : void

applyTemplate( Object values ) : String

compile() : Function

这些方法Ext.Template中都有说明

Ext.EventManager

事件管理者中的大部分方法都在Ext中有定义,主要用于事件管理

addListener( String/HTMLElement el, String eventName, Function

handler,

on( String/HTMLElement el, String eventName, Function handler,

[Object scope], [Object options] ) : void

onDocumentReady( Function fn, [Object scope], [boolean options] ) :

void

removeListener( String/HTMLElement el, String eventName, Function

fn ) :

un( String/HTMLElement el, String eventName, Function fn ) :

Boolean

参见Ext

onWindowResize( Function fn, Object scope, boolean options ) :

void

窗口大小变更时触发

onTextResize( Function fn, Object scope, boolean options ) :

void

活动文本尺寸变更时触发

Ext.EventObject

这两个类都定义在EventManager.js中，分开是为了逻辑上更清晰吧,这个类主要用于描述事件本身，一般用做事件处理方法的参数

另外这个害定义了一些键值常量，比ascii码好记

例

function handleClick(e){ // 这儿的e就是一个EventObject对象

e.preventDefault();

var target =

e.getTarget();

...

}

var myDiv = Ext.get("myDiv");

myDiv.on("click", handleClick);

//or

Ext.EventManager.on("myDiv", 'click', handleClick);

Ext.EventManager.addListener("myDiv", 'click', handleClick);

getCharCode() : Number

getKey() : Number

在非webkit|khtml类型网页中这两个方法是一样的，得到按键的值

getPageX() : Number

getPageY() : Number

getXY() : Array

得到事件坐标

getRelatedTarget() : HTMLElement

得到关联目标?我总是得到null

getTarget( [String selector], [Number/Mixed maxDepth], [Boolean

returnEl] ) :

如果没有定义selector则直接返回target属性,如果定义了selector，则利用selector寻找祖先节点

getTime() : Number

得到事件发生的时间?

getWheelDelta() : Number

应该是个过时的方法，反正在ie和火狐下都不知道做什么用的,原意应该是得到鼠标的按键信息？

hasModifier() : Boolean

事件发生时是否同时按下了ctrl/alt/shift键之一？

preventDefault() : void

阻止浏览器的默认事件？

stopEvent() : void

preventDefault+stopPropagation

stopPropagation() : void

阻止事件冒泡

within( Mixed el, [Boolean related] ) : Boolean

如果事件的目标是el或者它的子节点将返回真

Ext.CompositeElement类

基础的复合元素类,为容器中每个元素创建一个Ext.Element对象

虽然不是继承自Ext.Element，但事实上它几乎支持Element类的所有方法

例:

var els = Ext.select("#some-el div.some-class", true);

els.setWidth(100);

add( String/Array els ) : CompositeElement

添加 css选择器els匹配的元素 或 元素组成的数组 到当前对象

clear() : void

清除所有元素

contains() : Boolean

应该是contains(Mixed el):Boolean,当前复合元素中是否含有el

each( Function fn, [Object scope] ) : CompositeElement

通过el,this,index参数为每个元素调用fn

fill( String/Array els ) : CompositeElement

clear()& add(els)

filter( String selector ) : CompositeElement

过滤

first() : Ext.Element

第一个元素

getCount() : Number

//元素的数量

indexOf() : Boolean

同contains一样应该有个Mixed参数

item( Number index ) : Ext.Element

第index个元素

last() : Ext.Element

最后一个元素

removeElement( Mixed el, [Boolean removeDom] ) :

CompositeElement

删除el元素

replaceElement( Mixed el, Mixed replacement, [Boolean

domReplace] ) : CompositeElement

替换

Ext.CompositeElementLite

由Ext.CompositeElement继承而来，重写了一些方法，但没看出与父类有什么不同

Ext.XTemplate的语法

Ext.XTemplate是Ext中关于页面模板的一个组件。用来将数据和模板组合出最终的html。所谓数据指的是javascript的对象。EMP在loadEntityToPage中使用了这个组件。举例如下；

1//javascript，我们要展现的javascript对象，这个对象一般来说是从后台取回来的

2

3//这是我的javascript对象表示

4{

5 id:"1232132132dfasf121r",

6 name:"zcg",

7 age:13,

8 goodPerson:true, //好人一个

9 head:{ 10 size:15,

11 type:"smart" //脑袋是聪明的

12 }

13 hands:

14 [

15 {

16 id:"123",

17 type:"left" //左手

18 }

19 {

20 id:"456",

21 type:"right"

22 }

23 ]

24}

//html 模板

1

2 编号：{id}

3 名字：{age}

4

在模板中，用“{}”括起来的内容，被当作是数据对象的一个属性。例如{id}，会被替换成为数据对象的id，以此类推。

问题来了，按照上面的例子，如果你在模板中写一个{head.type}，想把脑袋的类型也显示出来，这时候会发现出错了。原因是模板中不支持用{a.b}的方式表示嵌套属性。那么怎么办呢。分为两种情况：

如果你从后台取回来的数据只有一个，那么这样写：{[values.head.type]}。

如果你从后台取回来的数据不只一个：那么这样写：{[values[xindex].head.type}}

语法解释：“{[]}”括起来的东西会被当作javascript执行，其中有几个特殊的字符，values代表数据对象，如果数据对象是数组，那么用xindex代表当前索引。