9.函数

1. Ext.onReady()

2. Ext.get()

3. Ext.select ()

4. Ext.query ()

5. Ext.getCmp()

6. Ext.getDom()

7. Ext. getBody()

8. Ext. getDoc()

9. Ext.isEmpty()

10. Ext.each()

11. Ext.DomHelper.append()

12. Ext.DomHelper.applyStyles()

13. Ext.DomHelper.createTemplate()

14. Ext.DomHelper.insertAfter()

15. Ext.DomHelper.insertBefore()

16. Ext.DomHelper.insertFirst()

17. Ext.DomHelper.insertHtml()

18. Ext.DomHelper.markup()

19. Ext.DomHelper.overwrite()

20. Ext.DomQuery.filter()

21. Ext.DomQuery.is()

22. Ext.DomQuery.selectNode()

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"));//获取div id=“test”的对象

　　alert(Ext.get("test").dom.innerHTML);//获取对象的内容
　　alert(Ext.get(document.getElementById("test")).dom.innerHTML);  //功能同上
　　alert(Ext.get((new Ext.Element("test"))).dom.innerHTML); //功能同上

}); 
<div id="test">22</div>

获取对象及属性设置

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){//获取所有标签“div”对象
       alert(e.dom.innerHTML); 
    })
});

4. Ext.query ()

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

Ext.onReady(function(){
    var arr = Ext.query("div"); //选择标签是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);//等价

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

　　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));     //true
});

判断字符串，第二个字段false不允许为空

Ext.onReady(function(){
    var str = "123";
    var str2 = "";
    var str3 = null;
    alert(Ext.isEmpty(str,true)); //允许为空 false
    alert(Ext.isEmpty(str,false)); //不允许为空 false
    alert(Ext.isEmpty(str2,true)); //允许为空 false
    alert(Ext.isEmpty(str2,false)); //不允许为空 true
    alert(Ext.isEmpty(str3,true)); //允许为空 true
    alert(Ext.isEmpty(str3,false)); //不允许为空 true
});

10.Ext.each()

遍历数组

Ext.onReady(function(){
    var arr = [1,2,3,4,5];
    Ext.each(arr,function(item,index,allItems){//allItems是遍历后的数据
       alert(item);
       alert(arr[index]);
       alert(allItems[index]);
}) });

11.Ext.DomHelper.append( Mixed el, Object/String o, [Boolean returnElement] ) :

HTMLElement/Ext.Element
创建一个新的DOM元素并添加到el
参数 o 是一个DOM对象或一个原始html块

Ext.onReady(function(){

    Ext.DomHelper.append(Ext.get("test"),"hello");

});

Ext.onReady(function(){
    new Ext.Panel({
       id:"myPanel",
       title:"myPanel",
       width:200,
       height:200,
       html:"<div id='hello'>hello</div>",
       renderTo:"test"
    });
    Ext.DomHelper.append(Ext.get("hello"),",world!");
});

12. Ext.DomHelper.applyStyles( String/HTMLElement el, String/Object/Function styles ) : void

应用样式styles到对象el，样式的对象表示方法见Ext.Element

Ext.onReady(function(){
    Ext.DomHelper.applyStyles(Ext.get("test"),"font-size:20px;color:red");
});

Ext.onReady(function(){
    Ext.DomHelper.applyStyles(Ext.get("test"),{"font-size":"20px","color":"red"});
});

13. Ext.DomHelper.createTemplate( Object o )

Ext.Template，由o创建一个新的Ext.Template对象。

Ext.onReady(function(){
    var tmp = Ext.DomHelper.createTemplate('<div id="{id}">world</div>');
    tmp.append(Ext.get("hello"),{id:"myid"});
});

Ext.onReady(function(){
    var tmp = Ext.DomHelper.createTemplate('<div id="{id}">{value}</div>');
    tmp.append(Ext.get("hello"),{id:"myid",value:"world"});
});

结果：

<div id="hello">22<div id="myid">world</div></div>

14.Ext.DomHelper.insertAfter( Mixed el, Object o, [Boolean returnElement] ) : HTMLElement/Ext.Element

创建一个新的DOM对象o并将他们插入到在el之后

Ext.onReady(function(){
    Ext.DomHelper.insertAfter(Ext.get("hello"),'<div id="test6">hello6</div>')
});

结果：在hello之后插入一个div

<div id="hello">22</div>
<div id="test6">hello6</div>

15.Ext.DomHelper.insertBefore( Mixed el, Object/String o, [Boolean returnElement] ) : HTMLElement/Ext.Element
创建一个新的DOM对象o并将他们插入在el之前。

Ext.onReady(function(){
    Ext.DomHelper.insertBefore(Ext.get("test4"),'<div id="test6">hello6</div>')
});

结果：插入到div之前

hello6
<div id="hello">22</div>

