`
禹爸爸
  • 浏览: 79896 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

Ext学习笔记二(类定义)

ext 
阅读更多

在Ext中使用如下语句便可以定义一个类,

 

  1. Person=Ext.emptyFn;

当然这样定义的类只是一个空架子，没有任何属性和方法，使用下面的代码为其添加属性和方法

 

  1. Ext.apply(Person.prototype,{
  2. name:"ChrisMao",//自定义属性
  3. print:function(){//自定义方法
  4. alert(this.name);
  5. }
  6. });

使用命名空间
熟悉面向对象编程的朋友都了解命名空间这个概念，Ext同样支持命名空间。

 

  1. Ext.namespace("Ext.Emerson");//定义命名空间
  3. Ext.Emerson.Person=Ext.emptyFn;
  5. Ext.apply(Ext.Emerson.Person.prototype,{
  6. name:"ChrisMao",//自定义属性
  7. print:function(){//自定义方法
  8. alert(this.name);
  9. }
  10. });

使用示例：

  1. <html>
  2. <head>
  3. <linkrel="stylesheet"type="text/css"href="http://plt385130:8080/ext-2.2/resources/css/ext-all.css"/>
  4. <scripttype="text/javascript"src="http://plt385130:8080/ext-2.2/adapter/ext/ext-base.js"></script>
  5. <scripttype="text/javascript"src="http://plt385130:8080/ext-2.2/ext-all.js"></script>
  6. <scripttype="text/javascript"src="Person.js"></script>
  7. <scripttype="text/javascript">
  8. varp=newExt.Emerson.Person();
  9. p.name='ChrisMao';//属性赋值
  10. p.print();//调用print()方法
  11. </script>
  12. </head>
  13. <body>
  14. </body>
  15. </html>

定义构造函数

  1. Ext.namespace("Ext.Emerson");//定义命名空间
  3. Ext.Emerson.Person=function(_cfg){
  4. //dosomething
  5. Ext.apply(this,_cfg);
  6. };
  8. Ext.apply(Ext.Emerson.Person.prototype,{
  9. print:function(){//自定义方法
  10. alert(this.name);
  11. }
  12. });

使用示例

  1. <html>
  2. <head>
  3. <linkrel="stylesheet"type="text/css"href="http://plt385130:8080/ext-2.2/resources/css/ext-all.css"/>
  4. <scripttype="text/javascript"src="http://plt385130:8080/ext-2.2/adapter/ext/ext-base.js"></script>
  5. <scripttype="text/javascript"src="http://plt385130:8080/ext-2.2/ext-all.js"></script>
  6. <scripttype="text/javascript"src="Person.js"></script>
  7. <scripttype="text/javascript">
  8. varp=newExt.Emerson.Person({name:"ChrisMao"});
  9. p.print();//调用print()方法
  10. </script>
  11. </head>
  12. <body>
  13. </body>
  14. </html>


定义类静态方法

  1. Ext.Emerson.Person.print=function(_name){
  2. varp=newExt.Emerson.Person();
  3. p.name=_name;
  4. p.print();
  5. }

使用示例

  1. <html>
  2. <head>
  3. <linkrel="stylesheet"type="text/css"href="http://plt385130:8080/ext-2.2/resources/css/ext-all.css"/>
  4. <scripttype="text/javascript"src="http://plt385130:8080/ext-2.2/adapter/ext/ext-base.js"></script>
  5. <scripttype="text/javascript"src="http://plt385130:8080/ext-2.2/ext-all.js"></script>
  6. <scripttype="text/javascript"src="Person.js"></script>
  7. <scripttype="text/javascript">
  8. varp=newExt.Emerson.Person();
  10. //调用静态方法
  11. Ext.Emerson.Person.print('毛子兵');
  12. </script>
  13. </head>
  14. <body>
  15. </body>
  16. </html>

类继承

定义一个Student类，继承于Person类，并添加了Job属性。

  1. Ext.Emerson.Student=function(_cfg){
  2. //dosomething
  3. Ext.apply(this,_cfg);
  4. };
  6. Ext.extend(Ext.Emerson.Student,Ext.Emerson.Person,{job:"学生"});

 

版权声明：本文为博主原创文章，未经博主允许不得转载。

分享到：
| Ext学习笔记一（使用Ext.Panel创建一个登 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics