91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

[02]EXTJS4.0的新特性

發布時間：2020-06-11 16:00:22 來源：網絡 閱讀：469 作者：jimode2013 欄目：web開發

筆記：

1.JS 類聲明，和對象的創建

2.原型方法用EXTJS創建一個window

3.利用一個按鈕觸發window窗體，了解一下EXTJS的事件機制

4.用EXTJS4.0的create來創建window

5.利用define自定義類并且繼承(extend)window

   //初始化的方法 構造器

   initComponent:function(){

this.callParent(arguments);

   }

6.requires  JS的異步加載

7.config 自動的get和set

8.mixins 類的混合

 

 

--------------------------------------------------------------------------------- 

這個例子主要講類的私有屬性和公有屬性

lesson02.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>HELLO WORD</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="indexDemo.js"></script> 
  9. </head> 
  10. <body> 
  11. </body> 
  12. </html> 

indexDemo.js

  1. //類的聲明其實就是一個function 
  2. function user(){ 
  3.   //java 語言的public 
  4.   this.Name = 'uspcat'; 
  5.   this.age = 26; 
  6.  
  7.   //var 就相當于高級語言中的private 
  8.   var email = "yfc@126.com";   
  9.  
  10.    
  11.   this.getEmail = function(){ 
  12.     return email; 
  13.   } 
  14. } 
  15.  
  16. var u = new user(); 
  17. alert(u.Name); 
  18. alert(u.email); 
  19. alert(u.getEmail()); 
  20.  
  21. var person = { 
  22.     name:'yfc', 
  23.     age:26 
  24. }; 
  25. alert(person.name + " " + person['age']); 

------------------------------------------------

這個例子主要講如何使用創建Ext.window.Window,可以使用show方法顯示窗口，

lesson02.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.window.Window</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="indexDemo2.js"></script> 
  9. </head> 
  10. <body> 
  11. </body> 
  12. </html> 

indexDemo2.js

  1. (function(){ 
  2.     Ext.onReady(function(){ 
  3.         var win = new Ext.window.Window({ 
  4.                 width:400, 
  5.                     height:300, 
  6.                     title:'uspcat'  
  7.                    }); 
  8.         win.show(); 
  9.  
  10.     }); 
  11. })(); 

------------------------------------------------------------------

這個例子主要將Extjs如何使用Ext.get（獲取指定id的頁面元素）和事件

lesson02_02.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.window.Window</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="indexDemo2.js"></script> 
  9. </head> 
  10. <body> 
  11.   <button id="myb">Show</button> 
  12. </body> 
  13. </html> 

indexDemo3.js

  1. (function(){ 
  2.     Ext.onReady(function(){ 
  3.          var win = new Ext.window.Window({ 
  4.             width:400, 
  5.             height:300, 
  6.             title:'uspcat', 
  7.             closeAction:false//如果沒有設置，關閉之后第二次win.show()將會報el is null    el.addCls.apply(el,  
  8.  
  9. arguments); 
  10.          }); 
  11.     //1.得到那個按鈕的dom對象 
  12.         //2.為按鈕對象添加單擊的事件 
  13.         //3.單擊的時候調用對象win的show方法 
  14.         Ext.get("myb").on("click",function(){ 
  15.       win.show(); 
  16.         },this); 
  17.     }); 
  18. })(); 

----------------------------------------------------------------------------------

這個例子主要講Ext.Function.alias如何創建對象方法的別名

lesson02_03.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>別名</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="indexDemo4.js"></script> 
  9. </head> 
  10. <body> 
  11. </body> 
  12. </html> 

indexDemo4.js

  1. (function(){ 
  2.     Ext.onReady(function(){ 
  3.     var o = { 
  4.       say : function(){ 
  5.         alert(111); 
  6.       } 
  7.         } 
  8.        var fn = Ext.Function.alias(o,'say'); 
  9.        fn(); 
  10.     }); 
  11. })(); 

------------------------------------------------------------------------------

這個例子主要將如何使用Ext.create創建對象

lesson02_04.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.create</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="indexDemo5.js"></script> 
  9. </head> 
  10. <body> 
  11. </body> 
  12. </html> 

indexDemo5.js

  1. (function(){ 
  2.     Ext.onReady(function(){ 
  3.     var win = Ext.create('Ext.window.Window',{ 
  4.       width:400, 
  5.           height:300, 
  6.           title:'uspcat' 
  7.         }); 
  8.         win.show(); 
  9.     }); 
  10. })(); 