16. Ext.DomHelper.insertFirst( Mixed el, Object/String o, [Boolean returnElement] ) :
创建一个新的DOM元素并做为第一个子节点添加到el (看了这个insertFirst，建议将append取一个别名insertLast:))。

Ext.onReady(function(){
    Ext.DomHelper.insertFirst(Ext.get("test1"),"World!");
});

结果：将内容添加到div内容之前

<div id="hello">World!22</div>

17. Ext.DomHelper.insertHtml( String where, HTMLElement el, String html ) : HTMLElement

where 可选值beforeBegin/afterBegin/beforeEnd/afterEnd

将html代码插入到el附近

Ext.onReady(function(){
    Ext.DomHelper.insertHtml("afterEnd",Ext.getDom("test1"),"Hello")
});

18. Ext.DomHelper.markup( Object o ) : String
返回DOM对象o对应的html代码

Ext.onReady(function(){
    alert(Ext.DomHelper.markup(Ext.get("test1")));
    alert(Ext.DomHelper.markup(Ext.get("test1").dom));
});

19. Ext.DomHelper.overwrite( Mixed el, Object/String o, [Boolean returnElement] ) :
创建一个新的DOM元素o并用它重写el的内容

Ext.onReady(function(){
    Ext.DomHelper.overwrite(Ext.get("test1"),"Hello,World");
});

20.Ext.DomQuery.filter( Array el, String selector, Boolean nonMatches ) : Array

过滤el中的元素,保留符合selector的，如果nonMatches为真，结果相反。

简单的应用

Ext.onReady(function(){
    var divs = Ext.query("div");
    Ext.each(divs,function(item,index,allItems){
       alert(item.innerHTML);
    })
});

Ext.onReady(function(){
    var divs = Ext.DomQuery.select("div");
    Ext.each(divs,function(item,index,allItems){
       alert(item.innerHTML);
    })
});

选择符合selector的元素。

Ext.onReady(function(){
    var divs = Ext.DomQuery.select("div");
    var includes = Ext.DomQuery.filter(divs,"#test1");
    Ext.each(includes,function(item,index,allItems){
       alert(item.innerHTML);
    })
});

选择不符合selector的元素。

Ext.onReady(function(){
    var divs = Ext.DomQuery.select("div");
    var includes = Ext.DomQuery.filter(divs,"#test1",true);
    Ext.each(includes,function(item,index,allItems){
       alert(item.innerHTML);
    })
});

21.Ext.DomQuery.is( String/HTMLElement/Array el, String selector ) : Boolean

验证el是否匹配selector。

String类型的el，进行匹配。

Ext.onReady(function(){
    alert(Ext.DomQuery.is("test1","#test1"));
    alert(Ext.DomQuery.is("test1","#test2"));
    alert(Ext.DomQuery.is("test1","#test3"));
    alert(Ext.DomQuery.is("test1","#test4"));
    alert(Ext.DomQuery.is("test1","#test5"));
});

HTMLElement类型的el，进行匹配。

Ext.onReady(function(){
    alert(Ext.DomQuery.is(Ext.getDom("test1"),"#test1"));
    alert(Ext.DomQuery.is(Ext.getDom("test1"),"#test2"));
    alert(Ext.DomQuery.is(Ext.getDom("test1"),"#test3"));
    alert(Ext.DomQuery.is(Ext.getDom("test1"),"#test4"));
    alert(Ext.DomQuery.is(Ext.getDom("test1"),"#test5"));
});

Array类型的el，进行匹配。

Ext.onReady(function(){

    var divs = Ext.query("div");
    alert(Ext.DomQuery.is(divs,"div"));
    alert(Ext.DomQuery.is(divs,"#test1"));

    var includes = Ext.DomQuery.filter(divs,"#test1");
    alert(Ext.DomQuery.is(includes,"#test1"));

    var excepts = Ext.DomQuery.filter(divs,"#test1",true);
    alert(Ext.DomQuery.is(excepts,"#test1"));
});

select( String selector, [Node root] ) : Array

从root中选择匹配selector的对象数组

选择指定ID下的匹配selector的对象数组

Ext.onReady(function(){
    var divs = Ext.query("div","test1");
    Ext.each(divs,function(item,index,allItems){
       alert(item.innerHTML);
    })
    var divs2 = Ext.query("div","test2");
    Ext.each(divs2,function(item,index,allItems){
       alert(item.innerHTML);
    })

});

22.Ext.DomQuery.selectNode( String selector, [Node root] ) : Element

返回root中第一个匹配selector的对象

Ext.onReady(function(){
    var divs = Ext.DomQuery.selectNode("div","test1");
    Ext.each(divs,function(item,index,allItems){
       alert(item.innerHTML);
    })
});

posted @ 2015-08-09 15:48 W&L 阅读(148) 评论(0) 编辑收藏举报

刷新页面返回顶部

万里之行始于脚下

-_- 沉淀