行业资讯

[02]EXTJS4.0的新特性

发布时间：2020-06-11 16:00:22 作者：jimode2013
来源：网络 阅读：469

笔记：

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
推荐阅读：
  1. 19个基于 HTML5 和 CSS3 开发的优秀应用程序
  2. 使用python怎么爬取微信公众号文章

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。

教程 extjs4 技术狂人论坛

上一篇：php怎么设置时区

下一篇：spring-boot-plus快速开始 Quick Start(一)

相关阅读

您好，登录后才能下订单哦！

密码登录
登录注册
获取短信验证码
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》
产品服务
地区划分
帮助支持
关于我们
行业资讯-文章归档 问答-问答归档
广州亿速云计算有限公司

7*24小时在线电话：400-100-2938

7*24小时在线QQ：800811969

Copyright © Yisu Cloud Ltd. All Rights Reserved. 2018 版权所有
粤ICP备17096448号-1 粤公网安备 44010402001142号