Extjs的一些基础使用
ExtJS其实 是一个Ajax 框架，是一个用javascript 写的。与EasyUI差不多的一个框架。学习并不难，先找好一定的学习资料与文档，然后再练习几个demo，这样大概就有所了解了。具体精通，那只有等你自己在项目中多实践。
一、获取元素（Getting Elements)
1. Ext.get()
var el = Ext.getCmp(‘id‘);//获取元素，等同于document.getElementById(‘id‘);//会缓存 2. Ext.fly()
var el = Ext.fly(‘id‘)//不会缓存。 注：享元模式（Flyweight Design Pattern）是一种节省内存的模式，该模式的大概原理是建立单个全体对象然后不断反复使用它。
3. Ext.getdom()
var dom1 = Ext.getDom(‘id‘); // 依据id来查dom节点
var dom2 = Ext.getDom(element); // 依据元素来查dom节点 二、操作class类名
1、addClass()
Ext.fly(‘id‘).addClass(‘className‘); // 加入元素的‘className‘的样式 2、removeClass()
Ext.fly(‘id‘).removeClass(‘className‘); // 删除class 3、toggleClass()
Ext.fly(‘id‘).toggleClass(‘className‘); // 切换删除添加类名 4、replaceClass()
Ext.fly(‘id‘).replaceClass(‘className1‘, ‘className2‘);//替换样式 5、radioClass()
Ext.fly(‘id‘).radioClass(‘className‘); //添加一个或多个className到这个元素，并移除其他兄弟节点上的相同类名。 6、hasClass()
if (Ext.fly(‘id‘).hasClass(‘className‘)) { //当含有该样式返回true
} 7、getStyle()
var width = Ext.fly(‘id‘).getStyle(‘width‘);//返回该元素的统一化当前样式和计算样式。
var height = Ext.fly(‘id‘).getStyle(‘height‘);//返回该元素的统一化当前样式和计算样式。 8、setStyle()
Ext.fly(‘id‘).setStyle({
display : ‘block‘,
overflow : ‘hidden‘,
cursor : ‘pointer‘
});//设置元素的样式，也可以用一个对象参数包含多个样式。 9、getColor()
Ext.fly(‘id‘).getColor(‘color‘);//为指定的css属性返回CSS颜色 10、setOpacity()
Ext.fly(‘id‘).setOpacity(.45, true);//设置元素的透明度。 11、clearOpacity
Ext.fly(‘id‘).clearOpacity();//清除这个元素的透明度设置 三、定位(position)
1、getX
//返回元素相对于页面坐标的X位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标（display:none 或未加入的elements返回false）。
var pageX = Ext.fly(‘id‘).getX() 2、getY
//返回元素相对于页面坐标的Y位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标（display:none或未加入的elements返回false）。
var pageY = Ext.fly(‘id‘).getY() 3、getXY
//返回元素当前页面坐标的位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标（display:none或未加入的elements返回false）。
var arrayXY = Ext.fly(‘id‘).getXY() // arrayXY是数组 4、setX
//返回元素相对于页面坐标的X位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标（display:none或未加入的elements返回false）。
Ext.fly(‘id‘).setX(10) 5、setY
//返回元素相对于页面坐标的Y位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标（display:none或未加入的elements返回false）。
Ext.fly(‘id‘).setY(10)
6、setXY
//返回元素当前页面坐标的位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标（display:none或未加入的elements返回false）。
Ext.fly(‘id‘).setXY([20,10]) 7、getOffsetsTo
//返回当前元素与送入元素的距离。这两个元素都必须是属于DOM树中的一部分才拥有正确的页面坐标（display:none或未加入的elements返回false）。
var offsets = Ext.fly(‘id‘).getOffsetsTo(anotherEl); 8、getLeft
//获取左边的X坐标。
var left = Ext.fly(‘id‘).getLeft(); 9、getRight
//获取元素右边的X坐标（元素X位置 + 元素宽度）。
var right = Ext.fly(‘id‘).getRight(); 10、getTop
//获取顶部Y坐标。
var top = Ext.fly(‘id‘).getTop(); 11、getBottom
//获取元素的底部Y坐标（元素Y位置 + 元素宽度）。
var bottom = Ext.fly(‘id‘).getBottom(); 12、setLeft
//直接使用CSS样式（代替setX()），设定元素的left位置。
Ext.fly(‘id‘).setLeft(25) 13、setRight
//设置元素CSS Right的样式。
Ext.fly(‘id‘).setRight(15) 14、setTop
//直接使用CSS样式（代替setY()），设定元素的top位置。
Ext.fly(‘id‘).setTop(12) 15、setBottom
//设置元素CSS Bottom的样式。
Ext.fly(‘id‘).setBottom(15) 16、setLocation
//无论这个元素如何定位，设置其在页面的坐标位置。元素必须是DOM树中的一部分才拥有页面坐标（display:none或未加入的elements会当作无效而返回false）。
Ext.fly(‘id‘).setLocation(15,32) 17、moveTo
//无论这个元素如何定位，设置其在页面的坐标位置。元素必须是DOM树中的一部分才拥有页面坐标（display:none或未加入的elements会当作无效而返回false）。
Ext.fly(‘id‘).moveTo(12,17) 18、position
//初始化元素的位置。如果未传入期待的位置，而又还没定位的话，将会设置当前元素为相对（relative）定位。
Ext.fly(‘id‘).position("relative") 19、clearPositioning
//当文档加载后清除位置并复位到默认。
Ext.fly(‘id‘).clearPositioning()
Ext.fly(‘id‘).clearPositioning("top") 20、getPositioning
//返回一个包含CSS定位信息的对象。有用的技巧：连同setPostioning一起，可在更新执行之前，先做一个快照（snapshot），之后便可恢复该元素。
var positions = Ext.fly(‘id‘).getPositioning() 21、setPositioning
//由getPositioning()返回的对象去进行定位。
Ext.fly(‘id‘).setPositioning({
left: ‘static‘,
right: ‘auto‘
}) 22、translatePoints
//送入一个页面坐标的参数，将其翻译到元素的CSS left/top值。
// {left:translX, top: translY}
var points = Ext.fly(‘id‘).translatePoints(15,18); 四、尺寸&大小
1、getHeight
//返回元素的偏移（offset）高度。
var height = Ext.fly(‘id‘).getHeight(); 2、getWidth
//返回元素的偏移（offset）宽度。
var width = Ext.fly(‘id‘).getWidth(); 3、setHeight
//设置元素的高度。
Ext.fly(‘id‘).setHeight(); 4、setWidth
//设置元素的宽度。
Ext.fly(‘id‘).setWidth(); 5、getBorderWidth
//返回指定边（side(s)）的padding宽度。
var borderWidth = Ext.fly(‘elId‘).getBorderWidth(‘lr‘); 6、getPadding
//可以是t, l, r, b或是任何组合。例如，传入lr的参数会得到left padding +(r)ight padding。
var padding = Ext.fly(‘id‘).getPadding(‘lr‘); 7、clip
//保存当前的溢出（overflow），然后进行裁剪元素的溢出部分 - 使用unclip()来移除。
Ext.fly(‘id‘).clip(); 8、unclip
//在调用clip()之前，返回原始的裁剪部分（溢出的）。
Ext.fly(‘id‘).unclip(); 9、isBorderBox
//测试不同的CSS规则/浏览器以确定该元素是否使用Border Box。
if (Ext.isBorderBox) {
} 本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
