`
zengshaotao
  • 浏览: 787565 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

extjs4属性

 
阅读更多

1 ,  alias : 相当于别名一样,可以起多个,可以通过xtype和Ext.widget()创建实例:

 

Js代码  收藏代码
  1. Ext.define('SimplePanel', {  
  2.     extend: 'Ext.panel.Panel',  
  3.     alias: ['widget.simplepanel_007','widget.simplepanel_008'],  
  4.         title: 'Yeah!'  
  5. });  
  6.   
  7. //通过Ext.widget()创建实例  
  8. Ext.widget('simplepanel_007',{  
  9.     width : 100,  
  10.     height : 100  
  11. }).render(Ext.getBody());  
  12.   
  13. //通过xtype创建  
  14. Ext.widget('simplepanel_007', {  
  15.     width : 100,  
  16.     items: [  
  17.         {xtype: 'simplepanel_008', html: 'Foo'},  
  18.         {xtype: 'simplepanel_008', html: 'Bar'}  
  19.     ]  
  20. }).render(Ext.getBody());  

 

2 , alternateClassName : 跟alias有点类似,相当于给类找替身,可以多个,可以通过Ext.create()创建实例:

 

Js代码  收藏代码
  1. Ext.define('Boy', {  
  2.        //定义多个替身  
  3.        alternateClassName: ['boy2''boy3'],  
  4.        say : function(msg){  
  5.         alert(msg);  
  6.     }  
  7. });  
  8.               
  9. var boy1 = Ext.create('Boy');  
  10. boy1.say('I am boy1...');  
  11.   
  12. //可以通过alternateClassName实例化该类  
  13. var boy2 = Ext.create('boy2');  
  14. boy2.say('I am boy2...');  
  15.   
  16. var boy3 = Ext.create('boy3');  
  17. boy3.say('I am boy3...');  

 

3 , config:类的属性配置,属性可以自动生成geter/seter方法

 

Js代码  收藏代码
  1. Ext.define('Boy', {  
  2.     config : {  
  3.         name : 'czp',  
  4.         age : 25  
  5.     },  
  6.     constructor: function(cfg) {  
  7.             this.initConfig(cfg);  
  8.     }  
  9. });  
  10.               
  11. var czp = Ext.create('Boy',{name:'czpae86'});  
  12. //通过getName()方法获得属性name值  
  13. alert(czp.getName());  
  14. //通过setAge()方法改变属性age值  
  15. czp.setAge(25.5);  

 

4 , extend : 继承,可以继承单个类

 

Js代码  收藏代码
  1. Ext.define('Person', {  
  2.     say: function(text) { alert(text); }  
  3. });  
  4. Ext.define('Boy', {  
  5.     extend : 'Person'  
  6. });  
  7.               
  8. var czp = Ext.create('Boy');  
  9. //继承了Person,所以可以使用say()方法  
  10. czp.say('my name is czp.');  

 

5 , inheritableStatics : 定义静态方法,可以通过"类名.方法名"调用静态方法. 类似 statics属性,

区别是:子类也可以使用该静态方法,但statics属性定义的静态方法子类是不会继承的.

Js代码  收藏代码
  1. Ext.define('Person', {  
  2.     inheritableStatics : {  
  3.         sleep : function(){  
  4.             alert('sleep');  
  5.         }  
  6.     },  
  7.     say: function(text) { alert(text); }  
  8. });  
  9.   
  10. Ext.define('Boy', {  
  11.     extend : 'Person'  
  12. });  
  13.   
  14. //子类可以通过"类名.方法名"调用父类通过"inheritableStatics"定义的方法  
  15. Boy.sleep();  

 

6 , mixins : 可以实现多继承

 

Js代码  收藏代码
  1. Ext.define('Person', {  
  2.     say: function(text) { alert(text); }  
  3. });  
  4.   
  5. Ext.define('Boy', {  
  6.     play : function(){  
  7.         alert('play');  
  8.     }  
  9. });  
  10.   
  11. Ext.define('Gird', {  
  12.     sleep : function(){  
  13.         alert('sleep');  
  14.     }  
  15. });  
  16.               
  17. Ext.define('A_007', {  
  18.     //继承Person  
  19.     extend : 'Person',  
  20.     //同时继承'Boy','Gird'  
  21.     mixins : ['Boy','Gird']  
  22. });  
  23.               
  24. var a_007 = new A_007();  
  25. a_007.say('我可以say,也可以play,还可以sleep!!');  
  26. a_007.play();  
  27. a_007.sleep();  

 

7 , singleton : 创建单例模式的类, 如果singleton为true,那么该类不能用通过new创建,也不能被继承

 

Js代码  收藏代码
  1. Ext.define('Logger', {  
  2.     //singleton为true  
  3.     singleton: true,  
  4.     log: function(msg) {  
  5.         alert(msg);  
  6.     }  
  7. });  
  8. //方法调用"类名.方法名"  
  9. Logger.log('Hello');  

 

 8 , statics : 与第5个inheritableStatics属性类似,statics属性定义的静态方法子类是不会继承的.请看第5个属性.

 

 9 , uses 和 requires : 与requires属性类似,都是对某些类进行引用

uses -- 被引用的类可以在该类之后才加载.

requires -- 被引用的类必须在该类之前加载.

 

Js代码  收藏代码
  1. Ext.define('Gird', {  
  2.     uses : ['Boy'],  
  3.     getBoy : function(){  
  4.         return Ext.create('Boy');  
  5.     },  
  6.     sleep : function(){  
  7.         alert('sleep');  
  8.     }  
  9. });  
  10.   
  11. //对于uses属性,Boy类放在后面是可以的,不会报错  
  12. Ext.define('Boy', {  
  13.         play : function(){  
  14.                alert('play');  
  15.         }  
  16. });  
  17.   
  18.   
  19. //对于requires属性,Boy类必须在Grid类之前加载,不然会报错  
  20. Ext.define('Boy', {  
  21.     play : function(){  
  22.         alert('play');  
  23.     }  
  24. });  
  25.               
  26. Ext.define('Gird', {  
  27.     requires : ['Boy'],  
  28.     getBoy : function(){  
  29.         return Ext.create('Boy');  
  30.     },  
  31.     sleep : function(){  
  32.         alert('sleep');  
  33.     }  
  34. });  
分享到:
评论

相关推荐

    extjs属性方法大全

    ### Extjs 属性方法详解 #### 一、`Ext.form.Action` 类 `Ext.form.Action` 是用于处理表单操作的类,主要包括提交和加载数据的功能。 - **属性:** - `success`: 表示操作成功时的回调函数。 - `failure`: ...

    extJs3升级extjs4方案

    ExtJS4 已完全重新写 grid 组件,tree 也被更新,所以从版本 3 到 4 大部分的属性改变了。 在 ExtJS4 中,API 也发生了很大的变化,包括 tree、tab panel、grid、window、form、chart、data stores、border layout ...

    ExtJS资料笔记(extjs各个属性的详解)

    ExtJS资料笔记(extjs各个属性的详解) ExtJS资料笔记(extjs各个属性的详解) ExtJS资料笔记(extjs各个属性的详解)

    Extjs 常用属性

    在深入探讨Extjs常用属性之前,我们先简要回顾一下Extjs是什么。Extjs是一个用于构建Web应用程序的JavaScript框架,它提供了丰富的UI组件、数据处理功能以及与服务器端交互的能力,使得开发人员能够轻松地创建复杂的...

    EXTJS4自学手册

    EXTJS4自学手册——EXT基本方法、属性(onReady、define、create) EXTJS4自学手册——EXT基本方法、属性(apply、applyIf、constructor) EXTJS4自学手册——EXT基本方法、属性(mixins、statics、require) EXTJS...

    extjs4-教程

    ### ExtJS4基础教程知识点 #### 1. ExtJS4开发环境搭建 ExtJS4是使用JavaScript进行开发的框架,专门用于构建富互联网应用(RIA)。搭建ExtJS开发环境需要预先安装一些软件和配置开发环境。以下步骤详细介绍了如何...

    Extjs4使用要点个人整理

    1. **控件属性**:在`Extjs 控件属性.doc`中,可能会涵盖ExtJS 4中的各种组件(如窗口、面板、表格等)的常用属性。这些属性用于定义组件的行为、外观和交互方式。例如,宽度(width)、高度(height)、标题(title...

    EXTJS属性文档

    本文将深入探讨EXTJS的一些重要属性,包括`Ext.form.TimeField`、`Ext.form.FieldSet`、`Ext.form.DateField`和`Ext.form.ComboBox`。 首先,`Ext.form.TimeField`是EXTJS中的一个时间选择控件,用于让用户选择一个...

    在Eclipse中开发Extjs4代码

    在Eclipse中开发Extjs4代码是一个涉及到前端开发和集成开发环境(IDE)结合的实践过程。ExtJS是一个流行的JavaScript库,用于构建富客户端应用程序,而Eclipse则是一款广泛使用的开源IDE,支持多种编程语言,包括...

    extjs4官方示例以及api文档html版

    它详尽地介绍了每个类、方法、属性和事件,帮助开发者深入理解EXTJS4的工作原理。例如,"Ext.Component"是EXTJS4的核心类,几乎所有的UI元素都继承自它;"Ext.grid.Panel"则是用于展示数据的网格组件,包含了排序、...

    Extjs4 下拉树 TreeCombo

    ExtJS 4 下拉树(TreeCombo)是一种组合控件,它将传统的下拉框与树形结构结合在一起,提供了一种在有限空间内展示层级数据的高效方式。这种控件在很多场合都非常实用,例如在需要用户选择分类或者层级结构的场景中...

    ExtJS4 doc文档

    ExtJS4是一款强大的JavaScript库,专门用于构建富客户端应用程序。这个文档集合包含了关于ExtJS4的详尽资料,是开发者学习和深入理解该框架的重要资源。文档覆盖了多个关键组件和概念,包括"data"(数据管理)、...

    Extjs4_API文档整理.pdf

    ### Extjs4_API文档整理——深入理解类系统与编码规范 #### 一、概述:类系统的重要性 在《Extjs4_API文档整理.pdf》中,文档着重介绍了ExtJS4的类系统及其重要性。作为一款功能强大的前端框架,ExtJS4在版本升级...

    extjs4的Ext.frorm.Panel控件属性说明和表单控件说明

    主要用例子说明extjs4的form表单的运用,其中有表单属性说明,表单控件运用说明如: title:'表单', //表单标题 bodyStyle:'padding:5 5 5 5', //表单边距 height:120, //表单高度 width:200, //表单宽度 ...

    extjs4扁平化设计

    在本话题中,我们关注的是ExtJS 4中的扁平化设计,这是一项流行的设计趋势,旨在使用户界面更为简洁、直观和现代化。 扁平化设计的核心理念是去除冗余的装饰性元素,如阴影、渐变和纹理,以呈现出清晰、简洁的视觉...

    extjs4 treeGrid实例

    ExtJS4是一款强大的JavaScript库,专门用于构建富客户端应用程序。TreeGrid是ExtJS中的一个组件,结合了树形视图和表格的优点,可以用来展示层次结构的数据并支持数据的排序、筛选和操作。在本实例中,我们关注的是...

    Extjs4详解.pdf

    其4版本(Extjs4)在2012年发布,引入了许多新的功能和改进。本文将详细介绍Extjs4中三种主要的布局方式:Fit布局、Border布局和Accordion布局。 Fit布局是Extjs4中提供的简单布局之一。当一个容器采用Fit布局时,...

    EXTJS4导出excel示例

    3. **创建隐藏的`<a>`标签**:为了触发文件下载,EXTJS4可以创建一个隐藏的`<a>`标签,其`href`属性设置为生成的CSV字符串,并将其编码为URL。这样,当`<a>`标签被点击时,浏览器会自动下载数据作为CSV文件。 4. **...

    Extjs4的FormPanel从后台load json数据的要点

    在本篇文章中,我们将深入探讨如何使用Extjs4中的FormPanel组件从后台加载JSON数据,并将其映射到表单的各个字段中进行显示。这是一项非常实用的技术,尤其是在需要动态填充表单的情况下。 ### 一、Extjs4 ...

Global site tag (gtag.js) - Google Analytics