文档章节

6章:常用工具类以及函数

赤月三号
 赤月三号
发布于 2016/04/22 18:17
字数 749
阅读 41
收藏 3
<div class="box">
        <div class="w_320" id="myGet">get方法获取的页面元素</div>
        <div class="w_320 mySelectCss" id="mySelectCss" id="myGet">样式表选择器</div>
        
        <div id="div1" class="w_320" property1='pro1'>
            <div id="01" property1='pro1'>我是div01</div>
            <div id="02">我是div02</div>
        </div>
        
        <div class="abc w_320"> 
            <span>100</span>
            <span>200</span>
        </div>
        
        <div id="myPanelBox" class="w_320"></div>
    </div>

Ext.onReady(function(){
    
    //常用工具类以及函数
    
    //6.2 Ext常用函数
    
    //6.2.1 Ext.onReady(function fn, Object scope, boolean override);
    //页面加载完毕后执行(scope为不同的浏览器,可以对不同的浏览器进行不同的处理)
    //参数说明: fn为执行的函数, scope为fn执行的范围, override为是否以scope作为fn的默认执行范围
    
    //6.2.2 Ext.get() ID选择器
    var myGet = Ext.get("myGet");
    //console.info(myGet);
    
    //6.2.3 Ext.select() 样式表选择器
    var mySelectCss = Ext.select(".w_320",true);
    //console.info((mySelectCss.elements)[0].dom.innerHTML);
    //console.info((mySelectCss.elements)[1].dom.innerHTML);
    
    //6.2.4 Ext.query();
    var el = Ext.query("#div1");
    var targetD = Ext.query('div[property1=pro1]');
    //console.info(targetD.length);
    var cssDiv = Ext.query(".w_320");
    //console.info(cssDiv.length);
    
    var divSpan =  Ext.query("div span");
    //console.info(divSpan);
    
    //6.2.5 Ext.getCmp()获取指定id的Component对象
    //实例化一个组件Panel
    var  myPanel = new Ext.Panel({
        title : '示例',
        width : 300,
        id : "myPanel",
        renderTo : 'myPanelBox',
        html : "<div id='div5' property1='pro1'"+"style='height:200px; padding:5px;font-size:11pt'"+">实例化了一个id为'myPanel的panel组件'</div>"
    });
    
    var comp = Ext.getCmp('myPanel');
    //Ext.Msg.alert("提示","取得的id为'myPanel'的组件的类型为"+comp.getXType());
    //console.info("取得的id为'myPanel'的组件的类型为: "+comp.getXType());
    
    //6.2.6 getDom()通过指定的id或Dom节点或Element元素,获取HTML元素
    //console.info(Ext.getDom("div1"));
    
    //6.2.7 isEmpty()对指定的元素或者节点判断是否为空
    //console.info("myPanel是空吗?"+Ext.isEmpty(Ext.getCmp('myPanel')));
    //console.info("myPanel1是空吗?"+Ext.isEmpty(Ext.getCmp('myPanel1')));
    
    if(Ext.isEmpty(Ext.getCmp('myPanel1'))){
        //console.info("不存在");
    }else{
        //console.info("存在");
    }
    
    //6.2.8 Ext.namespace() /  Ext.ns()命名空间 避免相同的变量名引发的冲突
    Ext.ns("COM.CHAI","COM.WANG");
    people = {
        'name' : 'zhang',
        'age' : 12
    }; 
    COM.CHAI.people = {
        'name' : 'chai',
        'age' : 18
    };
    COM.WANG.people = {
        'name' : 'wang',
        'age' : 20
    };
    
    //console.info(people.name);
    //console.info(COM.CHAI.people.name);
    //console.info(COM.WANG.people.name);
    
    //6.2.9 Ext.each() 迭代处理
    var myArray = [],i;
    for(i=0; i<10; i++){
        myArray.push(i);
    }
    //对集合追加字符串
    function fn(item,index,allItems){
        if(item>5){
            return false;
        }else{
            allItems[index] = item + '_st';        
        }
    }
    function fn1(item,index,allItems){
        if(index>0){
            return false;
        }
        //console.info("最后的处理结果:"+allItems);//只执行一次
    }
    Ext.each(myArray,fn); //处理每一个函数
    Ext.each(myArray,fn1); //0_st,1_st,2_st,3_st,4_st,5_st,6,7,8,9
    
    //6.2.10 Ext.apply() 为指定的对象拷贝属性
    
    var srcObj = {
        'name' : '源对象',
        'text' : '我的内容已从srcObj中拷贝来了',
        'width' : '130'
    }
    var tarObj = {};
    //console.info(srcObj.name);
    Ext.apply(tarObj,srcObj);//拷贝对象属性
    //console.info(tarObj);
    
    //6.2.11 Ext.encode() 将JSON对象解析成字符串
    //console.info(tarObj);
    var jsonStr = Ext.encode(tarObj);
    //console.info(jsonStr);
    
    //6.2.12 Ext.htmlDecode(String value) 将定义的html字符串进行转换
    var str = "<table><tr><td style='color:red'>aaa</td></tr></table>";
    Ext.Msg.alert(str);
    //console.info(str);
    //console.info(Ext.htmlDecode(str));
    
    //6.2.13 Ext.typeOf() //判断传递参数的类型
    console.info(Ext.typeOf(123));
    console.info(Ext.typeOf("123"));
    console.info(Ext.typeOf(true));
    console.info(Ext.typeOf(new Date()));
});


