1 , alias : 相当于别名一样,可以起多个,可以通过xtype和Ext.widget()创建实例:
- Ext.define('SimplePanel', {
- extend: 'Ext.panel.Panel',
- alias: ['widget.simplepanel_007','widget.simplepanel_008'],
- title: 'Yeah!'
- });
- //通过Ext.widget()创建实例
- Ext.widget('simplepanel_007',{
- width : 100,
- height : 100
- }).render(Ext.getBody());
- //通过xtype创建
- Ext.widget('simplepanel_007', {
- width : 100,
- items: [
- {xtype: 'simplepanel_008', html: 'Foo'},
- {xtype: 'simplepanel_008', html: 'Bar'}
- ]
- }).render(Ext.getBody());
2 , alternateClassName : 跟alias有点类似,相当于给类找替身,可以多个,可以通过Ext.create()创建实例:
- Ext.define('Boy', {
- //定义多个替身
- alternateClassName: ['boy2', 'boy3'],
- say : function(msg){
- alert(msg);
- }
- });
- var boy1 = Ext.create('Boy');
- boy1.say('I am boy1...');
- //可以通过alternateClassName实例化该类
- var boy2 = Ext.create('boy2');
- boy2.say('I am boy2...');
- var boy3 = Ext.create('boy3');
- boy3.say('I am boy3...');
3 , config:类的属性配置,属性可以自动生成geter/seter方法
- Ext.define('Boy', {
- config : {
- name : 'czp',
- age : 25
- },
- constructor: function(cfg) {
- this.initConfig(cfg);
- }
- });
- var czp = Ext.create('Boy',{name:'czpae86'});
- //通过getName()方法获得属性name值
- alert(czp.getName());
- //通过setAge()方法改变属性age值
- czp.setAge(25.5);
4 , extend : 继承,可以继承单个类
- Ext.define('Person', {
- say: function(text) { alert(text); }
- });
- Ext.define('Boy', {
- extend : 'Person'
- });
- var czp = Ext.create('Boy');
- //继承了Person,所以可以使用say()方法
- czp.say('my name is czp.');
5 , inheritableStatics : 定义静态方法,可以通过"类名.方法名"调用静态方法. 类似 statics属性,
区别是:子类也可以使用该静态方法,但statics属性定义的静态方法子类是不会继承的.
- Ext.define('Person', {
- inheritableStatics : {
- sleep : function(){
- alert('sleep');
- }
- },
- say: function(text) { alert(text); }
- });
- Ext.define('Boy', {
- extend : 'Person'
- });
- //子类可以通过"类名.方法名"调用父类通过"inheritableStatics"定义的方法
- Boy.sleep();
6 , mixins : 可以实现多继承
- Ext.define('Person', {
- say: function(text) { alert(text); }
- });
- Ext.define('Boy', {
- play : function(){
- alert('play');
- }
- });
- Ext.define('Gird', {
- sleep : function(){
- alert('sleep');
- }
- });
- Ext.define('A_007', {
- //继承Person
- extend : 'Person',
- //同时继承'Boy','Gird'
- mixins : ['Boy','Gird']
- });
- var a_007 = new A_007();
- a_007.say('我可以say,也可以play,还可以sleep!!');
- a_007.play();
- a_007.sleep();
7 , singleton : 创建单例模式的类, 如果singleton为true,那么该类不能用通过new创建,也不能被继承
- Ext.define('Logger', {
- //singleton为true
- singleton: true,
- log: function(msg) {
- alert(msg);
- }
- });
- //方法调用"类名.方法名"
- Logger.log('Hello');
8 , statics : 与第5个inheritableStatics属性类似,statics属性定义的静态方法子类是不会继承的.请看第5个属性.
9 , uses 和 requires : 与requires属性类似,都是对某些类进行引用
uses -- 被引用的类可以在该类之后才加载.
requires -- 被引用的类必须在该类之前加载.
- Ext.define('Gird', {
- uses : ['Boy'],
- getBoy : function(){
- return Ext.create('Boy');
- },
- sleep : function(){
- alert('sleep');
- }
- });
- //对于uses属性,Boy类放在后面是可以的,不会报错
- Ext.define('Boy', {
- play : function(){
- alert('play');
- }
- });
- //对于requires属性,Boy类必须在Grid类之前加载,不然会报错
- Ext.define('Boy', {
- play : function(){
- alert('play');
- }
- });
- Ext.define('Gird', {
- requires : ['Boy'],
- getBoy : function(){
- return Ext.create('Boy');
- },
- sleep : function(){
- alert('sleep');
- }
- });
相关推荐
### Extjs 属性方法详解 #### 一、`Ext.form.Action` 类 `Ext.form.Action` 是用于处理表单操作的类,主要包括提交和加载数据的功能。 - **属性:** - `success`: 表示操作成功时的回调函数。 - `failure`: ...
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是一个用于构建Web应用程序的JavaScript框架,它提供了丰富的UI组件、数据处理功能以及与服务器端交互的能力,使得开发人员能够轻松地创建复杂的...
EXTJS4自学手册——EXT基本方法、属性(onReady、define、create) EXTJS4自学手册——EXT基本方法、属性(apply、applyIf、constructor) EXTJS4自学手册——EXT基本方法、属性(mixins、statics、require) EXTJS...
### ExtJS4基础教程知识点 #### 1. ExtJS4开发环境搭建 ExtJS4是使用JavaScript进行开发的框架,专门用于构建富互联网应用(RIA)。搭建ExtJS开发环境需要预先安装一些软件和配置开发环境。以下步骤详细介绍了如何...
1. **控件属性**:在`Extjs 控件属性.doc`中,可能会涵盖ExtJS 4中的各种组件(如窗口、面板、表格等)的常用属性。这些属性用于定义组件的行为、外观和交互方式。例如,宽度(width)、高度(height)、标题(title...
本文将深入探讨EXTJS的一些重要属性,包括`Ext.form.TimeField`、`Ext.form.FieldSet`、`Ext.form.DateField`和`Ext.form.ComboBox`。 首先,`Ext.form.TimeField`是EXTJS中的一个时间选择控件,用于让用户选择一个...
在Eclipse中开发Extjs4代码是一个涉及到前端开发和集成开发环境(IDE)结合的实践过程。ExtJS是一个流行的JavaScript库,用于构建富客户端应用程序,而Eclipse则是一款广泛使用的开源IDE,支持多种编程语言,包括...
它详尽地介绍了每个类、方法、属性和事件,帮助开发者深入理解EXTJS4的工作原理。例如,"Ext.Component"是EXTJS4的核心类,几乎所有的UI元素都继承自它;"Ext.grid.Panel"则是用于展示数据的网格组件,包含了排序、...
ExtJS 4 下拉树(TreeCombo)是一种组合控件,它将传统的下拉框与树形结构结合在一起,提供了一种在有限空间内展示层级数据的高效方式。这种控件在很多场合都非常实用,例如在需要用户选择分类或者层级结构的场景中...
ExtJS4是一款强大的JavaScript库,专门用于构建富客户端应用程序。这个文档集合包含了关于ExtJS4的详尽资料,是开发者学习和深入理解该框架的重要资源。文档覆盖了多个关键组件和概念,包括"data"(数据管理)、...
### Extjs4_API文档整理——深入理解类系统与编码规范 #### 一、概述:类系统的重要性 在《Extjs4_API文档整理.pdf》中,文档着重介绍了ExtJS4的类系统及其重要性。作为一款功能强大的前端框架,ExtJS4在版本升级...
主要用例子说明extjs4的form表单的运用,其中有表单属性说明,表单控件运用说明如: title:'表单', //表单标题 bodyStyle:'padding:5 5 5 5', //表单边距 height:120, //表单高度 width:200, //表单宽度 ...
在本话题中,我们关注的是ExtJS 4中的扁平化设计,这是一项流行的设计趋势,旨在使用户界面更为简洁、直观和现代化。 扁平化设计的核心理念是去除冗余的装饰性元素,如阴影、渐变和纹理,以呈现出清晰、简洁的视觉...
ExtJS4是一款强大的JavaScript库,专门用于构建富客户端应用程序。TreeGrid是ExtJS中的一个组件,结合了树形视图和表格的优点,可以用来展示层次结构的数据并支持数据的排序、筛选和操作。在本实例中,我们关注的是...
其4版本(Extjs4)在2012年发布,引入了许多新的功能和改进。本文将详细介绍Extjs4中三种主要的布局方式:Fit布局、Border布局和Accordion布局。 Fit布局是Extjs4中提供的简单布局之一。当一个容器采用Fit布局时,...
3. **创建隐藏的`<a>`标签**:为了触发文件下载,EXTJS4可以创建一个隐藏的`<a>`标签,其`href`属性设置为生成的CSV字符串,并将其编码为URL。这样,当`<a>`标签被点击时,浏览器会自动下载数据作为CSV文件。 4. **...
在本篇文章中,我们将深入探讨如何使用Extjs4中的FormPanel组件从后台加载JSON数据,并将其映射到表单的各个字段中进行显示。这是一项非常实用的技术,尤其是在需要动态填充表单的情况下。 ### 一、Extjs4 ...