笔记:
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; }, initComponent: function(){ 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; }, initComponent: function(){ 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; }, initComponent: function(){ 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; }, initComponent: function(){ 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
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。