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