ExtJS DOM操作-Element类 UI操作

2022-07-19 07:32:56 阅读：219 来源： 互联网

标签：get Number element Ext UI panda666 Element ExtJS

更新记录
2022年7月19日发布。
2022年7月6日从笔记迁移到博客。

ExtJS教程汇总：https://www.cnblogs.com/cqpanda/p/16328016.html

DOM操作-UI处理-尺寸操作

设置高度

elem.setWidth(200);

设置高度（动画效果）

elem.setWidth(200, true);

设置高度（动画效果）（具体动画参数）

eleme.setHeight(400,{duration:2000,easing:'bounceOut'});

获得高度

element.getHeight ( [contentHeight], [preciseHeight] ) : Number

设置宽度

elem.setHeight(2000);

设置高度（动画效果）

elem.setHeight(2000, true);

设置高度（动画效果）（具体动画参数）

elem.setWidth(600,{duration:2000,easing:'bounceOut'});

获得宽度

element.getWidth ( [contentWidth], [preciseWidth] ) : Number

设置尺寸

//获得元素
var elem = Ext.get('pandaBox');
//设置尺寸
elem.setSize(550,560);

设置元素尺寸（动画效果）

<div id="pandaBox"></div>

//获得元素
var elem = Ext.get('pandaBox');
//设置尺寸（动画效果）
elem.setSize(550,560,{ duration:2000, easing:'bounceOut' });

获得尺寸

element.getSize ( [contentSize] ) : Object

获得Left值

element.getLeft ( local ) : Number

获得Top值

element.getTop ( local ) : Number

设置postion

element.position ( [pos], [zIndex], [x], [y] )

获得xy定位值

element.getX() Number
element.getXY() Array
element.getY() Number

获得zindex值

element.getZIndex() Number

获得内边距

element.getPadding ( side ) : Number

获得外边距

element.getMargin ( [sides] ) : Object/Number

获得边框宽度

element.getBorderWidth ( side ) : Number

获得滚动条位置

element.getScroll() Object 
element.getScrollLeft() Number 
element.getScrollTop() Number

设置滚动

element.scroll ( direction, distance, [animate] ) : Boolean 
element.scrollBy ( deltaX, deltaY, animate ) : Ext.dom.Element

获得视口大小

element.getViewSize() Object

获得相对父元素的位置信息

element.getLocalX() Number 
element.getLocalXY() Number[] 
element.getLocalY() Number

获得指定元素的相对位置信息

element.getOffsetsTo ( offsetsTo ) : Number[]

获得定位位置信息

element.getBottom ( local ) : Number    //element X position + element height
element.getRight ( local ) : Number     //element X position + element width

获得详细尺寸信息

element.getBox ( [contentBox], [local] ) : Object

DOM操作-UI处理-样式处理

添加CSS类

element.addCls ( names, [prefix], [suffix] ) : Ext.dom.Element

注意：第一个参数可以是数组

实例：

Ext.get('panda666').addCls('panda-class');

添加CSS类（在按钮点击时）

element.addClsOnClick ( className, [testFn], [scope] ) : Ext.dom.Element

添加CSS类（在获得焦点时）

element.addClsOnFocus ( className, [testFn], [scope] ) : Ext.dom.Element

添加CSS类（在获得鼠标划过时）

element.addClsOnOver ( className, [testFn], [scope] ) : Ext.dom.Element

添加CSS类型（但移除兄弟节点相同的CSS类型）

element.radioCls ( className ) : Ext.dom.Element

移除CSS类

element.removeCls ( names, [prefix], [suffix] )

实例：

Ext.get('panda666').removeCls('panda-class');

检测是否有CSS类

element.hasCls ( name ) : Boolean

替换CSS类

element.replaceCls ( [remove], [add], [prefix], [suffix] ) : Ext.dom.Element

设置CSS样`式

使用setStyle方法
Ext.get('panda666').setStyle({
    width: "100px",
    height: "100px",
    border: "2px solid #444",
    margin: "80px auto",
    backgroundColor: "#ccc"
});

设置Style样式

element.applyStyles ( styles ) : Ext.dom.Element

实例：

//简单字符串形式
el.applyStyles('color: white;');

//对象键值对形式
el.applyStyles({
    fontWeight: 'bold',
    backgroundColor: 'gray',
    padding: '10px'
});

//使用函数
el.applyStyles(function () {
    if (name.initialConfig.html === 'Phineas Flynn') {
        return 'font-style: italic;';
        // OR return { fontStyle: 'italic' };
    }
});

获得CSS样式

element.getStyle ( property, [inline] ) : String/Object

实例：

var width = Ext.get('panda666').getStyle('width');
var height = Ext.get('panda666').getStyle('height');
var borderStyle = Ext.get('panda666').getStyle('borderStyle');
var backgroundColor = Ext.get('panda666').getStyle('backgroundColor');

设置对齐位置

element.alignTo ( element, [position], [offsets] ) : Ext.util.Positionable

获得对齐位置

element.getAlignToXY ( alignToEl, [position], [offsets] ) : Number[]

获得对齐位置（锚定位）

element.getAnchorXY ( [anchor], [local], [size] ) : Number[]

获得HTML Attribute

element.getAttribute ( name, [namespace] ) : String

获得HTML Attribute（所有）

element.getAttributes() Object

设置高亮

elem.highlight();

设置隐藏

element.hide() Ext.dom.Element

居中显示

element.center ( centerIn ) : Ext.dom.Element

移动节点位置

element.move ( direction, distance )

缓存布局值

element.cacheScrollValues() Function

实例：

var restoreScroll = myPanel.el.cacheScrollValues();
myOtherContainer.add(myPanel);
restoreScroll();

强制重绘节点

element.repaint ( cls, state ) : Ext.dom.Element

DOM操作-UI处理-动画处理

渐隐动画效果

Ext.get('panda666').fadeOut();
Ext.get('panda666').fadeOut({duraion:5000});

常见的动画效果：http://127.0.0.1:82/extjs/7.3.0/modern/Ext.anims.html

渐入动画效果

Ext.get('panda666').fadeIn();
Ext.get('panda666').fadeIn({duraion:5000});

常见的动画效果：https://docs.sencha.com/extjs/7.5.1/modern/Ext.anims.html

标签：get,Number,element,Ext,UI,panda666,Element,ExtJS
来源： https://www.cnblogs.com/cqpanda/p/16453542.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9