Ext JS学习第十三天 Ext基础之 Ext.Element

•Ext.Element提供了181个方法,嗯,还没完,只是在4.1版本中是这样,最新的4.2版本貌似又增加了新方法,可谓是相当丰富给力。那么根据操作类型基本可以分为查询系、DOM操作系、样式操作系、对齐、尺寸、定位、拖放、滚动、键盘、动画系等方法供开发人员使用。由于API是英文版本,我特意花了一个下午时间把他们整理了出来,共同学们参考使用!!
-------------------------------------------------------------------------------------------------
•查询系方法:
•contains:判断元素是否包含另一个元素
•child:从元素的直接子元素中选择与选择符匹配的元素
•down:选择与选择符匹配的元素的子元素
•first:选择元素第一个子元素
•findParent:查找与简单选择符匹配的元素的父元素
•findParentNode、up:查找与简单选择符匹配的元素的父元素
•is:判断元素是否匹配选择符
•last:选择元素的最后一个子元素
•next:选择元素同层的下一个元素
•prew:选择元素同层的上一个元素
•parent:返回元素的父元素
•Ext.query:根据选择符获取元素
•Ext.select:根据选择符获取元素集合
-------------------------------------------------------------------------------------------------------------------------------
•DOM操作系方法:
•appendTo:将当前元素追加到指定元素中
•appendChild:在当前元素中追加元素
•createChild:在元素中插入由DomHelper对象创建的元素
•inertAfter:将元素插入到指定元素之后
•inertBefore:将元素插入到指定元素之前
•inertSibling:在当前元素前或后插入(或创建)元素(同层)。
•insertHtml:在当前元素内插入HTML代码
•remove:移除当前元素
•replace:使用当前元素替换指定元素
•replaceWith:使用创建的元素替换当前的元素
•wrap:创建一个元素,并将当前元素包裹起来。
----------------------------------------------------------------------------------------------------------------------------
•样式操作系方法(一):
•addCls:增加CSS样式到元素,重复的样式会自动过滤
•applyStyles:设置元素的style属性
•setStyle:为元素设置样式
•getStyle:返回元素的当前样式和计算样式
•getStyleSize:返回元素的样式尺寸
•setOpacity:设置不透明度
•clearOpacity:;清理不透明度设置
•getColor:返回CSS颜色属性的值,返回值为6位数组的16进制颜色值
•boxWrap:使用box.Markup定义的HTML代码包装元素
------------------------------------------------------------------------------------------------------------------------------------------------
•样式操作系方法(二):
•addClsOnClick添加样式当点击该元素的时候
•addClsOnOver添加样式当鼠标移动到元素上的时候
•getMargin:返回值具有top、left、right、bottom属性的对象,属性值为响应的元素margin值。
•removeCls:删除元素的样式
•replaceCls:替换元素的样式
•set:设置元素属性
•radioCls:为当前元素添加样式,并删除其兄弟节点的元素
•unituzeBox:将表示margin大小的对象转换为字符串
-------------------------------------------------------------------------------------------------------------------------------------------------
•对齐操作系方法:
•alignTo:将当前元素对齐到另外一个元素。定位位置的选择是基于所对齐的元素的位置(9个定位点tl、t、tr、l、c、r、bl、b、br)。
•anchorTo:当窗口调整大小时,将当前元素锚到指定元素并重新调整
•removeAnchor:移除当前元素的任何锚定位
------------------------------------------------------------------------------------------------------------------------------------------------
•尺寸大小操作系方法(一):
•setHeight:设置元素宽度
•setWidth:设置元素高度
•setSize:设置元素大小
•cilp:存储元素当前的overflow设置并裁剪溢出。
•unlip:在clip被调用前将裁剪值(溢出)还原为原始值
•getDocumentWidth:返回文档宽度
•getDocumentHeight:返回文档高度
•getFrameWidth:返回合计了padding和border的宽度
•getHeight:返回offsetHeight值
•getWidth:返回offsetWidth值
•getPadding:返回padding的宽度
•getSize:返回元素的大小
----------------------------------------------------------------------------------------------------------------------------------------------------
•尺寸大小操作系方法(二):
•getTextWidth:返回文本宽度
•getViewportHeight:返回窗口的可视高度
•getViewportWidth:返回窗口的可视宽度
•getViewSize:返回元素可以用来放置内容的区域大小
•getBorderWidth:返回边界宽度
•getComputedWidth:返回计算出来的CSS宽度
•getComputedHeight:返回计算出来的CSS高度
•isBorderBox:主要用于检测盒子模型,与IE6、7有关
----------------------------------------------------------------------------------------------------------------------------------------------------
•定位系方法(一):
•clearPositioning:当文档加载完成后,清理定位回到默认值
•fromPoint:返回在建瓯的自拍呢的顶层元素
•getBottom:返回右下角的Y坐标
•getBox:返回一个包含元素位置的对象,对象包括元素左上角的坐标值、右下角的坐标值、宽度和高度。
•getCenterXY:返回元素的当前坐标
•getLeft:返回一个包含元素位置的对象
•getPositioning:返回一个包含CSS位置属性的对象
•getRegin:返回元素所在区域
•getRight:返回元素的右边X坐标
•getTop:返回元素顶部Y坐标
•getViewRegion:返回元素的内容区域
•getX:返回元素当前的X坐标
•getY:返回元素当前的Y坐标
-------------------------------------------------------------------------------------------------------------------------------------------------
•定位系方法(二):
•getXY:返回元素当前的XY坐标
•move:移动元素
•moveTo:将元素移动到指定的XY坐标上
•position:初始化元素的位置
•setBottom:设置元素的bottom样式
•setBounds:设置元素的位置和大小
•setBox:设置元素的位置大小
•setLeft:设置元素坐标的X坐标
•setRight:设置元素right的样式值
•setLeftTop:设置元素左上角坐标
•setLocation:设置元素位置
•setTop:设置元素的顶部Y坐标
•setX、setY、setXY:设置元素的X、Y、XY坐标位置
•translatePoints:转换元素的页面坐标为CSS的left和top值
-------------------------------------------------------------------------------------------------------------------------------------------
•滚动系方法:
•getScroll:返回元素当前滚动条的位置
•isScrollable:如果元素允许滚动,则返回true
•scroll:滚动到指定位置
•scrollIntoView:将元素滚动到指定容器的可视区域
•scrollTo:将元素滚动到指定的位置
•常用事件方法:
•addKepMap:为元素创建一个KeyMap对象
•addKeyListener:为KeyMap绑定事件
------------------------------------------------------------------------------------------------------------------------------------------------------
•常用事件
•on:绑定事件
•un:移除事件
•click:单机事件
•blur:失去焦点事件
•focus:获得焦点事件
-----------------------------------------------------------------------------------------------------------------------------------------
•其他方法(一):
•center:使元素居中
•clean:清理空白的文本节点
•createShim:为元素创建一个iframe垫片保证选择或其他对象跨域时可见
•getLoader:返回ElementLoader对象
•highlight 高亮显示特效
•show 、hide显示隐藏元素
•ghost  元素移动特效
•fadeIn、fadeOout淡入淡出
•slideIn、slideOut向上向下滑动
----------------------------------------------------------------------------------------------------------------------------------------------------------
•其他方法(二):
•getValue:如果元素有value属性,返回其值
•normalize:将CSS属性中的连接符号去掉,例如将“font-size”转为fontSize这样。
•load:直接调用ElementLoader的load方法为元素加载内容
•mask:遮罩当前元素,屏蔽用户操作。
•unmask:移除遮罩
•repaint:强迫浏览器重新绘画元素
•serializeForm:序列化为URL编码的字符串
•update:更新元素的innerHTML属性
•unselectable:禁用文本选择
 
 
接下来就要举好多栗子了。。。。。。。。。。。。。
Ext.onReady(function () {

    Ext.create('Ext.panel.Panel', {
title: '我的面板',
width: '100%',
height: 400,
renderTo: Ext.getBody(),
html: '<div id=d1><span id=sp>我是sp的内容</span><div id=d2>我是d2的内容</div></div><input id=inp value=123 /><form id=f1><input name=uname value=bhx /><input name=pwd value=123 /></form>'
});
//查询系最常用的方法:
//Ext.dom.Element get fly getDom
var d1 = Ext.get('d1');
var sp = Ext.get('sp'); //查询系方法: //1: contains:判断元素是否包含另一个元素
alert(d1.contains(sp));
alert(d1.contains('sp')); //2: child:从元素的直接子元素中选择与选择符匹配的元素 (返回的只是一个元素,并不能返回数组) ,2个参数 第二个参数是可选的 如果为true表示取得的是原生的HTMLElement元素
var ch1 = d1.child('span'); //Ext.dom.Element
alert(ch.dom.innerHTML);
var ch2 = d1.child('span',true); //HTMLElement
alert(ch.innerHTML); //3: down:选择与选择符匹配的元素的子元素//findParentNode、up:查找与简单选择符匹配的元素的父元素 var ch1 = d1.down('#d2');
alert(ch1.dom.innerHTML); //4: first:选择元素第一个子元素 //last:选择元素的最后一个子元素
var f1 = d1.first('div');
alert(f1.dom.innerHTML); //5: findParent:查找与简单选择符匹配的元素的父元素 //parent:返回元素的父元素
var parent = sp.findParent('div');
alert(parent.innerHTML); //6: is:判断元素是否匹配选择符
alert(d1.is('div')); //7: next:选择元素同层的下一个元素 //prew:选择元素同层的上一个元素
var next = sp.next();
alert(next.dom.nodeName); //8: Ext.query:根据选择符获取元素 (Ext.dom.Element.query)
var arr = Ext.query('span','d1'); //HTMLElement[]
Ext.Array.each(arr , function(item){
alert(item.innerHTML);
});
//9: Ext.select/Ext.dom.Element.select:根据选择符获取元素集合
// 返回的都是元素集合: Ext.dom.CompositeElementLite(HTMLElemennt)/Ext.dom.CompositeElement(Ext.dom.Element)
// 参数说明: 3个参数 ,
// 1:selector 选择器 (不要使用id选择器)
// 2:返回的集合对象(boolean false:Ext.dom.CompositeElementLite true:Ext.dom.CompositeElement)
// 3: 指定的根节点开始查找
var list1 = Ext.select('span',false,'d1');//Ext.dom.CompositeElementLite
Ext.Array.each(list1.elements,function(el){
alert(el.innerHTML);
});
var list2 = Ext.select('span',true,'d1');//Ext.dom.CompositeElement
Ext.Array.each(list2.elements,function(el){
alert(el.dom.innerHTML);
}); //操作dom系的方法:
//1:appendTo:将当前元素追加到指定元素中(这2个元素都必须存在document里)
sp.appendTo(Ext.get('d2'));
sp.appendTo('d2');
//2:appendChild:在当前元素中追加元素
sp.appendChild('d2');
//3:createChild:在元素中插入由DomHelper对象创建的元素
sp.createChild({
tag:'ol' , //orderlist unorderlist
children:[
{tag:'li' ,html:'item1'},
{tag:'li' ,html:'item2'}
]
}); //4:inertAfter:将元素插入到指定元素之后
//5:inertBefore:将元素插入到指定元素之前
//6:inertSibling:在当前元素前或后插入(或创建)元素(同层)。
//7:insertHtml:在当前元素内插入HTML代码
//8:replace:使用当前元素替换指定元素
//9:replaceWith:使用创建的元素替换当前的元素 //10:remove:移除当前元素
sp.remove();
//11:wrap:创建一个元素,并将当前元素包裹起来。
sp.wrap('<h1></h1>'); //操作样式系的方法:
//1:addCls:增加CSS样式到元素,重复的样式会自动过滤
sp.addCls('red');
//2:applyStyles:设置元素的style属性
sp.applyStyles('backgroundColor:blue');
sp.applyStyles({backgroundColor:'yellow'});
//3:setStyle:为元素设置样式
sp.setStyle('backgroundColor','green');
sp.setStyle('fontSize','40px');
//4:getStyle:返回元素的当前样式和计算样式
alert(sp.getStyle('fontSize'));
alert(Ext.encode(sp.getStyle(['fontSize','backgroundColor'])));
//5:getStyleSize:返回元素的样式尺寸
alert(Ext.encode(sp.getStyleSize()));
//6:setOpacity:设置不透明度
var d2 = Ext.get('d2');
d2.setStyle('backgroundColor','red');
d2.setStyle('width','200px');
d2.setStyle('height','200px');
d2.setOpacity(.3); // 0~1
//7:addClsOnClick添加样式当点击该元素的时候
var d2 = Ext.get('d2');
d2.addClsOnClick('red');
//8:addClsOnOver添加样式当鼠标移动到元素上的时候
var d2 = Ext.get('d2');
d2.addClsOnOver('red');
//9:getMargin:返回值具有top、left、right、bottom属性的对象,属性值为响应的元素margin值。
var d2 = Ext.get('d2');
alert(d2.getMargin('b')); //r l t b
alert(Ext.encode(d2.getMargin()));
//10:removeCls:删除元素的样式
var d2 = Ext.get('d2');
d2.addCls('red'); //String/String[] className
d2.removeCls('red'); //String/String[] className //11:尺寸、定位
var d2 = Ext.get('d2');
alert(Ext.encode(d2.getSize()));
alert(d2.getX());
alert(Ext.encode(d2.getXY()));
sp.moveTo(100,100); //一:为元素添加事件
//1 : addKepMap:为元素创建一个KeyMap对象
var inp = Ext.get('inp');
inp.addKeyMap({ //Ext.util.KeyMap ====>Class
key:Ext.EventObject.A , //Ext.EventObject
ctrl:true ,
fn:function(){
alert('按ctrl+A ,执行!!');
} ,
scope:this
});
//2 : addKeyListener:为KeyMap绑定事件
//参数说明: String/Number/Number[]/Object key, Function fn, [Object scope]
// var inp = Ext.get('inp');
inp.addKeyListener({
key:Ext.EventObject.X ,
ctrl:false
},
function(){
alert('x执行了..');
},
this); //二:元素绑定常用事件
var inp = Ext.get('inp');
inp.on('click',function(){
alert('执行了...');
});
inp.un('click');
inp.focus(); //三:其他重要且常用的方法:
var inp = Ext.get('inp');
var sp = Ext.get('sp');
//1: center:使元素居中
inp.center('d1');
//2: clean:清理空白的文本节点
//3: createShim:为元素创建一个iframe垫片保证选择或其他对象跨域时可见
//4: getLoader:返回ElementLoader对象//11: load:直接调用ElementLoader的load方法为元素加载内容
var loader = inp.getLoader(); //ElementLoader
loader.load({
url:'base/004_base06_dom2_loader.jsp' ,
renderer:function(loader ,response){
//把对象转换成字符串表示形式:Ext.encode
//把一个字符串转换成javascript对象: Ext.decode
var obj = Ext.decode(response.responseText);
Ext.getDom('inp').value = obj.name ;
}
});
//5: highlight 高亮显示特效
sp.highlight(); //6: show 、hide显示隐藏元素 //fadeIn、fadeOout淡入淡出
var d2 = Ext.get('d2');
d2.setStyle('width','100px');
d2.setStyle('height','100px');
d2.setStyle('backgroundColor','red');
d2.show({duration: 2000});
d2.hide({duration: 2000}); //7: ghost 元素移动特效
d2.ghost('b', { duration: 2000 }); // r/b/l/t //8: slideIn、slideOut向上向下滑动
d2.slideIn('b',{duration: 2000});
d2.slideOut('r',{duration: 2000}); //9: getValue:如果元素有value属性,返回其值
alert(inp.getValue()); //10: normalize:将CSS属性中的连接符号去掉,例如将“font-size”转为fontSize这样。 //11 :mask:遮罩当前元素,屏蔽用户操作。 unmask:移除遮罩
Ext.getBody().mask('请稍等..');
// window.setTimeout(function(){
// Ext.getBody().unmask();
// },2000);
Ext.defer(function(){
Ext.getBody().unmask();
},2000); //12: repaint:强迫浏览器重新绘画元素 //13: serializeForm:序列化为URL编码的字符串
alert(Ext.dom.Element.serializeForm('f1')); //14: update:更新元素的innerHTML属性 //15: unselectable:禁用文本选择
inp.unselectable(); });

给各位推荐个文章网www.fishcmonkey.com,学习之余提高文学修养;

 
上一篇:【Android Developers Training】 25. 保存文件


下一篇:【Android Developers Training】 7. 添加Action Buttons