EXT核心API详解47文档格式.docx
- 文档编号:19411930
- 上传时间:2023-01-06
- 格式:DOCX
- 页数:13
- 大小:22.11KB
EXT核心API详解47文档格式.docx
《EXT核心API详解47文档格式.docx》由会员分享,可在线阅读,更多相关《EXT核心API详解47文档格式.docx(13页珍藏版)》请在冰豆网上搜索。
创建一个新的DOM元素并做为第一个子节点添加到el(看了这个insertFirst,建议将append取一个别名insertLast:
))
insertHtml(Stringwhere,HTMLElementel,Stringhtml):
HTMLElement
where可选值beforeBegin/afterBegin/beforeEnd/afterEnd
将html代码插入到el附近,
markup(Objecto):
String
返回DOM对象o对应的html代码
overwrite(Mixedel,Object/Stringo,[BooleanreturnElement]):
创建一个新的DOM元素o并用它重写el的内容
Ext.Template类
Template类主要是功能是生产html片断,例
vart=newExt.Template(
'
<
div>
'
span>
{name:
trim}{value:
ellipsis(10)}<
/span>
/div>
);
t.append('
some-element'
{id:
myid'
cls:
myclass'
name:
foo'
value:
bar'
});
公用方法:
Template(String/Arrayhtml)
构造一个Ext.Template对象,参数可以是字符串形式的html代码或它们组成的数组,
Template.from(String/HTMLElementel,Objectconfig):
能过el的value(优先)或innerHTML来构造模板
append(Mixedel,Objectvalues,[BooleanreturnElement]):
insertAfter(Mixedel,Objectvalues,[BooleanreturnElement]):
insertBefore(Mixedel,Objectvalues,[BooleanreturnElement]):
insertFirst(Mixedel,Objectvalues,[BooleanreturnElement]):
这组方法提供由value产生的html代码,并添加到dom做为el的最后一个子节点/下一个兄弟节点/前一个兄弟节点/第一个子节点
values解释参见applyTemplate
apply():
applyTemplate(Objectvalues):
apply是applyTemplate的简写,如果参数是数字values可以是一个数组,或者一个象{id:
}这样的json对象
compile():
编译模板,替换掉模板中的\=>
\\,\r\n|\n==>
\\n,'
=\'
主要是为了js自己处理方便
overwrite(Mixedel,Objectvalues,[BooleanreturnElement]):
利用values生成html替换el的内容
set(Stringhtml,[Booleancompile]):
设置模板的html,如果compile为真将调用compile方法
EXT核心API详解(五)-
EventManager/EventObject/CompositeElement
Ext.EventManager
事件管理者中的大部分方法都在Ext中有定义,主要用于事件管理
addListener(String/HTMLElementel,StringeventName,Functionhandler,
on(String/HTMLElementel,StringeventName,Functionhandler,[Objectscope],[Objectoptions]):
onDocumentReady(Functionfn,[Objectscope],[booleanoptions]):
removeListener(String/HTMLElementel,StringeventName,Functionfn):
un(String/HTMLElementel,StringeventName,Functionfn):
参见Ext
onWindowResize(Functionfn,Objectscope,booleanoptions):
窗口大小变更时触发
onTextResize(Functionfn,Objectscope,booleanoptions):
活动文本尺寸变更时触发
Ext.EventObject
这两个类都定义在EventManager.js中,分开是为了逻辑上更清晰吧,这个类主要用于描述事件本身,一般用做事件处理方法的参数
另外这个害定义了一些键值常量,比ascii码好记
例
functionhandleClick(e){//这儿的e就是一个EventObject对象
e.preventDefault();
vartarget=e.getTarget();
...
}
varmyDiv=Ext.get("
myDiv"
myDiv.on("
click"
handleClick);
//or
Ext.EventManager.on("
'
click'
Ext.EventManager.addListener("
getCharCode():
getKey():
在非webkit|khtml类型网页中这两个方法是一样的,得到按键的值
getPageX():
getPageY():
getXY():
得到事件坐标
getRelatedTarget():
得到关联目标?
我总是得到null
getTarget([Stringselector],[Number/MixedmaxDepth],[BooleanreturnEl]):
如果没有定义selector则直接返回target属性,如果定义了selector,则利用selector寻找祖先节点
getTime():
得到事件发生的时间?
getWheelDelta():
Number
应该是个过时的方法,反正在ie和火狐下都不知道做什么用的,原意应该是得到鼠标的按键信息?
hasModifier():
事件发生时是否同时按下了ctrl/alt/shift键之一?
preventDefault():
阻止浏览器的默认事件?
stopEvent():
preventDefault+stopPropagation
stopPropagation():
阻止事件冒泡
within(Mixedel,[Booleanrelated]):
如果事件的目标是el或者它的子节点将返回真
Ext.CompositeElement类
基础的复合元素类,为容器中每个元素创建一个Ext.Element对象
虽然不是继承自Ext.Element,但事实上它几乎支持Element类的所有方法
例:
varels=Ext.select("
#some-eldiv.some-class"
true);
els.setWidth(100);
add(String/Arrayels):
CompositeElement
添加css选择器els匹配的元素或元素组成的数组到当前对象
clear():
清除所有元素
contains():
应该是contains(Mixedel):
Boolean,当前复合元素中是否含有el
each(Functionfn,[Objectscope]):
通过el,this,index参数为每个元素调用fn
fill(String/Arrayels):
clear()&
add(els)
filter(Stringselector):
过滤
first():
Ext.Element
第一个元素
getCount():
//元素的数量
indexOf():
同contains一样应该有个Mixed参数
item(Numberindex):
第index个元素
last():
最后一个元素
removeElement(Mixedel,[BooleanremoveDom]):
删除el元素
replaceElement(Mixedel,Mixedreplacement,[BooleandomReplace]):
替换
Ext.CompositeElementLite
由Ext.CompositeElement继承而来,重写了一些方法,但没看出与父类有什么不同
EXT核心API详解(六)-Ext.Fx
Ext.Fx类
对于我这样的懒鬼而言,Fx类是核心类库中最激动人心的一个类,它不是最重要的,却是最实用的一个类
定义了一些常用的特效方法,不妨自己多动手试试下面的方法,很有趣的
fadeIn([Objectoptions]):
渐显options参数有以下属性
callback:
Function
完成后的回叫方法
scope:
Object
目标
easing:
String
行为方法默认值是:
easeOut,可选值在ext_base中找到,但没有说明,以下内容从yahooui中找到的
easeNone:
匀速
easeIn:
开始慢且加速
easeOut:
开始快且减速
easeBoth:
开始慢且减速
easeInStrong:
开始慢且加速,t的四次方
easeOutStrong:
开始快且减速,t的四次方
easeBothStrong:
开始慢且减速,t的四次方
elasticIn:
elasticOut:
elasticBoth:
backIn:
backOut:
backBoth:
bounceIn:
bounceOut:
bounceBoth:
太多,慢慢体会吧
afterCls:
事件完成后元素的样式
duration:
Number
事件完成时间(以秒为单位)
remove:
Boolean
事件完成后元素销毁?
useDisplay:
隐藏元素是否使用display或visibility属性?
afterStyle.:
String/Object/Function
事件完成后应用样式
block:
块状化?
concurrent:
顺序还是同时执行?
stopFx:
当前效果完成后随合的效果是否将停止和移除
fadeOut([Objectoptions]):
渐隐fadeOut和fadeIn能使用一个特别的endOpacity属性以指示结束时的透明度
el.fadeIn({duration:
5,endOpacity:
0.7});
frame([Stringcolor],[Numbercount],[Objectoptions]):
边框变亮扩展然后渐隐
el.frame("
ff0000"
10,{duration:
3})
ghost([Stringanchor],[Objectoptions]):
渐渐滑出视图,anchor定义
tl
左上角(默认)
t
上居中
tr
右上角
l
左边界的中央
c
居中
r
右边界的中央
bl
左下角
b
下居中
br
右下角
el.ghost('
b'
{
easing:
easeOut'
duration:
.5
remove:
false,
useDisplay:
false
hasActiveFx():
指示元素是否当前有特效正在活动
hasFxBlock():
是否有特效阻塞了
highlight([Stringcolor],[Objectoptions]):
高亮显示当前元素
el.highlight("
ffff9c"
attr:
"
background-color"
//canbeanyvalidCSSproperty(attribute)thatsupportsacolorvalue
endColor:
(currentcolor)or"
ffffff"
easeIn'
1
pause(Numberseconds):
暂停
puff([Objectoptions]):
吹,吹,吹个大气球,元素渐大并隐没
el.puff({
.5,
scale(Numberwidth,Numberheight,[Objectoptions]):
缩放
el.scale(
[element'
swidth],
sheight],{
.35
sequenceFx()
排队特效
shift(Objectoptions):
位移,并可重置大小,透明度等
el.shift({
width:
height:
sheight],
x:
sxposition],
y:
syposition],
opacity:
sopacity],
slideIn([Stringanchor],[Objectoptions]):
slideOut([Stringanchor],[Objectoptions]):
滑入/滑出
el.slideIn('
t'
stopFx():
停止特效
switchOff([Objectoptions]):
收起并隐没
el.switchOff({
.3,
syncFx():
异步特效
EXT核心API详解(七)-KeyNav/KeyMap/JSON/Format/..
Ext.KeyNav
Ext的keyNav类能为Ext.Element元素提供简单的按键处理方法
varel=Ext.get("
textarea"
newExt.KeyNav(el,{
left"
:
function(e){
alert("
leftkeydown"
},
scope:
el
}
它的行为与KeyMap类似,但功能比KeyMap要弱小的多,只能处理以下已定义键
enter/left/right/up/down/tab/esc/pageUp/pageDown/del/home/end
同情一下KeyNav
方法只有三个,不用多解释
KeyNav(Mixedel,Objectconfig)
disable():
enable():
Ext.KeyMap类
则强悍的多,其中最重要的当然是对按键的定义更灵活
上例用KeyMap来写可能是
newExt.KeyMap(el,{
key:
Ext.EventObject.LEFT,
fn:
方法
KeyMap(Mixedel,Objectconfig,[StringeventName])
构造,与KeyNav也相似,但更灵活
它是{
key:
String/Array,
//可以是数字,字符,也可以是Ext.EventObject.LEFT这样的助记符,还能是他们组成的数组
shift:
Boolean,
//ctrl键按下?
ctrl:
Boolean,
alt:
fn:
Function,
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- EXT 核心 API 详解 47