ExtJS DOM操作-Element类 UI操作

更新记录
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