6章：经常使用工具类以及函数

<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()));
});