EXTJS4.0的core包和Ext類

原創 jimode2013 2018-09-11 05:37

所有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.AbstractElement
2.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
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  5. <title>appendChild</title> 
  6. <link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/> 
  7. <script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script> 
  8. <script type="text/javascript" src="appendChild.js"></script> 
  9. </head> 
  10. <body> 
  11. <center> 
  12.    <div id="div01"></div><br/> 
  13. </center> 
  14. </body> 
  15. </html> 
appendChild.js
  1. (function(){ 
  2.     Ext.onReady(function(){ 
  3.       function createChild(){ 
  4.         var el = document.createElement("h5"); 
  5.         el.appendChild(document.createTextNode("我是被追加的")); 
  6.           return el; 
  7.       } 
  8.       Ext.get("div01").appendChild(createChild()); 
  9.    }); 
  10. })(); 
運行結果：

---------------------------------------------------------------------------------------
createChild.html
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  5. <title>createChild</title> 
  6. <link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/> 
  7. <script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script> 
  8. <script type="text/javascript" src="createChild.js"></script> 
  9. </head> 
  10. <body> 
  11. <center> 
  12.    <div id="div01"></div><br/> 
  13. </center> 
  14. </body> 
  15. </html> 
createChild.js
  1. (function(){ 
  2.     Ext.onReady(function(){ 
  3.       Ext.getBody().createChild({ 
  4.         tag:'li', 
  5.         id:'item1', 
  6.         html:'我是第一個節點' 
  7.       }); 
  8.    }); 
  9. })(); 
運行結果：

---------------------------------------------------------------------------------------
lesson9.html
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  5. <title>element</title> 
  6. <link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/> 
  7. <link rel="stylesheet" type="text/css" href="css.css"/> 
  8. <script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script> 
  9. <script type="text/javascript" src="element.js"></script> 
  10. </head> 
  11. <body> 
  12. <center> 
  13.    <div id="div01">我是第一個div</div><br/> 
  14.    <input type="text" id="input01" value="abc"/> 
  15. </center> 
  16. </body> 
  17. </html> 
element.js
  1. (function(){ 
  2.     Ext.onReady(function(){ 
  3.         var div01 = Ext.fly("div01");//之前版本的寫法 Ext.core.Element.fly 
  4.         //1.鼠標滑過的時候增加一個樣式，滑出的時候移除樣式 
  5.         div01.addClsOnOver("divC"); 
  6.         //2.得到el的方法是Ext.get() 
  7.        //This method does not retrieve Components.  
  8.         //This method retrieves Ext.dom.Element objects which encapsulate DOM elements.  
  9.         //To retrieve a Component by its ID, use Ext.ComponentManager.get.  
  10.         var input01 = Ext.get("input01"); 
  11.         var fn1 = function(){ 
  12.            alert("單擊B按鈕調用這個函數"); 
  13.         } 
  14.         input01.addKeyMap({key:Ext.EventObject.B,ctr:false,fn:fn1,scope:input01});  
  15.         input01.addKeyListener({key:Ext.EventObject.X,ctr:true},function(){ 
  16.            alert("單擊ctrl+X"); 
  17.         },input01); 
  18.    }); 
  19. })(); 
css.css
  1. .divC{color:red} 
-----------------------------------------------------------------------------------
Ext.dom.Helper.html
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  5. <title>Ext.dom.Helper</title> 
  6. <link rel="stylesheet" type="text/css" href="css.css"/> 
  7. <link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/> 
  8. <script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script> 
  9. <script type="text/javascript" src="Ext.dom.Helper.js"></script> 
  10. </head> 
  11. <body> 
  12. <div class="divC">divC</div> 
  13. </body> 
  14. </html> 
Ext.dom.Helper.js
  1. Ext.onReady(function(){ 
  2.     var p = Ext.create("Ext.panel.Panel",{ 
  3.       width:400, 
  4.       height:300, 
  5.       html:'<p id="p1">hello world</p>', 
  6.       id:'myp01', 
  7.           title:'my panel', 
  8.       renderTo:Ext.getBody() 
  9.     }); 
  10.         Ext.DomHelper.append(Ext.get("p1"),"<br/><div id='d'>我是被追加的</div>"); 
  11.  
  12.         Ext.DomHelper.applyStyles(Ext.get("p1"),"color:red"); 
  13.  
  14.         Ext.DomHelper.applyStyles(Ext.get("p1"),"color:red"); 
  15.         //下面兩個是被當作兄弟追加的 
  16.         //insertAfter( String/HTMLElement/Ext.Element el, Object o, [Boolean returnElement] ) :          
  17.        //HTMLElement/Ext.Element 
  18.        //insertBefore( String/HTMLElement/Ext.Element el, Object/String o, [Boolean returnElement] ) :        
  19.       //HTMLElement/Ext.Element 
  20.       var html = Ext.DomHelper.createDom("<h1>hello</h1>"); 
  21.       console.log(html); 
  22.  
  23. }); 
---------------------------------------------------------------------------------------Ext.each.html
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  5. <title>Ext.each</title> 
  6. <link rel="stylesheet" type="text/css" href="css.css"/> 
  7. <link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/> 
  8. <script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script> 
  9. <script type="text/javascript" src="Ext.each.js"></script> 
  10. </head> 
  11. <body> 
  12. <div class="divC">divC</div> 
  13. </body> 
  14. </html> 
