主题：EXTJS组件化----简易的私有和公有

最新推荐文章于 2014-12-13 14:02:00 发布
最新推荐文章于 2014-12-13 14:02:00 发布
阅读量1.5k 收藏
点赞数
分类专栏： ext 文章标签： extjs function layout 测试 class object
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lyr1985/article/details/4722962
版权

 我一直认为,凡是我已经了解的东西,国内必定已经有了一大票人已经熟知.但是我想我还是要继续写下去.

    上一篇文章简单介绍了一下组件化的思想,下面我想写一下EXTJS组件化的共有和私有,上一篇文章中的组件如下:

Js代码 复制代码
  1. Ext.namespace("Lesson1.FirstPanel");   
  2. /**  
  3.  * @author andy_ghg  
  4.  * @version 2009年9月24日23:22:09  
  5.  * @description 第一个派生类  
  6.  * @class Lesson1.FirstPanel  
  7.  * @extends Ext.Panel  
  8.  */  
  9. Lesson1.FirstPanel=Ext.extend(Ext.Panel,{   
  10.     frame:true,   
  11.     //初始化函数   
  12.     initComponent:function(){   
  13.         //继承父类的initComponent函数   
  14.         Lesson1.FirstPanel.superclass.initComponent.call(this,arguments);   
  15.         //为该组件添加了一个FormPanel   
  16.         this.formPanel=new Ext.FormPanel({   
  17.             defaults:{anchor:"95%",allowBlank:false},   
  18.             labelWidth:55,   
  19.             defaultType:"textfield",   
  20.             items:[{   
  21.                 fieldLabel:"用户名",   
  22.                 name:"username"  
  23.             },{   
  24.                 fieldLabel:"密码",   
  25.                 inputType:"password",   
  26.                 name:"password"  
  27.             }]   
  28.         });   
  29.         this.add(this.formPanel);   
  30.     },   
  31.     submitForm:function(){   
  32.         alert(this.formPanel);   
  33. //      this.formPanel.getForm().submit({   
  34. //          url:"",   
  35. //          success:function(){},   
  36. //          failure:function(){}   
  37. //      })   
  38.     }   
  39. });  


    我们可以看到,组件中所有的部件都是通过this.的方式来声明的,这样做有一个好处,我们可以直接通过组件的实例化对象去访问这些组成部分,例如:

Js代码 复制代码
  1. //*测试   
  2. Ext.onReady(function(){   
  3.     var panel=new Lesson1.FirstPanel({   
  4.         height:100,   
  5.         width:300,   
  6.         renderTo:Ext.getBody(),   
  7.         title:"组件",   
  8.         layout:"fit"  
  9.     });   
  10.     alert(panel.formPanel);   
  11. });   
  12. //*/  


    这里弹出的是一个Object,说明我们成功访问了组件内部的成员,这样做的好处很多,我们可以通过实例化对象来获取它内部的成员,从而操作它内部的成员.
    但是,我们在很多情况下是不愿意让别人去调用里面的东西的,怎么办?可以使用var关键字来创建组件内部私有的成员,这样,外部就不可以通过实例化对象去访问它们了:

Js代码 复制代码
  1. Ext.namespace("Lesson2.FirstPanel");   
  2. /**  
  3.  * @author andy_ghg  
  4.  * @version 2009年9月25日20:30:15  
  5.  * @description 私有与公有  
  6.  * @class Lesson2.FirstPanel  
  7.  * @extends Ext.Panel  
  8.  */  
  9. Lesson2.FirstPanel = Ext.extend(Ext.Panel,{   
  10.     frame : true,   
  11.     //初始化函数   
  12.     initComponent : function(){   
  13.         var privateObj = new Ext.Panel();   
  14.         this.publicObj = new Ext.Panel();   
  15.     }   
  16. });   
  17.   
  18. //*测试   
  19. Ext.onReady(function(){   
  20.     var panel = new Lesson2.FirstPanel({   
  21.         height:100,   
  22.         width:300,   
  23.         renderTo:Ext.getBody(),   
  24.         title:"组件",   
  25.         layout:"fit"  
  26.     });   
  27.        
  28.     alert(panel.privateObj);   
  29.     alert(panel.publicObj);   
  30. });   
  31. //*/  


    第一次弹出的是undifined第二次弹出的是Object,其实这个非常容易理解,上面的代码privateObj是作为一个对象存在的,而publicObj则是作为一个Lesson2.FirstPane的成员存在的,自然,publicObj就可以通过实例化对象被访问到,而privateObj由于作用域的不同,自然就无法被外部函数访问到.
    其实这种私有对象的写法没有太大用处,我一般是将函数作为私有来用的,而对象则没有必要私有化:

