温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

[02]EXTJS4.0的新特性

发布时间:2020-06-11 16:00:22 阅读:480 作者:jimode2013 栏目:web开发
前端开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

笔记:

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>HELLO WORD</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="indexDemo.js"></script> </head> <body> </body> </html> 

indexDemo.js

//类的声明其实就是一个function function user(){   //java 语言的public   this.Name = 'uspcat';   this.age = 26;    //var 就相当于高级语言中的private   var email = "yfc@126.com";         this.getEmail = function(){     return email;   } }  var u = new user(); alert(u.Name); alert(u.email); alert(u.getEmail());  var person = {     name:'yfc',     age:26 }; alert(person.name + " " + person['age']); 

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

这个例子主要讲如何使用创建Ext.window.Window,可以使用show方法显示窗口,

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

indexDemo2.js

(function(){     Ext.onReady(function(){         var win = new Ext.window.Window({                 width:400,                     height:300,                     title:'uspcat'                     });         win.show();      }); })(); 

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

这个例子主要将Extjs如何使用Ext.get(获取指定id的页面元素)和事件

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

indexDemo3.js

(function(){     Ext.onReady(function(){          var win = new Ext.window.Window({             width:400,             height:300,             title:'uspcat',             closeAction:false//如果没有设置,关闭之后第二次win.show()将会报el is null    el.addCls.apply(el,   arguments);          });     //1.得到那个按钮的dom对象         //2.为按钮对象添加单击的事件         //3.单击的时候调用对象win的show方法         Ext.get("myb").on("click",function(){       win.show();         },this);     }); })(); 

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

这个例子主要讲Ext.Function.alias如何创建对象方法的别名

lesson02_03.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>别名</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="indexDemo4.js"></script> </head> <body> </body> </html> 

indexDemo4.js

(function(){     Ext.onReady(function(){     var o = {       say : function(){         alert(111);       }         }        var fn = Ext.Function.alias(o,'say');        fn();     }); })(); 

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

这个例子主要将如何使用Ext.create创建对象

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

indexDemo5.js

(function(){     Ext.onReady(function(){     var win = Ext.create('Ext.window.Window',{       width:400,           height:300,           title:'uspcat'         });         win.show();     }); })(); 

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

这个例子主要讲Ext.define方法和initComponent属性,initComponent在创建类的对象的时候最自动调用,相当于java的构造器,另外还讲了callParent方法

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

indexDemo6.js

(function(){     Ext.onReady(function(){     Ext.define("myWin",{       extend:'Ext.window.Window',           width:400,           height:300,           title:'uspcat',           newtitle:'new uspcat',           mySetTitle:function(){             this.title = this.newtitle;           },       initComponentfunction(){             this.mySetTitle();         this.callParent(arguments);       }     });         Ext.create('myWin',{       title:'my win'     }).show();     }); })(); 

initComponent方法会自动调用

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

这个例子主要讲如何引入js文件

ux\mywin.js

Ext.define("myWin",{       extend:'Ext.window.Window',           width:400,           height:300,           title:'uspcat',           newtitle:'new uspcat',           mySetTitle:function(){             this.title = this.newtitle;           },       initComponentfunction(){             this.mySetTitle();         this.callParent(arguments);       }     }); 

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

indexDemo6.js

(function(){     Ext.onReady(function(){         Ext.create('myWin',{       title:'my win'     }).show();     }); })(); 

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

 这个例子是需要服务器启动的时候才能正常运行的,有两个地方需要注意:

第一个是

Ext.Loader.setConfig({   enabled:true,   paths:{     myApp:'lessonTwo/ux'//什么位置都没有关系   }  );  

另一个是类名,必须是在当前文件夹下的文件下面的js文件才能够动态加载,而且类名必须是当前文件夹下的文件名加上js文件名

indexDemo7.js

(function(){    Ext.Loader.setConfig({      enabled:true,      paths:{        myApp:'lessonTwo/ux'//什么位置都没有关系      }    });     Ext.onReady(function(){        Ext.create('ux.myWin2',{//在ux/myWin2下的ux.myWin2类   title:'my win',          //requires:['myWin'] }).show();    }); )(); 

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

ux\myWin2.js

Ext.define("ux.myWin2",{       extend:'Ext.window.Window',           width:400,           height:300,           title:'uspcat',           newtitle:'new uspcat',           mySetTitle:function(){             this.title = this.newtitle;           },       initComponentfunction(){             this.mySetTitle();         this.callParent(arguments);       }     }); 

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

这个例子主要是显示 当点击按钮之后myWin2.js这个js文件是动态加载

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

indexDemo8.js

(function(){    Ext.Loader.setConfig({      enabled:true,      paths:{        myApp:'lessonTwo/ux'//什么位置都没有关系      }    });     Ext.onReady(function(){        Ext.get("myb").on("click",function(){          Ext.create('ux.myWin2',{//在ux/myWin2下的ux.myWin2类     title:'my win',            //requires:['myWin']   }).show();         });     }); )(); 

ux\myWin2.js

Ext.define("ux.myWin2",{       extend:'Ext.window.Window',           width:400,           height:300,           title:'uspcat',           newtitle:'new uspcat',           mySetTitle:function(){             this.title = this.newtitle;           },       initComponentfunction(){             this.mySetTitle();         this.callParent(arguments);       }     }); 

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

这个例子主要是讲Ext.define中config属性,配置了之后就会自动有getPropertyName方法了

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

indexDemo9.js

(function(){    Ext.Loader.setConfig({      enabled:true,      paths:{        myApp:'lessonTwo/ux'//什么位置都没有关系      }    });    Ext.onReady(function(){         Ext.get("myb").on("click",function(){          var win = Ext.create('ux.myWin3',{//在ux/myWin2下的ux.myWin2类     title:'my win',            price:60   });             alert(win.getPrice());          win.show();     });     }); )(); 

ux\myWin3.js

Ext.define("ux.myWin3",{       extend:'Ext.window.Window',           width:400,           height:300,           config:{               price:500           },           title:'uspcat',           newtitle:'new uspcat',           mySetTitle:function(){             this.title = this.newtitle;           },       initComponent: function(){             this.mySetTitle();         this.callParent(arguments);       }     }); 

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

最后一个例子主要是讲Ext.define的mixins属性,其实跟js的实例继承法很类似

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

indexDemo10.js

 (function(){     Ext.onReady(function(){     Ext.define('say',{       cansay:function(){          alert("hello");       }     });      Ext.define('sing',{       sing:function(){              alert('sing hello 123');       }     });      Ext.define('user',{           extend:'sing',//继承只能继承一个类       mixins:{             say:'say'//这个say类的say对象       }     });         var u = Ext.create('user',{});         u.cansay();         u.sing();     }); })(); 

11

附件:http://down.51cto.com/data/2361712

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

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

AI

开发者交流群×