第十三讲:ExtJS常用工具类和函数(上)

常用工具类和函数。

1. Ext.onReady()

Ext.onReady(function(){

Ext.MessageBox.alert("大家好","让我们回味一下!!");

});

2. Ext.get()

   get方法用来得到一个Ext元素,也就是类型为Ext.Element的对象, Ext.Element类是Ext对DOM的封装,代表DOM的元素,可以为每一个DOM创建一个对应的Element对象,可以通过Element对象 上的方法来实现对DOM指定的操作,比如用hide方法可以隐藏元素、initDD方法可以让指定的DOM具有拖放特性等。get方法其实是 Ext.Element.get的简写形式。

Ext.onReady(function(){

alert(Ext.get("test"));

alert(Ext.get("test").dom.innerHTML);

});

Ext.onReady(function(){

alert(Ext.get(document.getElementById("test")).dom.innerHTML);

});

 

Ext.onReady(function(){

alert(Ext.get((new Ext.Element("test"))).dom.innerHTML);

});

 

Ext.onReady(function(){

//Ext.get("test").hide();//隐藏

Ext.get("test").highlight()//高亮显示

Ext.get("test").setX(200);//x座标位置

Ext.get("test").setY(200);//y座标位置

});

3. Ext.select ()

select方法可以用来获得指定标签的DOM对象,其返回值是一个Ext.CompositeElement对象。

Ext.onReady(function(){

Ext.select("div").each(function(e){

alert(e.dom.innerHTML);

})

});

4. Ext.query ()

query方法和select方法非常类似,不同的是,它返回的是一个数组,它是Ext.DomQuery.select()的简写方式。

Ext.onReady(function(){

var arr = Ext.query("div");

for(var i = 0; i < arr.length; i++) {

alert(arr[i].innerHTML);

}

});

Ext.onReady(function(){

var arr = Ext.query("#test1");//选择元素id为test1的节点的数组

alert(arr.length);

});

Ext.onReady(function(){

var arr = Ext.query(".hello");// 通过class name来获取节点的数组

alert(arr.length);

});

Ext.onReady(function(){

var arr = Ext.query("*");//这会返回一个数组,包含文档的所有元素

alert(arr.length);

});

Ext.onReady(function(){

var arr = Ext.query("div p");//这会返回有一个元素的数组,包含p标签的div标签

alert(arr.length);

});

Ext.onReady(function(){

var arr = Ext.query("*[class=hello]");//这会得到class等于"hello"的所有元素

alert(arr.length);

});

Ext.onReady(function(){

var arr = Ext.query("*[class!=hello]");//这会得到class不等于"hello"的所有元素

alert(arr.length);

});

5.Ext.getCmp()

getCmp方法用来获得一个Ext组件,也就是一个已经在页面中初始化了的Component或其子类的对象,getCmp方法其实是Ext.ComponentMgr.get方法的简写形式。getCmp方法中只有一个参数,也就是组件的id。

Ext.onReady(function(){

 

var myPanel = new Ext.Panel({

id:"myPanel",

renderTo:"showPanel",

Html:"Hello,EveryOne!",

title:" "

});

 

Ext.getCmp("myPanel").setWidth(800);

Ext.getCmp("myPanel").setHeight(300);

Ext.getCmp("myPanel").setTitle("标题");

});

6. Ext.getDom()

getDom方法能够得到文档中的DOM节点,该方法中包含一个参数,该参数可以是DOM节点的id、DOM节点对象或DOM节点对应的Ext元素(Element)等。

Ext.onReady(function(){

alert(Ext.getDom("test").innerHTML)

});

Ext.onReady(function(){

alert(Ext.getDom(new Ext.Element("test")).innerHTML);

});

Ext.onReady(function(){

var e = new Ext.Element("test");

alert(Ext.getDom(e.dom).innerHTML);

});

7.Ext. getBody()

方法直接得到文档中与document.body这个DOM节点对应的ExtJS元素(Element),实质就是把document.body对象封装成ExtJS元素对象返回,该方法不带任何参数。

Ext.onReady(function(){

new Ext.Panel({

renderTo:Ext.getBody(),

id:"panel",

title:"panel"

})

});

8.Ext. getDoc()

getDoc方法实质上就是把当前html文档对象,也就是把document对象封装成ExtJS的Element对象返回,该方法不带任何参数。

9. Ext.isEmpty()

判断对象是否为空,当判断字符串时如果第二个参数不不同时结果也会不同,第二个参数表示'是否允许字符串为空'。

Ext.onReady(function(){

var panel = new Ext.Panel({

renderTo:Ext.getBody(),

id:"panel",

title:"panel"

});

 

var hi = null;

 

alert(Ext.isEmpty(hi));

});

Ext.onReady(function(){

var str = "123";

var str2 = "";

var str3 = null;

 

alert(Ext.isEmpty(str,true)); //允许为空

alert(Ext.isEmpty(str2,true)); //允许为空

alert(Ext.isEmpty(str3,true)); //允许为空

 

alert(Ext.isEmpty(str,false)); //不允许为空

alert(Ext.isEmpty(str2,false)); //不允许为空

alert(Ext.isEmpty(str3,true)); //不允许为空

});

10.Ext.each()方法。

遍历数组。

Ext.onReady(function(){

var arr = [1,2,3,4,5];

Ext.each(arr,function(item,index,allItems){

alert(item);

})

});

Ext.onReady(function(){

var arr = [1,2,3,4,5];

Ext.each(arr,function(item,index,allItems){

alert(allItems[index]);

})

});

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章