Js代码 复制代码
  1. Ext.namespace("Lesson2.FirstPanel");   
  2. /**  
  3.  * @author andy_ghg  
  4.  * @version 2009年9月24日23:22:09  
  5.  * @description 私有与公有  
  6.  * @class Lesson2.FirstPanel  
  7.  * @extends Ext.Panel  
  8.  */  
  9. Lesson2.FirstPanel = Ext.extend(Ext.Panel,{   
  10.     frame : true,   
  11.     //初始化函数   
  12.     initComponent : function(){   
  13.         Lesson2.FirstPanel.superclass.initComponent.call(this,arguments);   
  14.         var hello=function(){   
  15.             //我是私有函数,只有内部成员才能访问到   
  16.             alert("private");   
  17.         }   
  18.         this.publicFn=function(){   
  19.             //我是共有函数,外部可以通过对象名来调用   
  20.             alert("public");   
  21.         }   
  22.         this.buttons=[{   
  23.             text:"调用私有",   
  24.             handler:hello   
  25.         },{   
  26.             text:"调用公有",   
  27.             handler:this.publicFn,   
  28.             scope:this  
  29.         }]   
  30.     }   
  31. });  


    公开的函数可以不必定义在初始化方法里,一般都是定义在初始化方法外面的,就例如上面第一段代码中的submitForm函数一样.

    在使用这种写法的时候要注意一个问题,就是,定义组件内部的成员的时候,是通过this.的方式去定义的,但是如果组件自身就有这个属性就会造成重写,比如下面的代码将不会显示title里的文字:

Js代码 复制代码
  1. Ext.namespace("Lesson2.FirstPanel");   
  2. /**  
  3.  * @author andy_ghg  
  4.  * @version 2009年9月24日23:22:09  
  5.  * @description 私有与公有  
  6.  * @class Lesson2.FirstPanel  
  7.  * @extends Ext.Panel  
  8.  */  
  9. Lesson2.FirstPanel = Ext.extend(Ext.Panel,{   
  10.     frame : true,   
  11.     //初始化函数   
  12.     initComponent : function(){   
  13.         Lesson2.FirstPanel.superclass.initComponent.call(this,arguments);   
  14.         this.title=null;   
  15.     }   
  16. });   
  17.   
  18. //*测试   
  19. Ext.onReady(function(){   
  20.     var panel = new Lesson2.FirstPanel({   
  21.         height:100,   
  22.         width:300,   
  23.         renderTo:Ext.getBody(),   
  24.         title:"组件",   
  25.         layout:"fit"  
  26.     });   
  27.     panel.publicFn();   
  28. });   
  29. //*/  


    我们可以看到设置的title没有被展现出来,所以,当我们在新定义一个组件内部成员的时候一定要避免与组件父类里的成员冲突(除非你是刻意要重写),以免造成不必要的麻烦.这里就要考验你对你所继承的父类的认知程度了.

