[02]EXTJS4.0的新特性

2025-02-08 技术教程

笔记：

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

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>HELLOWORD</title><linkrel="stylesheet"type="text/css"href="../extjs-4.1.0/resources/css/ext-all.css"/><scripttype="text/javascript"src="../extjs-4.1.0/bootstrap.js"></script><scripttype="text/javascript"src="indexDemo.js"></script></head><body></body></html>

indexDemo.js

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

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

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

lesson02.html

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>Ext.window.Window</title><linkrel="stylesheet"type="text/css"href="../extjs-4.1.0/resources/css/ext-all.css"/><scripttype="text/javascript"src="../extjs-4.1.0/bootstrap.js"></script><scripttype="text/javascript"src="indexDemo2.js"></script></head><body></body></html>

indexDemo2.js

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

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

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

lesson02_02.html

indexDemo3.js

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

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

lesson02_03.html

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>别名</title><linkrel="stylesheet"type="text/css"href="../extjs-4.1.0/resources/css/ext-all.css"/><scripttype="text/javascript"src="../extjs-4.1.0/bootstrap.js"></script><scripttype="text/javascript"src="indexDemo4.js"></script></head><body></body></html>

indexDemo4.js

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

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

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

lesson02_04.html

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>Ext.create</title><linkrel="stylesheet"type="text/css"href="../extjs-4.1.0/resources/css/ext-all.css"/><scripttype="text/javascript"src="../extjs-4.1.0/bootstrap.js"></script><scripttype="text/javascript"src="indexDemo5.js"></script></head><body></body></html>

indexDemo5.js

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

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

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

lesson02_06.html

indexDemo6.js

initComponent方法会自动调用

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

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

ux\mywin.js

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

lesson02_06.html

indexDemo6.js

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

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

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

第一个是

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

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

indexDemo7.js

lesson02_07.html

ux\myWin2.js

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

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

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

lesson02_08.html

indexDemo8.js

ux\myWin2.js

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

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

lesson02_09.html

indexDemo9.js

ux\myWin3.js

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

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

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

lesson02_10.html

indexDemo10.js

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