摘要:当含有该样式返回返回该元素的统一化当前样式和计算样式。返回当前元素与送入元素的距离。由返回的对象去进行定位。设置元素的高度。保存当前的溢出,然后进行裁剪元素的溢出部分使用来移除。测试不同的规则浏览器以确定该元素是否使用。
一、获取元素(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"); // 删除class3、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)
//返回元素当前页面坐标的位置。元素必须是属于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) { }
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/52512.html
摘要:今天开始,一点点记录一下使用搭建一个基础结构的过程。没办法,记性差这种结构的前端,主要是面向后台信息管理系统,可以最大限度的规范前端代码结构和数据结构。 今天开始,一点点记录一下使用extjs6.2.0搭建一个基础MVC结构的过程。没办法,记性差:)这种结构的UI前端,主要是面向后台信息管理系统,可以最大限度的规范前端代码结构和数据结构。做网站 或者手机端,这种方式全引入了extjs,...
摘要:接着来,上一篇搭建了基本的项目骨架,到最后,其实啥也没看见。。。目标全屏显示左侧导航菜单,右侧标签页切换操作内容区域。一般模型与你后台返回的数据结构一一对应。给其他组件提供一致接口使用数据。整个构成一个所谓的。 接着来,上一篇搭建了基本的项目骨架,到最后,其实啥也没看见。。。书接上回,开始写UI效果。 目标 全屏显示、左侧导航菜单,右侧标签页切换操作内容区域。包含header和foo...
摘要:上篇实现了基本的代码架构,控制器动态加载功能以及一个基础的页面布局,本节开始,将陆续完善这个页面。页面底部区域,主要显示版权信息等,也可以显示个时间啥的。。。头部和底部定义完毕后,需要在中引入对应位置。 上篇实现了基本的代码架构,控制器动态加载功能以及一个基础的页面布局,本节开始,将陆续完善这个页面。 目标 如前所述,我们的页面包含这么几个区域: header: UI顶部区域,显示系...
阅读 2636·2023-04-25 20:19
阅读 1858·2021-11-24 09:38
阅读 1580·2021-11-16 11:44
阅读 4142·2021-09-02 15:40
阅读 1281·2019-08-30 15:55
阅读 1951·2019-08-30 15:52
阅读 3700·2019-08-29 17:20
阅读 2139·2019-08-29 13:48