Ext.each.js
  1. Ext.onReady(function(){ 
  2.   var array = [-1,23,433,5,3]; 
  3.   Ext.each(array,function(i){ 
  4.      console.log(i); 
  5.   }); 
  6.   var a = { 
  7.     name:'yfc' 
  8.   } 
  9.   Ext.apply(a,{getName:function(){ 
  10.      return this.name; 
  11.   }}); 
  12.   console.log(a.getName()); 
  13.   console.log(Ext.encode(a)); 
  14.    
  15.   var o1= Ext.select("divC"); 
  16.   console.log(o1); 
  17.    
  18.   console.log(Ext.typeOf({})); 
  19.   console.log(Ext.typeOf("")); 
  20.  console.log(Ext.typeOf(function(){})); 
  21. }); 
--------------------------------------------------------------------------------------
Ext.getCmp.html
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  5. <title>Ext.getCmp</title> 
  6. <link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/> 
  7. <script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script> 
  8. <script type="text/javascript" src="Ext.getCmp.js"></script> 
  9. </head> 
  10. <body> 
  11. <div id="myp"/> 
  12. </body> 
  13. </html> 
Ext.getCmp.js
  1. Ext.onReady(function(){ 
  2.     var mypanel = Ext.create("Ext.panel.Panel",{ 
  3.       width:400, 
  4.       height:300, 
  5.       html:'<p>hello world</p>', 
  6.       id:'myp01', 
  7.           title:'my panel', 
  8.       renderTo:'myp' 
  9.     }); 
  10.     var myp = Ext.getCmp("myp01"); 
  11.     myp.setTitle("new Title"); 
  12. }); 
--------------------------------------------------------------------------------------
Ext.html
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  5. <title>Ext</title> 
  6. <link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/> 
  7. <script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script> 
  8. <script type="text/javascript" src="Ext.js"></script> 
  9. </head> 
  10. <body onload="onload()"> 
  11. </body> 
  12. </html> 
Ext.js
  1. var onload = function(){ 
  2.     alert("1我是被body的onload事件調用的"); 
  3. } 
  4. Ext.onReady(function(){ 
  5.    //1.onReady 這個方法裏面的第一個參數(function)它執行在頁面文件加載完畢之後和onload完成之後，在圖片加載之前被調用 
  6.     alert("2 extjs"); 
  7. }); 
---------------------------------------------------------------------------------------
Ext.isEmpty.html
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  5. <title>Ext.isEmpty</title> 
  6. <link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/> 
  7. <script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script> 
  8. <script type="text/javascript" src="Ext.isEmpty.js"></script> 
  9. </head> 
  10. <body> 
  11. <div id="myp"/> 
  12. </body> 
  13. </html> 
Ext.isEmpty.js
  1. Ext.onReady(function(){ 
  2.      
  3.    alert(Ext.isEmpty({id:'01'})); 
  4.    alert(Ext.isEmpty({})); 
  5.    alert(Ext.isEmpty('',true)); //false 
  6.    alert(Ext.isEmpty('',false)); //true 
  7.    var a; 
  8.    alert(Ext.isEmpty(a)); 
  9. }); 
---------------------------------------------------------------------------------------
Ext.namespace.html
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  5. <title>Ext.namespace</title> 
  6. <link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/> 
  7. <script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script> 
  8. <script type="text/javascript" src="Ext.namespace.js"></script> 
  9. </head> 
  10. <body> 
  11. </body> 
  12. </html> 
Ext.namespace.js
  1. Ext.onReady(function(){ 
  2.    Ext.namespace("COM.PCAT.MORE","COM.PCAT.CORE"); 
  3.    COM.PCAT.MORE.A =function(){ 
  4.     name='uspcat'; 
  5.    } 
  6.    COM.PCAT.CORE.A =function(){ 
  7.     alert("COM.PCAT.CORE.A"); 
  8.    } 
  9. }); 
---------------------------------------------------------------------------------------
Ext.query.html
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  5. <title>Ext.query</title> 
  6. <link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/> 
  7. <script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script> 
  8. <script type="text/javascript" src="Ext.query.js"></script> 
  9. </head> 
  10. <body> 
  11. <center> 
  12.   <table width="400" border="1"> 
  13.      <tr> 
  14.     <td>123</td><td>123</td><td>123</td><td>123</td> 
  15.      </tr> 
  16.   </table> 
  17. </center> 
  18. </body> 
  19. </html> 
Ext.query.js
  1. Ext.onReady(function(){ 
  2.     //通過類似XML的選擇方式來查詢我們的節點 
  3.         var arr = Ext.query("TR TD"); 
  4.         console.log(arr); 
  5. }); 
1111111111111
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

PacketiX.NET ***使用教程

雨的印記 2019-02-23 13:49:40

HTML基礎及應用視頻教程

xyduan 2019-02-23 00:39:39

ASP視頻教程

xyduan 2019-02-23 00:39:39

python 教程與手冊（60IN1合集）

小俠唐在飛 2019-02-23 00:38:50

火車頭採集器7.6閃退解決辦法（附火車頭採集器v7.6企業版永久破解版）

homepages 2019-02-23 00:38:44

php面向對象教程4

dyfhyf 2019-02-23 00:32:12

如何利用IPv6技術實現代理教程

肖勝傑 2019-02-23 00:17:46

Packet Tracer 5.0軟件使用教程深入詳解

_餘傑 2019-02-23 00:15:43

15款非常有用的Adobe Flex教程

心海新航 2019-02-23 00:10:09

一個簡單的PHP入門源程式-PHP教程,PHP基礎

tjsyxywg 2019-02-23 00:02:50

FreeBSD 8.x & 9.x 安裝文檔 轉載+原創

sharkyan 2019-02-22 23:51:38

Dynamips基礎教程系列---與本地網卡橋接

cisco2600 2019-02-22 23:40:01

emWin 2天速成實例教程000_如何快速入門ucGUI/emWin

emwin 2019-02-22 23:37:38

Wireshark簡明教程

mryujianbo 2019-02-22 23:36:29

Qt學習之路(21): event()

lhq_vip 2019-02-22 23:30:57