EXTJS4.0的core包和Ext类-原创手记-慕课网

所有Element(通过Ext.get,Ext.fly)都是Ext.dom.Element封装的对象

1.Ext.dom.Element(Ext.core.Element,Ext.Element) API解释它是组件和控件的基础它对一个DOM对象的封装(Document Object Model) 1.1如何得到Element Ext.fly( String/HTMLElement dom, [String named] ) : Ext.dom.AbstractElement.Fly Ext.get( String/HTMLElement/Ext.Element el ) : Ext.dom.Element 1.2 Element相关方法 addClsOnClick( String className, [Function testFn], [Object scope] ) : Ext.dom.Element addClsOnOver( String className, [Function testFn], [Object scope] ) : Ext.dom.Element addKeyMap( Object config ) : Ext.util.KeyMap addKeyListener( String/Number/Number[]/Object key, Function fn, [Object scope] ) : Ext.util.KeyMap appendChild( String/HTMLElement/Ext.dom.AbstractElement el ) : Ext.dom.AbstractElement createChild( Object config, [HTMLElement insertBefore], [Boolean returnDom] ) : Ext.dom.AbstractElement2.Ext.DomHelper API解释它可以很容易地操作页面的HTML和DOM元素 append(Mixed el,Object/String o,[Boolean returnElement]):HTMLElement/Ext.core.Element 追加一个孩子3.Ext //方法是执行在文件加载完之后和onload执行之后，image加载之前 onReady( Object fn, Object scope, Object options ) get( String/HTMLElement/Ext.Element el ) : Ext.dom.Element query( String path, [HTMLElement root], [String type] ) : HTMLElement[] 语法看Ext.DomQuery(xpath语法) getCmp( String id ) 返回组件管理器管理的ID组件 isEmpty( Object value, [Boolean allowEmptyString] ) : Boolean namespace( String... namespaces ) : Object each( Array/NodeList/Object iterable, Function fn, [Object scope], [Boolean reverse] ) : Boolean apply( Object object, Object config, [Object defaults] ) : Object encode( Object o ) : String select( String selector ) : Ext.CompositeElement typeOf( Object value ) : String-------------------------------------------------------------------------------------appendChild.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>appendChild</title> <link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/> <script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script> <script type="text/javascript" src="appendChild.js"></script> </head> <body> <center>    <div id="div01"></div><br/> </center> </body> </html>

appendChild.js

(function(){     Ext.onReady(function(){       function createChild(){         var el = document.createElement("h5");         el.appendChild(document.createTextNode("我是被追加的"));           return el;       }       Ext.get("div01").appendChild(createChild());    }); })();

---------------------------------------------------------------------------------------createChild.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>createChild</title> <link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/> <script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script> <script type="text/javascript" src="createChild.js"></script> </head> <body> <center>    <div id="div01"></div><br/> </center> </body> </html>

createChild.js

(function(){     Ext.onReady(function(){       Ext.getBody().createChild({         tag:'li',         id:'item1',         html:'我是第一个节点'       });    }); })();

---------------------------------------------------------------------------------------lesson9.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>element</title> <link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/> <link rel="stylesheet" type="text/css" href="css.css"/> <script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script> <script type="text/javascript" src="element.js"></script> </head> <body> <center>    <div id="div01">我是第一个div</div><br/>    <input type="text" id="input01" value="abc"/> </center> </body> </html>

element.js

