ExtJs学习资料14OOP[JavaScript面向对象编程]

1、1、引入 ExtJs 框架文件(存入 Global.js 文件中)document.write("<link rel="stylesheet" type="text/css" href="./extjs/resources/css/ext-all.css"/> "); document.write("<script type="text/javascript" src="./extjs/adapter/ext/ext-base.js"><

2、;/script>"); document.write("<script type="text/javascript" src="./extjs/ext-all.js"></script>"); document.write("<script type="text/javascript" src="./extjs/ext-lang-zh_CN.js"></script>");2、引入 Global.js 文件&l

3、t;script type="text/javascript" src="Global.js"></script>3、效果图 4、JS 源代码<script type="text/javascript">/ 命名空间定义Ext. namespace('NewOfHope.MyNameSpace');/ 将命名空间缩写为别名 ( 首字母大写其余小写 ) Ns=NewOfHope.MyNameSpac;e/; / 空函数( 定义一个类 ) document.write("Hello,

4、World!<br/>");/=/ 类实例属性定义; / 空函数 ( 定义一个类 )Ext. apply (, name:"JackLau");/=/ 类实例方法/ 声明空间 ( 定义一个类 )Ext. apply (,/ 初始化字段 name:"", sex :"",Print : function ()document.write(String. format ("name:0,sex:1",,this.sex)+"<br/>") );/=

5、/ 类静态方法,sex)var staticMethod=new ; staticM=name; staticMethod.sex=sex; staticMethod. Print (); /=/ 类的构造函数Ext.apply(this, cfg );文档来源为 :从网络收集整理 .word 版本可编辑 .欢迎下载支持,_sex)var person=new , sex :_sex);person.Show();/ 复制一个 javascript 对象的所有属性至类对象中Ext. apply (,Show:function()document.write(String.f

6、ormat("name:0,sex:1",,this.sex)+"<br/>"););/=/ 类的继承/ 声明类 Ren 并初始化Ext. apply (this, cfg );/ 定义类的方法及字段Ext. apply (,job :"none",PrintInfo :function()document.write(String. format ("name:0,sex:1,theJob:2",,this.sex,this.job)+"<br/&g

7、t;"););/Student 类构造函数Ext. apply (this, cfg );/ 类 Student 继承了类 RenExt. extend (,job:"Student");/Teacher 类构造函数Ext. apply (this, cfg );/ 类 Teacher 继承了类 RenExt. extend (,job:"Teacher");/=/ 类方法的的重写/ 类 Teacher 继承了类 Ren 并重写了 PrintInfo 方法Ext. extend (,job:"Teacher",PrintIn

8、fo :function()document.write(String. format (" 姓名是 :0, 性别是 :1, 他是一名 :2",,this.sex,this.job)+"<br/>");/=/ 命名空间的别称 ( 首字母大写其余小写 )Ns.ShortName=function( cfg )Ext. apply (this, cfg )Ext.apply(,ShowInfo :function()document.write(String.format("0 是一位 1 教师 ",this

9、.name,this.sex)+"<br/>"););/=/ 类别名的使用 ( 字母全部大写 ) Ns.MyFavoriteClass=Ext. emptyFn;/ 类别名( 字母全部大写 )MFC=Ns.MyFavoriteClass;Ext. apply (MFC.prototype , name:"xiaoWang", sex :"female", ShowMyInfo:function() document.write(String.format("0 是一位 1 性同志！ ",this.nam

10、e,this.sex)+"<br/>"););/=/ 事件Ns.EventObj =function ()this. addEvents (" namechange"," sexchange ");Ext. extend (Ns.EventObj,name:"",sex :"", setName:function(_name) if(!=_name) this. fireEvent (" namechange",this,this. name,_

11、name); this. name=_name;,setSex :function(_sex) if(this.sex!=_sex) this. fireEvent ("sexchange",this,this.sex,_sex); this.sex=_sex;/=/ 命名空间实例化对象操作new ;/ 类的实例var myPerson=new ;document.write(myPerson. name+"<br/>"); myPerson. name=" 刘俊 "document. write (myPerson.na

12、me+"<br/>"); / 类的方法var method=new ;method. name="jackLau" method. sex ="male"method. Print (); / 类的静态方法 "jackLau","male"); "Lau","female"); / 类的构造方法 "小强 "," 男 "); "李四 "," 女 ");刘俊 "

13、;, sex:" 男");();王二小 ", sex:" 女");();/ 类的继承 var student= new " student. PrintInfo / 类实例重写 var teacher=new " teacher. PrintInfo / 命名空间的别 ( 首字母大写 )var tech=new Ns. ShortName( name:" 王秀梅 ", sex:" 女");tech. ShowInfo ();/ 类别名( 字母全部大写 )var mfc=new Ns.

14、MyFavoriteClass ();mfc. ShowMyInfo();/ 事件eventObj=null;button_click =function ()eventObj. setName(prompt(" 请输入姓名 ","");eventObj. setSex (prompt(" 请输入性别 ","");Ext. onReady(function()var txtName=Ext. get ("txtName");var txtSex=Ext. get ("txtSex&qu

15、ot;);eventObj=new Ns. EventObj ();eventObj. on(" namechange",function(eventObj,_old,_new););eventObj. on(" sexchange ",function(eventObj,_old,_new););eventObj. on(" namechange",function(eventObj,_old,_new)document. title );</script>5、HTML页面元素 <div id=" main">txtName " /><br/>txtSex " />();" id=" button " value=" 单击输入 " />姓名 :<input type="text" readonly="r