--------------------------------------------------------------

這個例子主要講Ext.define方法和initComponent屬性，initComponent在創建類的對象的時候最自動調用，相當于java的構造器，另外還講了callParent方法

lesson02_06.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.create</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="indexDemo6.js"></script> 
  9. </head> 
  10. <body> 
  11. </body> 
  12. </html> 

indexDemo6.js

  1. (function(){ 
  2.     Ext.onReady(function(){ 
  3.     Ext.define("myWin",{ 
  4.       extend:'Ext.window.Window', 
  5.           width:400, 
  6.           height:300, 
  7.           title:'uspcat', 
  8.           newtitle:'new uspcat', 
  9.           mySetTitle:function(){ 
  10.             this.title = this.newtitle; 
  11.           }, 
  12.       initComponent: function(){ 
  13.             this.mySetTitle(); 
  14.         this.callParent(arguments); 
  15.       } 
  16.     }); 
  17.         Ext.create('myWin',{ 
  18.       title:'my win' 
  19.     }).show(); 
  20.     }); 
  21. })(); 

initComponent方法會自動調用

----------------------------------------------------------------------------------

這個例子主要講如何引入js文件

ux\mywin.js

  1. Ext.define("myWin",{ 
  2.       extend:'Ext.window.Window', 
  3.           width:400, 
  4.           height:300, 
  5.           title:'uspcat', 
  6.           newtitle:'new uspcat', 
  7.           mySetTitle:function(){ 
  8.             this.title = this.newtitle; 
  9.           }, 
  10.       initComponent: function(){ 
  11.             this.mySetTitle(); 
  12.         this.callParent(arguments); 
  13.       } 
  14.     }); 

lesson02_06.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.create</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="indexDemo6.js"></script> 
  9. <script type="text/javascript" src="ux/mywin.js"></script> 
  10. </head> 
  11. <body> 
  12. </body> 
  13. </html> 

indexDemo6.js

  1. (function(){ 
  2.     Ext.onReady(function(){ 
  3.         Ext.create('myWin',{ 
  4.       title:'my win' 
  5.     }).show(); 
  6.     }); 
  7. })(); 

--------------------------------------------------------------------------------------

 這個例子是需要服務器啟動的時候才能正常運行的，有兩個地方需要注意：

