zoukankan      html  css  js  c++  java
  • Ext JS学习第十三天 Ext基础之 Ext.Element

    •Ext.Element提供了181个方法,嗯,还没完,只是在4.1版本中是这样,最新的4.2版本貌似又增加了新方法,可谓是相当丰富给力。那么根据操作类型基本可以分为查询系、DOM操作系、样式操作系、对齐、尺寸、定位、拖放、滚动、键盘、动画系等方法供开发人员使用。由于API是英文版本,我特意花了一个下午时间把他们整理了出来,共同学们参考使用!!
    -------------------------------------------------------------------------------------------------
    •查询系方法:
    •contains:判断元素是否包含另一个元素
    •child:从元素的直接子元素中选择与选择符匹配的元素
    •down:选择与选择符匹配的元素的子元素
    •first:选择元素第一个子元素
    •findParent:查找与简单选择符匹配的元素的父元素
    •findParentNode、up:查找与简单选择符匹配的元素的父元素
    •is:判断元素是否匹配选择符
    •last:选择元素的最后一个子元素
    •next:选择元素同层的下一个元素
    •prew:选择元素同层的上一个元素
    •parent:返回元素的父元素
    •Ext.query:根据选择符获取元素
    •Ext.select:根据选择符获取元素集合
    -------------------------------------------------------------------------------------------------------------------------------
    •DOM操作系方法:
    •appendTo:将当前元素追加到指定元素中
    •appendChild:在当前元素中追加元素
    •createChild:在元素中插入由DomHelper对象创建的元素
    •inertAfter:将元素插入到指定元素之后
    •inertBefore:将元素插入到指定元素之前
    •inertSibling:在当前元素前或后插入(或创建)元素(同层)。
    •insertHtml:在当前元素内插入HTML代码
    •remove:移除当前元素
    •replace:使用当前元素替换指定元素
    •replaceWith:使用创建的元素替换当前的元素
    •wrap:创建一个元素,并将当前元素包裹起来。
    ----------------------------------------------------------------------------------------------------------------------------
    •样式操作系方法(一):
    •addCls:增加CSS样式到元素,重复的样式会自动过滤
    •applyStyles:设置元素的style属性
    •setStyle:为元素设置样式
    •getStyle:返回元素的当前样式和计算样式
    •getStyleSize:返回元素的样式尺寸
    •setOpacity:设置不透明度
    •clearOpacity:;清理不透明度设置
    •getColor:返回CSS颜色属性的值,返回值为6位数组的16进制颜色值
    •boxWrap:使用box.Markup定义的HTML代码包装元素
    ------------------------------------------------------------------------------------------------------------------------------------------------
    •样式操作系方法(二):
    •addClsOnClick添加样式当点击该元素的时候
    •addClsOnOver添加样式当鼠标移动到元素上的时候
    •getMargin:返回值具有top、left、right、bottom属性的对象,属性值为响应的元素margin值。
    •removeCls:删除元素的样式
    •replaceCls:替换元素的样式
    •set:设置元素属性
    •radioCls:为当前元素添加样式,并删除其兄弟节点的元素
    •unituzeBox:将表示margin大小的对象转换为字符串
    -------------------------------------------------------------------------------------------------------------------------------------------------
    •对齐操作系方法:
    •alignTo:将当前元素对齐到另外一个元素。定位位置的选择是基于所对齐的元素的位置(9个定位点tl、t、tr、l、c、r、bl、b、br)。
    •anchorTo:当窗口调整大小时,将当前元素锚到指定元素并重新调整
    •removeAnchor:移除当前元素的任何锚定位
    ------------------------------------------------------------------------------------------------------------------------------------------------
    •尺寸大小操作系方法(一):
    •setHeight:设置元素宽度
    •setWidth:设置元素高度
    •setSize:设置元素大小
    •cilp:存储元素当前的overflow设置并裁剪溢出。
    •unlip:在clip被调用前将裁剪值(溢出)还原为原始值
    •getDocumentWidth:返回文档宽度
    •getDocumentHeight:返回文档高度
    •getFrameWidth:返回合计了padding和border的宽度
    •getHeight:返回offsetHeight值
    •getWidth:返回offsetWidth值
    •getPadding:返回padding的宽度
    •getSize:返回元素的大小
    ----------------------------------------------------------------------------------------------------------------------------------------------------
    •尺寸大小操作系方法(二):
    •getTextWidth:返回文本宽度
    •getViewportHeight:返回窗口的可视高度
    •getViewportWidth:返回窗口的可视宽度
    •getViewSize:返回元素可以用来放置内容的区域大小
    •getBorderWidth:返回边界宽度
    •getComputedWidth:返回计算出来的CSS宽度
    •getComputedHeight:返回计算出来的CSS高度
    •isBorderBox:主要用于检测盒子模型,与IE6、7有关
    ----------------------------------------------------------------------------------------------------------------------------------------------------
    •定位系方法(一):
    •clearPositioning:当文档加载完成后,清理定位回到默认值
    •fromPoint:返回在建瓯的自拍呢的顶层元素
    •getBottom:返回右下角的Y坐标
    •getBox:返回一个包含元素位置的对象,对象包括元素左上角的坐标值、右下角的坐标值、宽度和高度。
    •getCenterXY:返回元素的当前坐标
    •getLeft:返回一个包含元素位置的对象
    •getPositioning:返回一个包含CSS位置属性的对象
    •getRegin:返回元素所在区域
    •getRight:返回元素的右边X坐标
    •getTop:返回元素顶部Y坐标
    •getViewRegion:返回元素的内容区域
    •getX:返回元素当前的X坐标
    •getY:返回元素当前的Y坐标
    -------------------------------------------------------------------------------------------------------------------------------------------------
    •定位系方法(二):
    •getXY:返回元素当前的XY坐标
    •move:移动元素
    •moveTo:将元素移动到指定的XY坐标上
    •position:初始化元素的位置
    •setBottom:设置元素的bottom样式
    •setBounds:设置元素的位置和大小
    •setBox:设置元素的位置大小
    •setLeft:设置元素坐标的X坐标
    •setRight:设置元素right的样式值
    •setLeftTop:设置元素左上角坐标
    •setLocation:设置元素位置
    •setTop:设置元素的顶部Y坐标
    •setX、setY、setXY:设置元素的X、Y、XY坐标位置
    •translatePoints:转换元素的页面坐标为CSS的left和top值
    -------------------------------------------------------------------------------------------------------------------------------------------
    •滚动系方法:
    •getScroll:返回元素当前滚动条的位置
    •isScrollable:如果元素允许滚动,则返回true
    •scroll:滚动到指定位置
    •scrollIntoView:将元素滚动到指定容器的可视区域
    •scrollTo:将元素滚动到指定的位置
    •常用事件方法:
    •addKepMap:为元素创建一个KeyMap对象
    •addKeyListener:为KeyMap绑定事件
    ------------------------------------------------------------------------------------------------------------------------------------------------------
    •常用事件
    •on:绑定事件
    •un:移除事件
    •click:单机事件
    •blur:失去焦点事件
    •focus:获得焦点事件
    -----------------------------------------------------------------------------------------------------------------------------------------
    •其他方法(一):
    •center:使元素居中
    •clean:清理空白的文本节点
    •createShim:为元素创建一个iframe垫片保证选择或其他对象跨域时可见
    •getLoader:返回ElementLoader对象
    •highlight 高亮显示特效
    •show 、hide显示隐藏元素
    •ghost  元素移动特效
    •fadeIn、fadeOout淡入淡出
    •slideIn、slideOut向上向下滑动
    ----------------------------------------------------------------------------------------------------------------------------------------------------------
    •其他方法(二):
    •getValue:如果元素有value属性,返回其值
    •normalize:将CSS属性中的连接符号去掉,例如将“font-size”转为fontSize这样。
    •load:直接调用ElementLoader的load方法为元素加载内容
    •mask:遮罩当前元素,屏蔽用户操作。
    •unmask:移除遮罩
    •repaint:强迫浏览器重新绘画元素
    •serializeForm:序列化为URL编码的字符串
    •update:更新元素的innerHTML属性
    •unselectable:禁用文本选择
     
     
    接下来就要举好多栗子了。。。。。。。。。。。。。
    Ext.onReady(function () {
    
        Ext.create('Ext.panel.Panel', {
            title: '我的面板',
             '100%',
            height: 400,
            renderTo: Ext.getBody(),
            html: '<div id=d1><span id=sp>我是sp的内容</span><div id=d2>我是d2的内容</div></div><input id=inp value=123 /><form id=f1><input name=uname value=bhx /><input name=pwd value=123 /></form>'
        });
        //查询系最常用的方法:
        //Ext.dom.Element   get  fly   getDom
        var d1 = Ext.get('d1');
        var sp = Ext.get('sp');
    
    
    
        //查询系方法:
        
        //1: contains:判断元素是否包含另一个元素
        alert(d1.contains(sp));
        alert(d1.contains('sp'));
        
        //2: child:从元素的直接子元素中选择与选择符匹配的元素 (返回的只是一个元素,并不能返回数组) ,2个参数 第二个参数是可选的 如果为true表示取得的是原生的HTMLElement元素
            var ch1 = d1.child('span');    //Ext.dom.Element
            alert(ch.dom.innerHTML);
            var ch2 = d1.child('span',true);    //HTMLElement
            alert(ch.innerHTML);
        
        //3: down:选择与选择符匹配的元素的子元素//findParentNode、up:查找与简单选择符匹配的元素的父元素
        
            var ch1 = d1.down('#d2');
            alert(ch1.dom.innerHTML);
        
        //4: first:选择元素第一个子元素 //last:选择元素的最后一个子元素
            var f1 = d1.first('div');
            alert(f1.dom.innerHTML);
    
        //5: findParent:查找与简单选择符匹配的元素的父元素 //parent:返回元素的父元素
            var parent =  sp.findParent('div');
            alert(parent.innerHTML);
        
        //6: is:判断元素是否匹配选择符
            alert(d1.is('div'));
        
        //7: next:选择元素同层的下一个元素 //prew:选择元素同层的上一个元素
            var next = sp.next();
            alert(next.dom.nodeName);
    
        //8: Ext.query:根据选择符获取元素  (Ext.dom.Element.query)
            var arr = Ext.query('span','d1');    //HTMLElement[]
            Ext.Array.each(arr , function(item){
                alert(item.innerHTML);
            });
        //9: Ext.select/Ext.dom.Element.select:根据选择符获取元素集合
        // 返回的都是元素集合: Ext.dom.CompositeElementLite(HTMLElemennt)/Ext.dom.CompositeElement(Ext.dom.Element)
        // 参数说明: 3个参数 , 
        //    1:selector 选择器  (不要使用id选择器)
        //  2:返回的集合对象(boolean false:Ext.dom.CompositeElementLite true:Ext.dom.CompositeElement)
        //  3: 指定的根节点开始查找
            var list1 = Ext.select('span',false,'d1');//Ext.dom.CompositeElementLite
            Ext.Array.each(list1.elements,function(el){
                    alert(el.innerHTML);
            });
            var list2 = Ext.select('span',true,'d1');//Ext.dom.CompositeElement
            Ext.Array.each(list2.elements,function(el){
                    alert(el.dom.innerHTML);
            });    
        
        
    
    
        //操作dom系的方法:
        //1:appendTo:将当前元素追加到指定元素中(这2个元素都必须存在document里)
        sp.appendTo(Ext.get('d2'));
        sp.appendTo('d2');
        //2:appendChild:在当前元素中追加元素
        sp.appendChild('d2');
        //3:createChild:在元素中插入由DomHelper对象创建的元素
            sp.createChild({
                tag:'ol' ,        //orderlist  unorderlist
                children:[
                    {tag:'li' ,html:'item1'},
                    {tag:'li' ,html:'item2'}
                ]
            });
        
        //4:inertAfter:将元素插入到指定元素之后
        //5:inertBefore:将元素插入到指定元素之前 
        //6:inertSibling:在当前元素前或后插入(或创建)元素(同层)。
        //7:insertHtml:在当前元素内插入HTML代码
        //8:replace:使用当前元素替换指定元素
        //9:replaceWith:使用创建的元素替换当前的元素    
        
        //10:remove:移除当前元素
        sp.remove();
        //11:wrap:创建一个元素,并将当前元素包裹起来。
        sp.wrap('<h1></h1>');
        
        //操作样式系的方法:
        //1:addCls:增加CSS样式到元素,重复的样式会自动过滤
        sp.addCls('red');
        //2:applyStyles:设置元素的style属性
        sp.applyStyles('backgroundColor:blue');
        sp.applyStyles({backgroundColor:'yellow'});
        //3:setStyle:为元素设置样式
        sp.setStyle('backgroundColor','green');
        sp.setStyle('fontSize','40px');
        //4:getStyle:返回元素的当前样式和计算样式
        alert(sp.getStyle('fontSize'));
        alert(Ext.encode(sp.getStyle(['fontSize','backgroundColor'])));
        //5:getStyleSize:返回元素的样式尺寸
        alert(Ext.encode(sp.getStyleSize()));
        //6:setOpacity:设置不透明度
            var d2 = Ext.get('d2');
            d2.setStyle('backgroundColor','red');
            d2.setStyle('width','200px');
            d2.setStyle('height','200px');
            d2.setOpacity(.3);    // 0~1
        //7:addClsOnClick添加样式当点击该元素的时候
            var d2 = Ext.get('d2');
            d2.addClsOnClick('red');
        //8:addClsOnOver添加样式当鼠标移动到元素上的时候
            var d2 = Ext.get('d2');
            d2.addClsOnOver('red');    
        //9:getMargin:返回值具有top、left、right、bottom属性的对象,属性值为响应的元素margin值。
            var d2 = Ext.get('d2');
            alert(d2.getMargin('b')); //r l t b
            alert(Ext.encode(d2.getMargin()));
        //10:removeCls:删除元素的样式    
            var d2 = Ext.get('d2');
            d2.addCls('red');            //String/String[] className
            d2.removeCls('red');        //String/String[] className
        
        //11:尺寸、定位
            var d2 = Ext.get('d2');
            alert(Ext.encode(d2.getSize()));
            alert(d2.getX());
            alert(Ext.encode(d2.getXY()));
            sp.moveTo(100,100);
        
    
        //一:为元素添加事件
        //1 : addKepMap:为元素创建一个KeyMap对象
            var inp = Ext.get('inp');
            inp.addKeyMap({        //Ext.util.KeyMap ====>Class
                key:Ext.EventObject.A ,            //Ext.EventObject 
                ctrl:true ,
                fn:function(){
                    alert('按ctrl+A ,执行!!');
                } , 
                scope:this
            });
        //2 : addKeyListener:为KeyMap绑定事件
        //参数说明: String/Number/Number[]/Object key, Function fn, [Object scope]
        //    var inp = Ext.get('inp');
            inp.addKeyListener({
                key:Ext.EventObject.X ,    
                ctrl:false 
            },
            function(){
                alert('x执行了..');
            },
            this);
    
        //二:元素绑定常用事件
            var inp = Ext.get('inp');
            inp.on('click',function(){
                alert('执行了...');
            });
            inp.un('click');
            inp.focus();
        
        
        //三:其他重要且常用的方法:
        var inp = Ext.get('inp');
        var sp = Ext.get('sp');
        //1: center:使元素居中
        inp.center('d1');
        //2: clean:清理空白的文本节点
        //3: createShim:为元素创建一个iframe垫片保证选择或其他对象跨域时可见
        //4: getLoader:返回ElementLoader对象//11: load:直接调用ElementLoader的load方法为元素加载内容
            var loader = inp.getLoader(); //ElementLoader
            loader.load({
                url:'base/004_base06_dom2_loader.jsp' , 
                renderer:function(loader ,response){
                    //把对象转换成字符串表示形式:Ext.encode 
                    //把一个字符串转换成javascript对象: Ext.decode
                    var obj = Ext.decode(response.responseText);
                    Ext.getDom('inp').value = obj.name ;
                }
            });
        //5: highlight 高亮显示特效
            sp.highlight();
        
        //6: show 、hide显示隐藏元素      //fadeIn、fadeOout淡入淡出
            var d2 = Ext.get('d2');
            d2.setStyle('width','100px');
            d2.setStyle('height','100px');
            d2.setStyle('backgroundColor','red');
            d2.show({duration: 2000});
            d2.hide({duration: 2000});
        
        //7: ghost  元素移动特效
            d2.ghost('b', { duration: 2000 }); // r/b/l/t
        
        //8: slideIn、slideOut向上向下滑动
        d2.slideIn('b',{duration: 2000});
        d2.slideOut('r',{duration: 2000});
        
        //9: getValue:如果元素有value属性,返回其值
        alert(inp.getValue());
        
        //10: normalize:将CSS属性中的连接符号去掉,例如将“font-size”转为fontSize这样。
        
        //11 :mask:遮罩当前元素,屏蔽用户操作。 unmask:移除遮罩
            Ext.getBody().mask('请稍等..');
            //    window.setTimeout(function(){
            //        Ext.getBody().unmask();
            //    },2000);
            Ext.defer(function(){
                Ext.getBody().unmask();
            },2000);
        
        //12: repaint:强迫浏览器重新绘画元素
        
        //13: serializeForm:序列化为URL编码的字符串
        alert(Ext.dom.Element.serializeForm('f1'));
        
        //14: update:更新元素的innerHTML属性
        
        //15: unselectable:禁用文本选择    
        inp.unselectable();
        
        
    
    
    
    });

     给各位推荐个文章网www.fishcmonkey.com,学习之余提高文学修养;

     
  • 相关阅读:
    Mysql登录错误:ERROR 1045 (28000): Plugin caching_sha2_password could not be loaded
    Docker配置LNMP环境
    Docker安装mysqli扩展和gd扩展
    Docker常用命令
    Ubuntu常用命令
    单例模式的优缺点和使用场景
    ABP 多租户数据共享
    ABP Core 后台Angular+Ng-Zorro 图片上传
    ERROR Error: If ngModel is used within a form tag, either the name attribute must be set or the form control must be defined as 'standalone' in ngModelOptions.
    AbpCore 执行迁移文件生成数据库报错 Could not find root folder of the web project!
  • 原文地址:https://www.cnblogs.com/lisr/p/3943348.html
Copyright © 2011-2022 走看看