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代表当前索引。