- 浏览: 55825 次
- 性别:
- 来自: 北京
最新评论
Class System
在其历史上的第一次,Ext JS的经历了一次巨大的重构。几乎每一个类都被重写,因此,在开始写代码之前很好的理解各类是很重要的。
本手册适用于任何的开发者,它分为4个部分:
-
第一节:“概述”:描述一个强大的类系统
-
第二节:“命名约定”:怎么更好的命名类,方法,属性,变量和文件。
-
第三节:“动手”:提供了详细的一步一步的代码示例
-
第四节:“错误的处理和调试”:提供有用的提示和技巧,如何处理异常
I. 概述
Ext JS 4有300多个类。有一个超过20万来自世界各地开发者的用户社区。在同一个框架下,我们面对着一荐巨大的挑战(共同的代码架构)
-
熟悉和简单易学
快速开发,调试方便,无痛部署
精心组织,可扩展性和可维护性
II.命名约定
对类,命名空间,文件名使用统一的命名命名约定,有利于对代码的组织,结构化和更有可读性
1) 类
类名可能只包含字母数字。数字是可以,但大多情况下不鼓励使用,除非是技术术语,同样的不要使用下划线,连接线和非字母数字字符。例如:
-
MyCompany.useful_util.Debug_Toolbar 不鼓励
-
MyCompany.util.Base64
可以
MyCompany.data.CoolProxy
MyCompany.Application
顶级的命名空间和实际类名应在驼峰,一切应全部小写。例如:MyCompany.form.action.AutoLoad
2) 源文件
一个类一个文件,类名和文件名相同。例如:
-
Ext.util.Observable
is stored inpath/to/src/Ext/util/Observable.js
-
Ext.form.action.Submit
is stored inpath/to/src/Ext/form/action/Submit.js
-
MyCompany.chart.axis.Numeric
is stored inpath/to/src/MyCompany/chart/axis/Numeric.js
3) 方法和变量
和类名相同,方法和变量名可能只包含字母数字字符。数字是允许的,但在大多数情况下不鼓励,除非他们属于一个技术术语。不要使用下划线,连字符,或任何其他非字母数字字符。方法和变量名应该总是在驼峰。这也适用于首字母缩写。
例子:
可以接受的方法名称:encodeUsingMd5()getHtml(而不是getHTML())getJsonResponse(),而不是getJSONResponse(),而不是ofparseXMLContentparseXmlContent()
可接受的变量名:VARisGoodNameVARbase64EncoderVAR的XmlReaderVARhttpServer
4) 属性
- 类的属性名遵循完全相同的公约,除上面提到的方法和变量的情况下,当是静态常量,静态类属性是常量应全部大写。例如:
-
-
Ext.MessageBox.YES= "Yes"
-
Ext.MessageBox.NO= "No"
-
MyCompany.alien.Math.PI = "4.13"
-
III. 动手
1. 声明
1.1) 老方式
If you have ever used any previous version of Ext JS, you are certainly familiar withExt.extend
to
create a class:
var MyWindow = Ext.extend(Object, { ... });
我们先看个例子:
My.cool.Window = Ext.extend(Ext.Window, { ... });
在这个例子中,我们命名了继承自Ext.Window的新类。我们需要解决两个问题:
Ext.ns('My.cool');
My.cool.Window = Ext.extend(Ext.Window, { ... });
1.2) 新方式
Ext JS 4 提供了Ext.define
方式创建类.例如:
Ext.define(className, members, onClassCreated);
-
className
: 类名 -
members
:键 - 值对的集合 -
onClassCreated
:类创建好后的回调函数
Example:
注意我们使用Ext.create()创建了一个新实例。我们也可以用new关键字(newMy.sample.Person())。然而,这是不建议的,因为使用Ext.create()可以让你动态加载所依赖的类Ext.define('My.sample.Person', { name: 'Unknown', constructor: function(name) { if (name) { this.name = name; } return this; }, eat: function(foodType) { alert(this.name + " is eating: " + foodType); return this; } }); var aaron = Ext.create('My.sample.Person', 'Aaron'); aaron.eat("Salad"); // alert("Aaron is eating: Salad");
2. 配置
在Ext JS 4中我们声明了config属性,在创建实例前由EXt.Class处理
- 配置是完全封装其他类成员
- 对config属性中的成员自动创建getter,setter,apply方法
下面是一个怎么使用的例子Ext.define('My.own.Window', { /** @readonly */ isWindow: true, config: { title: 'Title Here', bottomBar: { enabled: true, height: 50, resizable: false } }, constructor: function(config) { this.initConfig(config); return this; }, applyTitle: function(title) { if (!Ext.isString(title) || title.length === 0) { alert('Error: Title must be a valid non-empty string'); } else { return title; } }, applyBottomBar: function(bottomBar) { if (bottomBar && bottomBar.enabled) { if (!this.bottomBar) { return Ext.create('My.own.WindowBottomBar', bottomBar); } else { this.bottomBar.setConfig(bottomBar); } } } });
var myWindow = Ext.create('My.own.Window', { title: 'Hello World', bottomBar: { height: 60 } }); alert(myWindow.getTitle()); // alerts "Hello World" myWindow.setTitle('Something New'); alert(myWindow.getTitle()); // alerts "Something New" myWindow.setTitle(null); // alerts "Error: Title must be a valid non-empty string" myWindow.setBottomBar({ height: 100 }); // Bottom bar's height is changed to 100
3. 静态
使用statics定义静态成员
Ext.define('Computer', { statics: { instanceCount: 0, factory: function(brand) { // 'this' in static methods refer to the class itself return new this({brand: brand}); } }, config: { brand: null }, constructor: function(config) { this.initConfig(config); // the 'self' property of an instance refers to its class this.self.instanceCount ++; return this; } }); var dellComputer = Computer.factory('Dell'); var appleComputer = Computer.factory('Mac'); alert(appleComputer.getBrand()); // using the auto-generated getter to get the value of a config property. Alerts "Mac" alert(Computer.instanceCount); // Alerts "2"
IV. 错误&调式
Ext Js 4 有一些有用的功能可以帮助你更好的调式问题和对错误的处理
-
您可以使用Ext.getDisplayName()来获得的任何方法名称。可以抛出带有类名和方法名错误描述,这是特别有用:
throw new Error('['+ Ext.getDisplayName(arguments.callee) +'] Some message here');
-
在任何使用Ext.define()定义的任何类方法抛出错误时,你应该看到调用堆栈中的方法和类的名称,如果你正在使用一个基于WebKit的浏览器(Chrome或Safari)。例如,在Chrome是什么样子:
发表评论
-
extjs3.3 itemselector组件不显示滚动条问题?
2011-12-29 16:57 949当available和selected已经ite ... -
extjs 中ie和其它浏览器处理小差异
2011-12-29 20:24 684fucntion testFunction(){ var f ... -
MyBatis insert操作返回主键 (db2)
2012-01-06 17:07 1763在使用MyBatis做持久层时,insert语句默认是 ... -
extjs3.3 双行tbar的实现
2012-01-06 17:18 949tbar:new Ext.Toolbar({ .... ... -
一步一步翻译,解说extjs4-----------------初识
2012-01-06 18:19 890Welcome toExt JS 4! ... -
一步一步翻译,解说extjs4-------------Getting Started
2012-01-17 17:55 9611. 要求 1.1 浏览器 Ext JS 4 ... -
Hibernate使用SchemaExport和AnnotationConfiguration生成表结构
2012-02-17 15:29 979step 1 :定义entity @Entity @Tab ... -
NHibernate(面向.net)之旅:初探SchemaExport工具使用(本文与Hibernate无异)
2012-02-17 15:51 1036NHibernate之旅(19):初探 ... -
用sql语句怎么知道一个表的字段信息--------db2
2011-10-18 14:32 861context: 把页面信息存入表中时,判断数据长度是否 ... -
Extjs3.3.1 实现翻页后,可记录已经选择的选项
2012-01-31 18:38 1923第一步:定义记录选择选项变量: var collect ...
相关推荐
EXTJS有300多个类,能做到既有面向对象编程的规范性,又能做到JavaScript的灵活性
### ExtJS4基础教程知识点 #### 1. ExtJS4开发环境搭建 ExtJS4是使用JavaScript进行开发的框架,专门用于构建富互联网应用(RIA)。搭建ExtJS开发环境需要预先安装一些软件和配置开发环境。以下步骤详细介绍了如何...
ExtJS 4 Slate 主题是基于 Sencha ExtJS 4.0.7 框架的一个视觉风格,它提供了一种现代、扁平化的设计,增强了用户界面的吸引力和用户体验。Slate 主题是对默认主题的扩展,旨在为开发者提供一个更加专业且引人入胜的...
Extjs4 API文档阅读(一)——类系统(Class System) Extjs4 API文档阅读(三)——布局和容器 Extjs4 API文档阅读(二)——MVC构架(上) Extjs4 API文档阅读(二)——MVC构架(下) Extjs4 API文档阅读(四)——Data ...
在本文中,我们将深入探讨如何在ExtJS 4框架中实现Grid组件的修改和删除功能,同时结合Struts2和Hibernate技术,构建一个完整的CRUD(创建、读取、更新、删除)应用。ExtJS 4是一个强大的JavaScript UI库,提供了...
licensing@extjs.com http://extjs.com/license Open Source License Ext is licensed under the terms of the Open Source GPL 3.0 license. http://www.gnu.org/licenses/gpl.html There are several FLOSS ...
"extjs-theme-bootstrap" 是针对 EXTJS4 的一个主题,它借鉴了 Bootstrap 的设计风格,让 EXTJS4 应用程序具有更加现代化和一致的外观。 Bootstrap 是一个流行的前端开发框架,由 Twitter 推出,主要用于构建响应式...
一个extjs的OA项目 extjs-OA extjs-oaextjs-OA extjs-oa
### Extjs4---combobox省市区三级联动+struts2 #### 一、技术背景与原理 本案例涉及的关键技术主要包括Extjs4框架中的`combobox`组件以及Struts2框架,通过这两种技术实现了省市区三级联动的效果。下面将详细介绍...
在标题和描述中提到的“Extjs4小图标”指的是ExtJS 4版本中使用的一系列图形图标,这些图标用于增强应用程序的视觉效果,提供用户友好的操作指示。 1. **图标分类**: - 图标通常分为不同的类别,如操作图标(比如...
##### 3.1 系统类 (class system) - **概述**:Extjs 使用面向对象编程的思想,通过类来组织和管理代码。 - **编码和规范**:遵循 Extjs 的编码风格和规范,提高代码质量。 - **示例代码**:提供实际的例子帮助理解...
3. `\extjs-4.x\locale\ext-lang-zh_CN.js`(如果需要中文支持):这个文件提供了中文语言包,用于将ExtJS的默认英文提示和错误消息翻译为中文。 在Eclipse中,只需将上述三个文件或文件夹引入到你的项目中,可以...
这个中文文档是EXTJS4的官方文档翻译版,为开发者提供了详细的API参考和教程,帮助理解EXTJS4的各种组件、功能和工作原理。 EXTJS4的核心特性包括: 1. **组件化**:EXTJS4引入了基于MVC(Model-View-Controller)...
### ExtJS4之初体验 #### 一、准备工作 在开始使用ExtJS4进行开发之前,我们需要做一些基础的准备工作,确保开发环境已经搭建好,并且能够顺利地运行第一个ExtJS4程序。 ##### 1. 浏览器兼容性 ExtJS4支持大部分...
ExtJS快速入门--传智播客--蔡世友
在"extjs_4.1.0_community_extjs4-mvc-complex-dashboard.zip"这个压缩包中,包含了一个基于ExtJS 4.1.0 MVC模式构建的复杂仪表盘示例。这个示例展示了如何利用ExtJS的MVC设计模式来组织和管理代码,以便创建功能...
### Extjs4 API文档阅读(一)——类系统 #### 第一部分:概述 在ExtJS4中,类机制被大幅度地重构与优化,这主要是为了支撑全新的架构需求。随着ExtJS4类的数量超过300个,对于这样一个庞大且全球范围内拥有超过20万...
### Extjs4 权威指南知识点总结 #### 一、Extjs4简介与获取途径 - **概述**:Extjs4是一款基于JavaScript的企业级富客户端Web应用程序开发框架,旨在简化前端开发过程,提供丰富的UI组件和强大的数据处理能力。 - ...
在EXTJS4中,开发人员有时需要为用户提供导出数据到Excel的功能,以便他们可以方便地处理和分析数据。然而,EXTJS4官方提供的库可能并不完全支持直接导出到Excel,这通常需要一些额外的工作来实现。"extjs4-export...