第一個是

  1. Ext.Loader.setConfig({  
  2.  enabled:true,  
  3.  paths:{  
  4.    myApp:'lessonTwo/ux'//什么位置都沒有關系  
  5.  }  
  6. );  

另一個是類名，必須是在當前文件夾下的文件下面的js文件才能夠動態加載，而且類名必須是當前文件夾下的文件名加上js文件名

indexDemo7.js

  1. (function(){ 
  2.    Ext.Loader.setConfig({ 
  3.      enabled:true, 
  4.      paths:{ 
  5.        myApp:'lessonTwo/ux'//什么位置都沒有關系 
  6.      } 
  7.    }); 
  8.  
  9.    Ext.onReady(function(){ 
  10.        Ext.create('ux.myWin2',{//在ux/myWin2下的ux.myWin2類 
  11.   title:'my win', 
  12.          //requires:['myWin'] 
  13. }).show(); 
  14.    }); 
  15. )(); 

lesson02_07.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.create</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="indexDemo7.js"></script> 
  9. </head> 
  10. <body> 
  11. </body> 
  12. </html> 

ux\myWin2.js

  1. Ext.define("ux.myWin2",{ 
  2.       extend:'Ext.window.Window', 
  3.           width:400, 
  4.           height:300, 
  5.           title:'uspcat', 
  6.           newtitle:'new uspcat', 
  7.           mySetTitle:function(){ 
  8.             this.title = this.newtitle; 
  9.           }, 
  10.       initComponent: function(){ 
  11.             this.mySetTitle(); 
  12.         this.callParent(arguments); 
  13.       } 
  14.     }); 

----------------------------------------------------------------------------------

這個例子主要是顯示 當點擊按鈕之后myWin2.js這個js文件是動態加載

lesson02_08.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.create</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="indexDemo8.js"></script> 
  9. </head> 
  10. <body> 
  11.   <button id="myb">Show</button> 
  12. </body> 
  13. </html> 

indexDemo8.js

  1. (function(){ 
  2.    Ext.Loader.setConfig({ 
  3.      enabled:true, 
  4.      paths:{ 
  5.        myApp:'lessonTwo/ux'//什么位置都沒有關系 
  6.      } 
  7.    }); 
  8.  
  9.    Ext.onReady(function(){ 
  10.        Ext.get("myb").on("click",function(){ 
  11.          Ext.create('ux.myWin2',{//在ux/myWin2下的ux.myWin2類 
  12.     title:'my win', 
  13.            //requires:['myWin'] 
  14.   }).show();         
  15. }); 
  16.  
  17.    }); 
  18. )(); 

ux\myWin2.js

  1. Ext.define("ux.myWin2",{ 
  2.       extend:'Ext.window.Window', 
  3.           width:400, 
  4.           height:300, 
  5.           title:'uspcat', 
  6.           newtitle:'new uspcat', 
  7.           mySetTitle:function(){ 
  8.             this.title = this.newtitle; 
  9.           }, 
  10.       initComponent: function(){ 
  11.             this.mySetTitle(); 
  12.         this.callParent(arguments); 
  13.       } 
  14.     }); 

-------------------------------------------------------------------------------------

這個例子主要是講Ext.define中config屬性，配置了之后就會自動有getPropertyName方法了

lesson02_09.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.create</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="indexDemo9.js"></script> 
  9. </head> 
  10. <body> 
  11.   <button id="myb">Show</button> 
  12. </body> 
  13. </html> 

indexDemo9.js

  1. (function(){ 
  2.    Ext.Loader.setConfig({ 
  3.      enabled:true, 
  4.      paths:{ 
  5.        myApp:'lessonTwo/ux'//什么位置都沒有關系 
  6.      } 
  7.    }); 
  8.    Ext.onReady(function(){ 
  9.  
  10.        Ext.get("myb").on("click",function(){ 
  11.          var win = Ext.create('ux.myWin3',{//在ux/myWin2下的ux.myWin2類 
  12.     title:'my win', 
  13.            price:60 
  14.   });    
  15.          alert(win.getPrice()); 
  16.          win.show();     
  17. }); 
  18.  
  19.    }); 
  20. )(); 

ux\myWin3.js

  1. Ext.define("ux.myWin3",{ 
  2.       extend:'Ext.window.Window', 
  3.           width:400, 
  4.           height:300, 
  5.           config:{ 
  6.               price:500 
  7.           }, 
  8.           title:'uspcat', 
  9.           newtitle:'new uspcat', 
  10.           mySetTitle:function(){ 
  11.             this.title = this.newtitle; 
  12.           }, 
  13.       initComponent: function(){ 
  14.             this.mySetTitle(); 
  15.         this.callParent(arguments); 
  16.       } 
  17.     }); 

----------------------------------------------------------------------------------

最后一個例子主要是講Ext.define的mixins屬性，其實跟js的實例繼承法很類似

lesson02_10.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.create</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="indexDemo10.js"></script> 
  9. </head> 
  10. <body> 
  11. </body> 
  12. </html> 

indexDemo10.js

  1.  (function(){ 
  2.     Ext.onReady(function(){ 
  3.     Ext.define('say',{ 
  4.       cansay:function(){ 
  5.          alert("hello"); 
  6.       } 
  7.     }); 
  8.  
  9.     Ext.define('sing',{ 
  10.       sing:function(){ 
  11.              alert('sing hello 123'); 
  12.       } 
  13.     }); 
  14.  
  15.     Ext.define('user',{ 
  16.           extend:'sing',//繼承只能繼承一個類 
  17.       mixins:{ 
  18.             say:'say'//這個say類的say對象 
  19.       } 
  20.     }); 
  21.         var u = Ext.create('user',{}); 
  22.         u.cansay(); 
  23.         u.sing(); 
  24.     }); 
  25. })(); 

11

附件：http://down.51cto.com/data/2361712
向AI問一下細節

免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。

AI
助
手
红桥区| 潜江市| 区。| 黔江区| 黑水县| 昭通市| 呈贡县| 赤水市| 庆元县| 综艺| 广宁县| 赤峰市| 广南县| 寿宁县| 凭祥市| 南宫市| 漳平市| 高要市| 灵山县| 轮台县| 定襄县| 鱼台县| 大洼县| 黄浦区| 长乐市| 禹城市| 含山县| 淮安市| 抚顺市| 伊宁市| 安西县| 桂平市| 平陆县| 蓝田县| 招远市| 仪征市| 镇原县| 成武县| 贵定县| 双鸭山市| 比如县|