© 著作权归作者所有

赤月三号
粉丝 19
博文 136
码字总数 69753
作品 0
昌平
前端工程师
私信 提问
书籍推荐:《实战Java虚拟机——JVM故障诊断与性能优化》下载

本书详细介绍Java虚拟机的基本原理和优化诊断方法。其中重点介绍Java虚拟机的体系结构、常用的虚拟机参数、Java虚拟机的垃圾回收原理、算法以及目前虚拟机所支持的各种垃圾回收器及其区别、特...

ddddd8
2017/11/29
0
0
买《Python从小白到大牛》专题视频课程,送配套纸质图书

经过一年多时间的呕心沥血,Python立体化图书——《Python从小白到大牛》即将与大家见面了。所谓立体化图书包括:电子图书、视频、课件和服务等内容。 《Python从小白到大牛》纸质图书将于9...

tony关东升
2018/07/23
0
0
微信小程序开发实战-纯正商业级应用

第1章 导学与申请appkey 如何更好的学习本课程?如何申请开发者key?如何调用和测试接口? 1-1 微信小程序商业级实战-课程导学。 1-2 优先自己开发 1-3 appkey的申请 1-4 课程维护说明 第2章...

拍拍阿
2018/08/08
0
0
慕课网最新纯正商业级应用-微信小程序开发实战

第1章 导学与申请appkey 如何更好的学习本课程?如何申请开发者key?如何调用和测试接口? 1-1 微信小程序商业级实战-课程导学。 1-2 优先自己开发 1-3 appkey的申请 1-4 课程维护说明 第2章...

陈冰冰和1
2018/08/08
0
0
图书推荐:Kotlin从入门到进阶实战

《Kotlin从入门到进阶实战》从Kotlin 语言的基础语法讲起,逐步深入到Kotlin进阶实战,并在最后配合项目实战案例,重点介绍了使用Kotlin+Spring Boot进行服务端开发和使用Kotlin进行Android...

程序员诗人
2018/09/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

SpringBoot中 集成 redisTemplate 对 Redis 的操作(二)

SpringBoot中 集成 redisTemplate 对 Redis 的操作(二) List 类型的操作 1、 向列表左侧添加数据 Long leftPush = redisTemplate.opsForList().leftPush("name", name); 2、 向列表右......

TcWong
今天
5
0
排序––快速排序(二)

根据排序––快速排序(一)的描述,现准备写一个快速排序的主体框架: 1、首先需要设置一个枢轴元素即setPivot(int i); 2、然后需要与枢轴元素进行比较即int comparePivot(int j); 3、最后...

FAT_mt
昨天
4
0
mysql概览

学习知识,首先要有一个总体的认识。以下为mysql概览 1-架构图 2-Detail csdn |简书 | 头条 | SegmentFault 思否 | 掘金 | 开源中国 |

程序员深夜写bug
昨天
10
0
golang微服务框架go-micro 入门笔记2.2 micro工具之微应用利器micro web

micro web micro 功能非常强大,本文将详细阐述micro web 命令行的功能 阅读本文前你可能需要进行如下知识储备 golang分布式微服务框架go-micro 入门笔记1:搭建go-micro环境, golang微服务框架...

非正式解决方案
昨天
8
0
前端——使用base64编码在页面嵌入图片

因为页面中插入一个图片都要写明图片的路径——相对路径或者绝对路径。而除了具体的网站图片的图片地址,如果是在自己电脑文件夹里的图片,当我们的HTML文件在别人电脑上打开的时候图片则由于...

被毒打的程序猿
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部