(function(){     Ext.onReady(function(){         var div01 = Ext.fly("div01");//之前版本的写法 Ext.core.Element.fly         //1.鼠标滑过的时候增加一个样式，滑出的时候移除样式         div01.addClsOnOver("divC");         //2.得到el的方法是Ext.get()        //This method does not retrieve Components.          //This method retrieves Ext.dom.Element objects which encapsulate DOM elements.          //To retrieve a Component by its ID, use Ext.ComponentManager.get.          var input01 = Ext.get("input01");         var fn1 = function(){            alert("单击B按钮调用这个函数");         }         input01.addKeyMap({key:Ext.EventObject.B,ctr:false,fn:fn1,scope:input01});          input01.addKeyListener({key:Ext.EventObject.X,ctr:true},function(){            alert("单击ctrl+X");         },input01);    }); })();

css.css

.divC{color:red}

-----------------------------------------------------------------------------------Ext.dom.Helper.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Ext.dom.Helper</title> <link rel="stylesheet" type="text/css" href="css.css"/> <link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/> <script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script> <script type="text/javascript" src="Ext.dom.Helper.js"></script> </head> <body> <div class="divC">divC</div> </body> </html>

Ext.dom.Helper.js

Ext.onReady(function(){     var p = Ext.create("Ext.panel.Panel",{       width:400,       height:300,       html:'<p id="p1">hello world</p>',       id:'myp01',           title:'my panel',       renderTo:Ext.getBody()     });         Ext.DomHelper.append(Ext.get("p1"),"<br/><div id='d'>我是被追加的</div>");          Ext.DomHelper.applyStyles(Ext.get("p1"),"color:red");          Ext.DomHelper.applyStyles(Ext.get("p1"),"color:red");         //下面两个是被当作兄弟追加的         //insertAfter( String/HTMLElement/Ext.Element el, Object o, [Boolean returnElement] ) :                 //HTMLElement/Ext.Element        //insertBefore( String/HTMLElement/Ext.Element el, Object/String o, [Boolean returnElement] ) :              //HTMLElement/Ext.Element       var html = Ext.DomHelper.createDom("<h1>hello</h1>");       console.log(html);  });

---------------------------------------------------------------------------------------Ext.each.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Ext.each</title> <link rel="stylesheet" type="text/css" href="css.css"/> <link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/> <script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script> <script type="text/javascript" src="Ext.each.js"></script> </head> <body> <div class="divC">divC</div> </body> </html>

Ext.each.js

Ext.onReady(function(){   var array = [-1,23,433,5,3];   Ext.each(array,function(i){      console.log(i);   });   var a = {     name:'yfc'   }   Ext.apply(a,{getName:function(){      return this.name;   }});   console.log(a.getName());   console.log(Ext.encode(a));      var o1= Ext.select("divC");   console.log(o1);      console.log(Ext.typeOf({}));   console.log(Ext.typeOf(""));  console.log(Ext.typeOf(function(){})); });

--------------------------------------------------------------------------------------Ext.getCmp.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Ext.getCmp</title> <link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/> <script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script> <script type="text/javascript" src="Ext.getCmp.js"></script> </head> <body> <div id="myp"/> </body> </html>

Ext.getCmp.js

Ext.onReady(function(){     var mypanel = Ext.create("Ext.panel.Panel",{       width:400,       height:300,       html:'<p>hello world</p>',       id:'myp01',           title:'my panel',       renderTo:'myp'     });     var myp = Ext.getCmp("myp01");     myp.setTitle("new Title"); });

--------------------------------------------------------------------------------------Ext.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Ext</title> <link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/> <script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script> <script type="text/javascript" src="Ext.js"></script> </head> <body onload="onload()"> </body> </html>

Ext.js

var onload = function(){     alert("1我是被body的onload事件调用的"); } Ext.onReady(function(){    //1.onReady 这个方法里面的第一个参数(function)它执行在页面文件加载完毕之后和onload完成之后，在图片加载之前被调用     alert("2 extjs"); });

---------------------------------------------------------------------------------------Ext.isEmpty.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Ext.isEmpty</title> <link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/> <script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script> <script type="text/javascript" src="Ext.isEmpty.js"></script> </head> <body> <div id="myp"/> </body> </html>

Ext.isEmpty.js

Ext.onReady(function(){         alert(Ext.isEmpty({id:'01'}));    alert(Ext.isEmpty({}));    alert(Ext.isEmpty('',true)); //false    alert(Ext.isEmpty('',false)); //true    var a;    alert(Ext.isEmpty(a)); });

---------------------------------------------------------------------------------------Ext.namespace.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Ext.namespace</title> <link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/> <script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script> <script type="text/javascript" src="Ext.namespace.js"></script> </head> <body> </body> </html>

Ext.namespace.js

Ext.onReady(function(){    Ext.namespace("COM.PCAT.MORE","COM.PCAT.CORE");    COM.PCAT.MORE.A =function(){     name='uspcat';    }    COM.PCAT.CORE.A =function(){     alert("COM.PCAT.CORE.A");    } });

---------------------------------------------------------------------------------------Ext.query.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Ext.query</title> <link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/> <script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script> <script type="text/javascript" src="Ext.query.js"></script> </head> <body> <center>   <table width="400" border="1">      <tr>     <td>123</td><td>123</td><td>123</td><td>123</td>      </tr>   </table> </center> </body> </html>

Ext.query.js

Ext.onReady(function(){     //通过类似XML的选择方式来查询我们的节点         var arr = Ext.query("TR TD");         console.log(arr); });

1111111111111