一、ExtJS中面向对象学习

关键点：

　　1、支持命名空间

　　2、支持类实例属性

　　3、支持类实例方法

　　4、支持类静态方法

　　5、支持构造方法

　　6、支持类继承

　　7、支持类实例方法重写

　　8、支持类命名空间别名

　　9、支持类别名

　　10、支持事件队列

1.支持命名空间

js：
　　Ext.namespace("Ext.com.wwl");
　　Ext.com.wwl.Helloword=function(){}
　　//Ext.com.wwl.helloword=Ext.emptyFn
jsp：
　　<script type="text/javascript">
        new Ext.com.wwl.Helloword();
    </script>

 

2.支持类实例属性

js:
    Ext.namespace("Ext.com.wwl");
    Ext.com.wwl.Person=function(){};
    Ext.apply(Ext.com.wwl.Person.prototype,{name:"王万里"});
jsp:
    <script type="text/javascript">
        var person=new Ext.com.wwl.Person();
        alert(person.name);
        person.name="哈哈";
        alert(person.name);
    </script>

 

3.支持类实例方法

js:
    Ext.namespace("Ext.com.wwl");
    Ext.com.wwl.Person = function() {
　　};
    Ext.apply(Ext.com.wwl.Person.prototype, {
            name : "",
            sex : "",
            print : function() {
                alert(String.format("姓名:{0},性别:{1}", this.name, this.sex));
            }
        });
jsp:
    <script type="text/javascript">
        var person=new Ext.com.wwl.Person();
        person.name="哈哈";
        person.sex="你猜";
        person.print();
        person.name="哼哼";
        person.sex="哈哈";
        person.print();
    </script>

 

4.支持静态方法

js:
　　Ext.namespace("Ext.com.wwl");
　　Ext.com.wwl.Person = function() {
　　};
　　Ext.apply(Ext.com.wwl.Person.prototype, {
            name : "",
            sex : "",
            print : function() {
                alert(String.format("姓名:{0},性别:{1}", this.name, this.sex));
            }
        });
　　Ext.com.wwl.Person.print1=function(_name,_sex){
    　　var person=new Ext.com.wwl.Person();
   　　 person.name=_name;
   　　 person.sex=_sex;
    　　person.print();
　　}
jsp:
　　<script type="text/javascript">
        Ext.com.wwl.Person.print1("ss","n");
　　</script>

 

5.支持构造方法

js:
　　Ext.namespace("Ext.com.wwl");
　　Ext.com.wwl.Person = function(_cfg) {
    　　Ext.apply(this, _cfg);
　　};
　　Ext.apply(Ext.com.wwl.Person.prototype, {
            name : "",
            sex : "",
            print : function() {
                alert(String.format("姓名:{0},性别:{1}", this.name, this.sex));
            }
        });
　　Ext.com.wwl.Person.print1=function(_name,_sex){
   　　 var person=new Ext.com.wwl.Person({name:_name,sex:_sex});
    　　person.print();
　　}
jsp:
　　<script type="text/javascript">
        Ext.com.wwl.Person.print1("ss","n");
    </script>

 

6.支持类继承

Person.js:
　　Ext.namespace("Ext.com.wwl");
　　Ext.com.wwl.Person = function(_cfg) {
   　　 Ext.apply(this, _cfg);
　　};
　　Ext.apply(Ext.com.wwl.Person.prototype, {
            job:"无",
            print : function() {
                alert(String.format("姓名:{0},性别:{1},工作{2}", this.name, this.sex,this.job));
            }
        });
Student.js
　　Ext.namespace("Ext.com.wwl");
　　Ext.com.wwl.Student=function(_cfg){
   　　 Ext.apply(this,_cfg);
　　}
　　Ext.extend(Ext.com.wwl.Student,Ext.com.wwl.Person,{job:"学生"})
Teacher.js
　　Ext.namespace("Ext.com.wwl");
　　Ext.com.wwl.Teacher=function(_cfg){
  　　  Ext.apply(this,_cfg);
　　};
　　Ext.extend(Ext.com.wwl.Teacher,Ext.com.wwl.Person,{job:"老师"});
jsp:
    <script type="text/javascript">
        var person=new Ext.com.wwl.Person({name:"王万里0",sex:"男"});
        person.print();
        var student=new Ext.com.wwl.Student({name:"王万里1",sex:"男"});
        student.print();
        var teacher=new Ext.com.wwl.Teacher({name:"王万里2",sex:"男"});
        teacher.print();
    </script>

 

7.支持类实例方法重写

