Extjs的一些基础使用！

摘要：当含有该样式返回返回该元素的统一化当前样式和计算样式。返回当前元素与送入元素的距离。由返回的对象去进行定位。设置元素的高度。保存当前的溢出，然后进行裁剪元素的溢出部分使用来移除。测试不同的规则浏览器以确定该元素是否使用。

var el = Ext.getCmp("id");//获取元素，等同于document.getElementById("id");//会缓存 

var el = Ext.fly("id")//不会缓存。 

注：享元模式（Flyweight Design Pattern）是一种节省内存的模式，该模式的大概原理是建立单个全体对象然后不断反复使用它。

var dom1 = Ext.getDom("id");     // 依据id来查dom节点 
var dom2 = Ext.getDom(element);  // 依据元素来查dom节点 

Ext.fly("id").addClass("className"); // 加入元素的"className"的样式 

Ext.fly("id").removeClass("className"); // 删除class  

Ext.fly("id").toggleClass("className"); // 切换删除添加类名 

Ext.fly("id").replaceClass("className1", "className2");//替换样式     

Ext.fly("id").radioClass("className");   //添加一个或多个className到这个元素，并移除其他兄弟节点上的相同类名。    

if (Ext.fly("id").hasClass("className")) { //当含有该样式返回true 
     
} 

var width = Ext.fly("id").getStyle("width");//返回该元素的统一化当前样式和计算样式。 
var height = Ext.fly("id").getStyle("height");//返回该元素的统一化当前样式和计算样式。 

Ext.fly("id").setStyle({ 
     display : "block", 
     overflow : "hidden", 
     cursor : "pointer" 
});//设置元素的样式，也可以用一个对象参数包含多个样式。 

Ext.fly("id").getColor("color");//为指定的CSS属性返回CSS颜色 

Ext.fly("id").setOpacity(.45, true);//设置元素的透明度。 

Ext.fly("id").clearOpacity();//清除这个元素的透明度设置 

//返回元素相对于页面坐标的X位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标（display:none            或未加入的elements返回false）。 
var pageX = Ext.fly("id").getX() 

//返回元素相对于页面坐标的Y位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标（display:none或未加入的elements返回false）。 
var pageY = Ext.fly("id").getY() 

//返回元素当前页面坐标的位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标（display:none或未加入的elements返回false）。 
var arrayXY = Ext.fly("id").getXY() // arrayXY是数组 

//返回元素相对于页面坐标的X位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标（display:none或未加入的elements返回false）。 
Ext.fly("id").setX(10) 

//返回元素相对于页面坐标的Y位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标（display:none或未加入的elements返回false）。
Ext.fly("id").setY(10)

//返回元素当前页面坐标的位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标（display:none或未加入的elements返回false）。 
Ext.fly("id").setXY([20,10]) 

//返回当前元素与送入元素的距离。这两个元素都必须是属于DOM树中的一部分才拥有正确的页面坐标（display:none或未加入的elements返回false）。 
var offsets = Ext.fly("id").getOffsetsTo(anotherEl); 

//获取左边的X坐标。 
var left = Ext.fly("id").getLeft(); 

//获取元素右边的X坐标（元素X位置 + 元素宽度）。 
var right = Ext.fly("id").getRight(); 

//获取顶部Y坐标。 
var top = Ext.fly("id").getTop(); 

//获取元素的底部Y坐标（元素Y位置 + 元素宽度）。 
var bottom = Ext.fly("id").getBottom(); 

//直接使用CSS样式（代替setX()），设定元素的left位置。 
Ext.fly("id").setLeft(25) 

//设置元素CSS Right的样式。 
Ext.fly("id").setRight(15) 

//直接使用CSS样式（代替setY()），设定元素的top位置。 
Ext.fly("id").setTop(12) 

//设置元素CSS Bottom的样式。 
Ext.fly("id").setBottom(15) 

//无论这个元素如何定位，设置其在页面的坐标位置。元素必须是DOM树中的一部分才拥有页面坐标（display:none或未加入的elements会当作无效而返回false）。 
Ext.fly("id").setLocation(15,32) 

//无论这个元素如何定位，设置其在页面的坐标位置。元素必须是DOM树中的一部分才拥有页面坐标（display:none或未加入的elements会当作无效而返回false）。 
Ext.fly("id").moveTo(12,17) 

//初始化元素的位置。如果未传入期待的位置，而又还没定位的话，将会设置当前元素为相对（relative）定位。 
Ext.fly("id").position("relative") 

//当文档加载后清除位置并复位到默认。 
Ext.fly("id").clearPositioning() 
Ext.fly("id").clearPositioning("top") 

//返回一个包含CSS定位信息的对象。有用的技巧：连同setPostioning一起，可在更新执行之前，先做一个快照（snapshot），之后便可恢复该元素。 
var positions = Ext.fly("id").getPositioning() 

//由getPositioning()返回的对象去进行定位。 
Ext.fly("id").setPositioning({ 
    left: "static", 
    right: "auto" 
}) 

//送入一个页面坐标的参数，将其翻译到元素的CSS left/top值。 
// {left:translX, top: translY} 
var points = Ext.fly("id").translatePoints(15,18);    

//返回元素的偏移（offset）高度。 
var height = Ext.fly("id").getHeight(); 

//返回元素的偏移（offset）宽度。 
var width = Ext.fly("id").getWidth(); 

//设置元素的高度。 
Ext.fly("id").setHeight(); 

//设置元素的宽度。 
Ext.fly("id").setWidth(); 

//返回指定边（side(s)）的padding宽度。 
var borderWidth = Ext.fly("elId").getBorderWidth("lr"); 

//可以是t, l, r, b或是任何组合。例如，传入lr的参数会得到left padding +(r)ight padding。 
var padding = Ext.fly("id").getPadding("lr"); 

//保存当前的溢出（overflow），然后进行裁剪元素的溢出部分 - 使用unclip()来移除。 
Ext.fly("id").clip(); 

//在调用clip()之前，返回原始的裁剪部分（溢出的）。 
Ext.fly("id").unclip(); 

//测试不同的CSS规则/浏览器以确定该元素是否使用Border Box。 
if (Ext.isBorderBox) { 
     
}