随风天涯
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ExtJS学习笔记（一）：ExtJS程序的结构及如何定义js的private, public属性、方法
smilingleo的专栏
01-04 4040
一般编写一个ExtJS程序需要包含下面四个类型的文件：1、html文件，引入样式表，js文件，并标明html元素；2、html同名js文件，用来创建组件，并动态替换DOM中的元素；3、组件js文件4、组件对应的css文件 对于html同名的js, Ext推荐的写法是这样的：Ext.namespace(ux);ux.app = function(){ 
extjs-reactjs-examples:ExtJS到React过渡的代码示例
05-16
以下是本系列所涵盖主题的概述（随着本系列的推出，链接将更新）： （） 类系统 （） （） （） （） 模板化 （） （代码） 清单（代码） 网格和树 基本网格（代码） 选择模型（代码） 功能和插件（代码...
EXTJS组件化(二)----简易的私有和公有
weixin_30919571的博客
12-13 83
我一直认为,凡是我已经了解的东西,国内必定已经有了一大票人已经熟知.但是我想我还是要继续写下去. 上一篇文章简单介绍了一下组件化的思想,下面我想写一下EXTJS组件化的共有和私有,上一篇文章中的组件如下: Js代码 Ext.namespace("Lesson1.FirstPanel");/***@authorandy_ghg...
ExtJS面向对象
weixin_34268579的博客
08-26 76
序言      1.ExtJs是一套很好的后台框架。现在很流行的，我们要会。         2.这是我写ExtJs的第一篇，以后会写很多直到把这框架运用的炉火纯青，走火入魔。 ExtJs中的命名空间             我是做.net的，这命名空间名字一样，功能也一样，都是对项目中类进行有效的管理，区分类的作用域。他们的层次结构都是使用“.”来划分的。只不过定义的时候不一样。Ext是...
ExtJS的namespace、js的公私有方法和属性
weixin_30546189的博客
06-10 76
Ext的namespace和java的namespace是同一个概念。Ext在对类进行定义的时候如果先前的包是不存在的则不能进行类定义。 具体说明在代码中都有注释。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>04_...
ExtJs源码分析与学习—ExtJs元素Element（四）
linder0209的专栏
06-07 109
元素的操作Ext.DomHelper         该类中的函数主要来简化创建DOM元素操作，采用单例模式实现。主要提供了createHtml和createDom函数。createHtml函数根据配置来创建HTML标签，最终通过innerHTML插入到文档中，二createDom函数根据配置来创建DOM对象，最终通过appendChild或insertBefore函数插入到文档中。下...
语言程序设计资料：ExtJs学习笔记-2积分.doc
09-17
语言程序设计资料：ExtJs学习笔记-2积分.doc
deluge:Deluge BitTorrent客户端-Git镜像，仅PR
04-29
它具有各种可用的用户界面，例如GTK-UI，Web-UI和Console-UI。 它以为核心来处理BitTorrent协议。安装从 ： pip install deluge从源代码： python setup.py buildpython setup.py install有关依赖关系的详细信息，...
extjs-653-docs.zip
06-25
extjs-6.5.3离线API文档，是学习和开发的必要工具。希望有所帮助！
oms.rar_OMS php_extjs_oms_php extjs_php-ext
09-21
EXTJS提供了丰富的UI组件，如表格、面板、图表等，使得开发者能够快速构建具有桌面级用户体验的Web应用。在这个OMS系统中，EXTJS可能被用来创建直观的用户界面，提高操作效率，同时提供数据可视化功能。 3. ODF：...
js属性和方法的可见性:私有属性(方法),实例属性(方法),类属性(方法)
li346985170的专栏
09-29 3142
/* 私有属性 : 在对象的定义中定义的非全局变量 实例属性 : 使用this为对象附加实例属性/对象名称.属性名 类属性   : "类"名.属性名/类名.prototype.属性名     */     //私有属性 : 在对象的定义中定义的非全局变量 /*    function Person(firstName,lastName){         var name=first
如何把session中的值赋给javaScript变量
07-19 4584
<br />如下：<br /><%<br />   BmInfo bm=(BmInfo)session.getAttribute("bm");<br />   KhUsers user=(KhUsers)session.getAttribute("userInfo");<br />  <br />  %><br />  <script type="text/javascript"><br />   var bm='<%=bm.getBmMc() %>';  <br />   var curreceUserN
ExtJs中出现this.ds.fields.get(i) is undefined错误解决方法
02-25 3559
<br />出现问题如题:依旧谷歌得：<br />原因:在Grid的列定义中一定要指定dataIndex属性,即使没有store中的对应上(比如一些附加字段)也要指定一个dataIndex,否则就会出现this.ds.fields.get(i) is undefined的错误。<br />解决方法：当然就是补上列定义中的dataIndex属性咯..
Ext 可编辑表格批量提交
08-27 2787
<br />Ext前台页面中从store中得到修改过的数据，循环读取，拼装成 对象数组。以参数提交到Action中。 对象的属性名应与实体中的属性名称对应。<br /> <br />this.save=function(){<br />   var ss=Ext.getCmp("isTp_view");   <br />   var dd=ss.text;        <br />   if(dd=="是"){<br />    Ext.Msg.alert("提示","你已经投过票！！");<br /> 
ext下拉框联动
07-19 2480
<br />第一个下拉列表框的监听事件：定义全局变量：var ryflByBeforeLoad=null。<br />listeners:{<br />     "select":function(combo, record,index){<br />      ryflByBeforeLoad=Ext.getCmp("khIndex_ryfl").getValue();   //得到当前所选的值，<br />      var aaa=Ext.getCmp("kaoheXMList");<br />   
带复选框(checkbox)的树
11-16 1340
 官方实例中有介绍如何将json数据变成一棵树的简单例子。该例子可以满足我们的一般需求。很多时候我们需要用到带checkbox的树。其实加个checkbox框先简单，只需要在返回来的json数据中加上 checked 项（为true/false）。要实现我们想要的选中父节点的checkbox后，自动选中子节点也很简单，只需要加上下面这一段代码就可以了。<a onclick="fun
ExtJS中的组件体系
11-09 1004
 组件大致可以分成三大类，即基本组件、工具栏组件、表单及元素组件。基本组件有：   xtype            Class-------------    ------------------box              Ext.BoxComponent  具有边框属性的组件button           Ext.Button　　按钮colorpalette     Ext.Col
extjs-4.1.1安装
最新发布
11-02
4. 初始化extjs-4.1.1。在你的JavaScript代码中，添加以下代码： ``` Ext.onReady(function() { // 在此编写你的extjs代码 }); ``` 5. 现在你可以开始使用extjs-4.1.1开发你的应用程序了。在onReady函数中添加你的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值