Personjs
　　Ext.namespace("Ext.com.wwl");
　　Ext.com.wwl.Person=function(_cfg){
  　　  Ext.apply(this,_cfg);
　　};
　　Ext.apply(Ext.com.wwl.Person.prototype,{
   　　 print:function(){
    　　    alert(String.format("姓名:{0},性别:{1},工作:{2}",this.name,this.sex,this.job));
  　　  }
　　});
Student.js
　　Ext.namespace("Ext.com.wwl");
　　Ext.com.wwl.Student=function(_cfg){
　　    Ext.apply(this,_cfg);
　　};
　　Ext.extend(Ext.com.wwl.Student,Ext.com.wwl.Person,{
  　　  print:function(){
   　　     alert(String.format("{0}是一名{1}{2}",this.name,this.sex,this.job));
   　　 }
　　});
jsp:
    <script type="text/javascript">
        var person=new Ext.com.wwl.Person({name:"王万里",sex:"男",job:"无工作"});
        person.print();
        var student=new Ext.com.wwl.Student({name:"王万里",sex:"男",job:"学生"});
        student.print();
    </script>

 

8.支持命名空间别名

Person.js
　　Ext.namespace("Ext.com.wwl");
　　Do=Ext.com.wwl;//命名空间别名（别名大写）
　　Ext.com.wwl.Person=function(_cfg){
   　　 Ext.apply(this,_cfg);
　　};
　　Ext.apply(Ext.com.wwl.Person.prototype,{
 　　   print:function(){
 　　       alert(String.format("姓名:{0},性别:{1},工作:{2}",this.name,this.sex,this.job));
 　　   }
　　});
　　Ext.com.wwl.Person.print=function(_name,_sex,_job){
　　//    var _person=new Ext.com.wwl.Person({name:_name , sex:_sex ,job:_job});
 　　   var _person=new Do.Person({name:_name , sex:_sex ,job:_job});
 　　   _person.print();
　　};
jsp:
    <script type="text/javascript">
        Ext.com.wwl.Person.print("王万里","男","无工作");</script>

 

9.类别名

Student.js
Ext.namespace("Ext.com.wwl");
　　Ext.com.wwl.Student=function(_cfg){
 　　   Ext.apply(this,_cfg);
　　};
　　PN=Ext.com.wwl.Student;//类别名（别名大写）注意必须在构造方法之后
　　Ext.apply(Ext.com.wwl.Student.prototype,{
 　　   print:function(){
 　　       alert(String.format("姓名:{0},性别:{1},工作:{2}",this.name,this.sex,this.job));
　　    }
　　});
　　Ext.com.wwl.Student.print=function(_name,_sex,_job){
　　    //var _person=new Ext.com.wwl.Student({name:_name , sex:_sex ,job:_job});
　　    var _person=new PN({name:_name , sex:_sex ,job:_job});
　　    _person.print();
　　};
jsp:
    <script type="text/javascript">
        Ext.com.wwl.Student.print("王万里","男","学生");
    </script>

 

10.事件队列

Event.js
　　Ext.namespace("Ext.com.wwl");
　　Ext.com.wwl.Person=function(){
 　　   this.addEvents(
   　　     "namechange",
   　　     "sexchange"
   　　     );
　　};
　　Ext.extend(Ext.com.wwl.Person,Ext.util.Observable,{
   　　 name:"",
   　　 sex:"",
   　　 setName:function(_name){
   　　     if(this.name!=_name){
   　　         this.fireEvent("namechange",this,this.name,_name);
   　　         this.name=_name;
   　　     }
   　　 },
   　　 setSex:function(_sex){
   　　     if(this.sex!=_sex){
   　　         this.fireEvent("sexchange",this,this.sex,_sex);
   　　         this.sex=_sex;
   　　     }
   　　 }
　　});　　
jsp:
　　<script type="text/javascript">
        var _person=null;
        Ext.onReady(function(){
            var txt_name=Ext.get("txt_name");
            var txt_sex=Ext.get("txt_sex");
            _person=new Ext.com.wwl.Person();
            _person.on("namechange",function(_person,_old,_new){
                txt_name.dom.value=_new;
            });
            _person.on("sexchange",function(_person,_old,_new){
                txt_sex.dom.value=_new;
            });
            _person.on("namechange",function(_person,_old,_new){
                document.title=_new;
            });
        });
        button_click=function(){
            _person.setName(prompt("请输入姓名:" , "")) ;
            _person.setSex(prompt("请输入性别:" , "")) ;
        };
    </script>
  <body>
    姓名:<input type="text" id="txt_name" maxlength="10"/><br/>
    性别:<input type="text" id="txt_sex" maxlength="10"/><br/>
    <input type="button" value="输入" onclick="button_click()"/>
  </body>
</html>