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

摘要: //6.2.1 Ext.onReady(function fn, Object scope, boolean override);
//页面加载完毕后执行（scope为不同的浏览器,可以对不同的浏览器进行不同的处理）
//参数说明: fn为执行的函数, scope为fn执行的范围, override为是否以scope作为fn的默认执行范围

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