ext4 学习笔记（十二）[样式操作系方法]（白鹤翔第一季）

样式操作系方法：

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大小的对象转换为字符串

<span style="font-family:KaiTi_GB2312;">//操作样式系的方法：
//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);</span>

对齐操作系方法：

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：将元素滚动到指定的位置