8506人阅读
sencha ExtJS5（39）
本文地址：官方例子:本文作者：------------------------------------------------------------------------------------------------------------------------------------对于Extjs5的使用方式，我习惯性的是，先使用Ext.define方法定义一个自己的类，然后使用extend属性继承某一ext现在存在的类，然后制定alias的widget别名，最后配置属性，格式如下：Ext.define(//使用Ext.define定义一个类
'argtest.view.form.BaseForm',//类名称是BaseForm 存在于argtest项目中，在view文件夹中的form文件夹下是以BaseForm.js的文件形式存在的
extend: 'Ext.form.Panel',//继承自Ext的类，相当于重写了
alias: 'widget.baseform',//制定别名，后期使用的时候就可以拿baseform来获取了
title: 'abc',
//组件初始化，在构造方法之后执行
initComponent: function(){
this.items = [];
this.callParent(arguments);
});这样我定义了一个BaseForm当后期使用的时候，我就可以通过uses引入这个类，然后使用Ext.widget('baseform')获取这个对象的。但是现在有个问题就是，我想给这个对象赋值一定的特性，比如我想给form制定标题，那么我们是这么做的，Ext.widget('baseform',{title: '自定义标题'})这样的话，每调用一次，都会按照你制定的标题来创建这个窗体了，但是现在的问题是，title是form自带的，所以你这么写是正确的，但是我想传入一个自己定义的数据该怎么办呢？这时候就需要使用config属性了。我们这样做：在define定义的时候，制定config属性：Ext.define(
'argtest.view.form.BaseForm',
extend: 'Ext.form.Panel',
alias: 'widget.baseform',
title: 'abc',
fields: undefined
//组件初始化，在构造方法之后执行
initComponent: function(){
this.items = [];
var fieldsets = this.
Ext.each(fieldsets, function(onefieldset, fieldindex) {
console.log(onefieldset);
me.items.push(onefieldset);
console.log(me.items);
this.callParent(arguments);
});在调用的时候，传入一个这个即可：var form = Ext.widget('baseform',{fields: me.fields});这个原理的话，看一下这个就可以的。下面是我写的参数传递的例子，大家可以看下：一、使用sencha cmd生成一个默认extjs5项目二、在app文件夹下的view目录下定义两个包form和window 分别在里面创建BaseWindow.js和BaseForm.js文件，代码如下：Ext.define(
'argtest.view.window.BaseWindow',
extend: 'Ext.window.Window',
alias: 'widget.basewindow',
uses: ['argtest.view.form.BaseForm'],
autoshow: true,
fields: undefined
closeAction: 'hide',
//初始化为一个空数组，后期使用push方法增加组件
items: [],
//组件初始化，在构造方法之后执行
initComponent: function(){
var form = Ext.widget('baseform',{fields: me.fields});
me.items = [form];
console.log(me.items);
this.callParent(arguments);
});Ext.define(
'argtest.view.form.BaseForm',
extend: 'Ext.form.Panel',
alias: 'widget.baseform',
title: 'abc',
fields: undefined
//组件初始化，在构造方法之后执行
initComponent: function(){
this.items = [];
var fieldsets = this.
Ext.each(fieldsets, function(onefieldset, fieldindex) {
console.log(onefieldset);
me.items.push(onefieldset);
console.log(me.items);
this.callParent(arguments);
});三、修改MianController.js的按钮单击函数/**
* This class is the main view for the application. It is specified in app.js as the
* &autoCreateViewport& property. That setting automatically applies the &viewport&
* plugin to promote that instance of this class to the body element.
* TODO - Replace this content of this view to suite the needs of your application.
Ext.define('argtest.view.main.MainController', {
extend: 'Ext.app.ViewController',
uses: ['argtest.view.window.BaseWindow'],
requires: [
'Ext.MessageBox'
alias: 'controller.main',
onClickButton: function () {
//Ext.Msg.confirm('Confirm', 'Are you sure?', 'onConfirm', this);
var win = Ext.widget('basewindow', {
fields: this.getViewModel().get('tf_fields')
win.show();
//console.log(this.getViewModel().get('tf_fields'));
onConfirm: function (choice) {
if (choice === 'yes') {
修改MainModel中的数据，增加字段集合的定义：/**
* This class is the view model for the Main view of the application.
Ext.define('argtest.view.main.MainModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.main',
name: 'argtest',
tf_fields: [{
// Fieldset in Column 1 - collapsible via toggle button
xtype:'fieldset',
columnWidth: 0.5,
title: 'Fieldset 1',
collapsible: true,
defaultType: 'textfield',
defaults: {anchor: '100%'},
layout: 'anchor',
fieldLabel: 'First Name',
name: 'first',
allowBlank: false
fieldLabel: 'Last Name',
name: 'last',
allowBlank: false
// Fieldset in Column 1 - collapsible via toggle button
xtype:'fieldset',
columnWidth: 0.5,
title: 'Fieldset 2',
collapsible: true,
defaultType: 'textfield',
defaults: {anchor: '100%'},
layout: 'anchor',
fieldLabel: 'First Name',
name: 'first',
allowBlank: false
fieldLabel: 'Last Name',
name: 'last',
allowBlank: false
//TODO - add data, formulas and/or methods to support your view
});好了。到此都修改完成了。现在所做的东西就是讲MainModel中的自定义的tf_fields数组内容，安装传递的方式，将数组逐级传入到了显示出来的form里面，最后你点击按钮，显示出的界面就是这样了：后面想修改这个界面，不需要修改其他东西了，只需要修改MaiModel.js中内容就可以了，这样就方便多了。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：848497次
积分：10535
积分：10535
排名：第1169名
原创：184篇
转载：22篇
译文：18篇
评论：416条
文章：11篇
阅读：16499
阅读：26167
阅读：11457
文章：37篇
阅读：2656067303人阅读
sencha ExtJS5（39）
本文地址：&本文作者：-------------------------------------------------------------资源链接-----------------------------------------------------------------------翻译来源 &Sencha Cmd官方网站： & &------------------------------------------------------------------------------------------------------------------------------------------------本篇指导旨在给想要创建或者从EXT JS 4.X或者EXT JS 5.X继承已有类的任何开发者的。概述-------EXT JS 5自带了有超过300的类，到目前为止有200多万的开发者在使用extjs开发，他们来自不同的地方，有不同的背景。所以这样说来，在提供一份公共代码结构上我们就面临着一个巨大的挑战，这些代码结构是：1.大家都熟悉了解，简单容易学习2.开发迅速，调试方便，部署的时候也没有痛苦3.有组织的，可扩展的，并且是可维护的JavaScript是面向原型的类语言，其中一个最强大的功能就是自由，有好多的解决方案，可以使用不同的编码风格还有技术问题，但是这样就会以不可预知为代价了。没有一个统一的结构，javascript代码就很难理解，很难维护并且不好复用。另一方面，基于类的编程仍然是最流行的面向对象的编程模式，基于类的语言通常需要强类型，封装和标准的编码惯例，通过让开发人员坚持大量的原则,代码更可能是可预测的,可扩展和可伸缩。然而,这个模型没有JavaScript的动态能力。每个方法都有优点和缺点,但是我们可以保持好的而坏的部分同时隐藏?答案是肯定的,你可以在Ext JS找到解决方案。命名约定& 在代码中使用一致的命名惯例基础类、名称空间和文件名可以帮助组织你的代码,结构化和可读性。& 类命名约定& 类名只能包含字母数字字符。数字被允许但是不被鼓励，除非他们属于一个技术术语。不要使用下划线、连字符或其他任何非字母数字字符。例如:MyCompany.useful_util.Debug_Toolbar这个是被推荐的MyCompany.util.Base64 这个是可以接受的& 类名应该打包到像使用对象属性(.)一样的适当的名称空间中。类名至少应该有一个独特的顶级名称空间中紧随其后。例如:MyCompany.data.CoolProxy
MyCompany.Application顶级名称空间和实际的类名应该驼峰模式其它一切应该都小写，例如:MyCompany.form.action.AutoLoad不是使用sencha生成的类尽量不要使用Ext作为顶级空间。缩略词也应该遵守驼峰预约定，如：使用Ext.data.JsonProxy 而不是 Ext.data.JSONProxy使用 MyCompany.util.HtmlParser 而不是MyCompary.parser.HTMLParser使用MyCompany.server.Http 而不是 MyCompany.server.HTTP源文件命名约定类的名称直接映射到它们存储的文件路径。因此,必须只有一个类文件。例如:Ext.util.Observable 是在如下目录存储的 path/to/src/Ext/util/Observable.jsExt.form.action.Submit 是在如下目录存储的 path/to/src/Ext/form/action/Submit.jsMyCompany.chart.axis.Numeric 是在如下目录存储的 path/to/src/MyCompany/chart/axis/Numeric.jspath/to/src是应用程序的类路径。所有类应该在这种共同的根下，,应该给予适当的名称空间以便可以最好的开发、维护和部署。方法和变量的命名规则以类似的方式,类名、方法和变量名只能包含字母数字字符。数字被允许但是不被鼓励,除非他们属于一个技术术语。不要使用下划线、连字符或其他任何非字母数字字符。方法和变量名应该遵循驼峰原则这也适用于缩略词。例如：可接受的方法名称:encodeUsingMd5()getHtml()而不是 getHTML()getJsonResponse()而不是getJsonResponse()parseXmlContent()而不是parseXMLContent()可接受的变量名:var isGoodNamevar base64Encodervar&xmlReader&var httpServer属性的命名规则类属性名遵循完全相同的约定时除了静态常量。静态类常量属性应该全部大写。例如:Ext.MessageBox.YES = &Yes&Ext.MessageBox.NO = &No&MyCompany.alien.Math.PI = &4.13&声明旧的方式如果你曾经使用过Ext的4.x版本，你可能会对Ext.extend方法来创建类比较熟悉：var MyWindow = Ext.extend(Object, { ... });这种方法很容易遵循以创建一个新的类继承自另一个。除了直接继承,我们没有其他方面创造流畅的API的类。这个排除诸如配置、静态和mixins。我们稍后将详细回顾这些物品在本指南。让我们再看看另一个例子：My.cool.Window = Ext.extend(Ext.Window, { ... });在本例中,我们想我们新类命名空间,并使其从Ext.window延伸。有两个问题我们需要解决:1.在给My.cool属性赋值Window属性的时候，需要先有这个对象存在。2.ext . window需要存在/加载页面,才能引用解决第一个问题我们可以通过Ext.namespace(别名 Ext.ns)来解决。这个方法递归地通过对象/属性树创建他们如果他们不存在。这需要在之前添加Ext.extendxt.ns('My.cool');
My.cool.Window = Ext.extend(Ext.Window, { ... });第二个问题不容易解决,因为ext.window可能取决于许多其他类。反过来,这些依赖关系可能依赖于其他类的存在。出于这个原因,Ext JS 4之前编写的应用程序引入整个ext-all.js的形式,不管应用程序是不是只需要一小部分的框架。新的方式Ext JS 4消除这些缺点为类创建一个方法你需要记住:Ext.define。它的基本语法如下:Ext.define(className, members, onClassCreated);className:类名members:一个对象,代表一个类成员的键-值对的集合onClassCreated:一个可选的回调函数当所有定义的类和类本身是完全做好了准备的时候被调用。由于类创建的异步本性,这个回调在很多情况下是非常有用的。这些将在第四部分进一步讨论例如：Ext.define('My.sample.Person', {
name: 'Unknown',
constructor: function(name) {
if (name) {
this.name =
eat: function(foodType) {
alert(this.name + & is eating: & + foodType);
var aaron = Ext.create('My.sample.Person', 'Aaron');
aaron.eat(&Salad&); // alert(&Aaron is eating: Salad&);注意:我们创建了一个新的My.sample的实例。使用Ext.create()方法。我们可以使用新的关键字(new My.sample.Person())。不过建议得到的习惯总是使用Ext.create因为它允许您利用动态加载。动态加载的更多信息参见入门指南配置在Ext JS 4中,我们介绍了一个专用的配置属性,它是在类创建之前被强大的Ext.Class 预处理创建的类。功能包括:1.从其他类成员配置是完全封装2.如果方法还未定义，创建期间Getter和setter方法为每个配置属性自动生成到类原型类。3.一个apply方法也为每个属性生成配置。内部自动生成setter方法调用apply方法之前设置值。你可以覆盖apply方法申请配置属性,如果你需要运行自定义逻辑之前设置的值。如果apply不返回一个值,setter不会设置值。为Ext类使用配置,Ext JS 5消除了需要手动调用initConfig()。然而,对于自己的类,扩展Ext.Base initConfig()仍然需要手动调用。你可以看到下面的配置示例：Ext.define('My.own.Window', {
/** @readonly */
isWindow: true,
title: 'Title Here',
bottomBar: {
height: 50,
resizable: false
applyTitle: function(title) {
if (!Ext.isString(title) || title.length === 0) {
alert('Error: Title must be a valid non-empty string');
applyBottomBar: function(bottomBar) {
if (bottomBar) {
if (!this.bottomBar) {
return Ext.create('My.own.WindowBottomBar', bottomBar);
this.bottomBar.setConfig(bottomBar);
/** A child component to complete the example. */
Ext.define('My.own.WindowBottomBar', {
height: undefined,
resizable: true
});这是一个如何使用它的例子: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 });
alert(myWindow.getBottomBar().getHeight()); // alerts 100静态变量静态变量可以使用statics配置来定义：Ext.define('Computer', {
statics: {
instanceCount: 0,
factory: function(brand) {
// 'this' in static methods refer to the class itself
return new this({brand: brand});
brand: null
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&错误控制和调试Ext JS包括一些有用的特性,将帮助您调试和错误处理。您可以使用Ext.getDisplayName()的任何方法的显示名称。这对抛出错误的类名和方法名描述来说是特别有用的:throw new Error('['+ Ext.getDisplayName(arguments.callee) +'] Some message here');当有错误在使用Ext.define时抛出的时候，你应该查看这个方法还有类的堆栈信息，你可以看下谷歌Chrome中报错的信息如下：
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：848498次
积分：10535
积分：10535
排名：第1169名
原创：184篇
转载：22篇
译文：18篇
评论：416条
文章：11篇
阅读：16499
阅读：26167
阅读：11457
文章：37篇
阅读：265606ExtJS（8）
&!DOCTYPE html PUBLIC &-//W3C//DTD HTML 4.01 Transitional//EN& &http://www.w3.org/TR/html4/loose.dtd&&
&meta http-equiv=&Content-Type& content=&text/ charset=UTF-8&&
&title&示例2-1 Hello World&/title&
(1)使用ExtJs需要引入的文件
★ext-all.css样式文件。这里替换为其他的css样式文件 则程序的整体css风格就会随之改变。
改变主题的下来选择框。最终也是切换CSS样式文件
★bootstrap.js自动根据实际情况来引入ext-all.js或者是ext-all-dev.js
★ext-lang-zh_CN.js 实现ext的本地化。如提示框不引入此文件
按钮为 ok，添加之后为 确定。
&link rel=&stylesheet& type=&text/css& href=&../js/ext4.2/resources/css/ext-all.css&/&
&script type=&text/javascript& src=&../js/ext4.2/bootstrap.js&&&/script&
&script type=&text/javascript& src=&../js/ext4.2/locale/ext-lang-zh_CN.js&&&/script&
&script type=&text/javascript&&
★Javascript自定义类
原生的Javascript中自定义类
在这段代码中，我们定义了Person类，它具有Name 和 Age 两个属性，具有 Say 和 init 公有方法。
当类创建的时候，会定义通过调用init方法实现类的初始化（所以init方法可以看作是类的构造函数）。
我们看一下该类的用法：
var Tom = new Person(&Tom&, 26);
Tom.Say(&Hello&);
var Person = function (name, age) {
this.Name = &&;
this.Age = 0;
this.Say = function (msg) {
alert(this.Name + & Says : & + msg);
this.Cry = function(){
alert(&cry....&);
this.init = function (name, age) {
this.Name =
this.Age =
alert(&init....&);
//初始化(new Person对象的时候执行 init方法 给name和age赋值
和 执行Cry方法)
this.init(name, age);
this.Cry();
var Tom = new Person(&Tom&, 26);
Tom.Say(&Hello&);
★ ExtJS 中自定义类
ExtJS 中自定义类的方法 使用ExtJS.define 方法自定义类
我们使用了Ext.define方法自定义一个Ext.Person类，它同样具有Name 和 Age 属性，具有Say 方法，
constructor 则为它的构造函数，有了专用的构造函数，我们就省去了写init方法的代码，直接在构造函数中完成对类的初始化，
它的使用方法没有改变
1、Uncaught TypeError: Cannot read property ‘dom’ of null
原因：如果代码段没有放入Ext.onReady中
Ext.onReady(function(){
Ext.define(&PersonExt&,{
name:'',
Say:function(msg){
Ext.Msg.alert(this.Name + & Says:&, msg);
constructor:function(name,age){
this.Name =
this.Age =
var person = new PersonExt(&Tom2&, 18);
person.Say(&Hello2&);
/////////////////////////////////////////////////////////////////////////////////
★ ExtJS 中类的继承
ExtJS 允许对现有的类进行扩展，其扩展可以通过继承来实现。接下来我们就对刚刚使用ExtJS定义的Person类进行继承，
定义一个Developer类，它继承自Person，同时还拥有Coding方法。
从代码中可看出，ExtJS 使用 extend来实现继承。我们为Developer 类添加了Coding 方法，这是我们对Person类进行的扩展。
在构造函数中，通过调用this.callParent(arguments)方法，实现对属性的初始化。
需要说明的是，如果此处只调用了父类的构造方法，则可以省略掉，ExtJS 会自动为我们调用父类的构造函数。所以进行简化去掉constructor部分
需要注意的是，如果你在子类中使用了构造函数，ExtJS 则不会再自动调用父类的构造函数。
Ext.define(&Developer&,{
extend:&PersonExt&,//继承自Person
Coding:function(code){
Ext.Msg.alert(&Developer&,&I can coding --&&+code);
constructor:function(){
this.callParent(arguments);
//在构造函数中，通过调用this.callParent 方法，实现对属性的初始化
var dev = new Developer(&Tom3&,8);
dev.Coding(&abc&);
dev.Say(&??????????&);
★ ExtJS 中类的选项 - config (初始化配置参数，自动生成get set方法)
List of configuration options with their default values, for which automatically accessor methods are generated.
Ext.create方法创建了一个Window 对象，Ext.create 方法的第一个参数是类名，第二个参数是类的选项，它是一个JSON格式的对象，用来初始化Window对象。
试想一下，如果我们的类中有几十个属性，那么我们使用构造函数就要传入几十个参数来对它完成初始化，这是一件很恐怖的事情。还好ExtJS 为我们提供了这种便利，
我们可以在定义类的时候为它添加配置项，然后调用ExtJS 内置的方法完成初始化，并可以生成访问器（类似于C#里面的get和set方法）。
var win = Ext.create(&Ext.Window&,{
//Ext.Window它对应类的全称是 Ext.window.Window
title: '示例窗口',
width: 300,
height: 200
win.show();
//新定义PersonNew类，使它可以通过config初始化。 两个地方：config和构造函数this.initConfig(config)
Ext.define(&PersonNew&, {
Name: '',
Say:function (msg) {
Ext.Msg.alert(this.Name + & Says:&, msg);
constructor: function (config) {
this.initConfig(config);
//注意：this.initConfig(config)
//定义personNew类对象的时候，使用Ext.create方法，传入类名PersonNew以及配置项，
var personNew = Ext.create(&PersonNew&, {
Name: 'Tom',
//1方法 personNew.Say(&I am PersonNew&)
personNew.Say(&I am PersonNew&);
//2 属性personNew.Name
personNew.Age
alert(personNew.Name+&~~~.~~&+personNew.Age);
//Tom~~~~~26
alert(personNew.getName()+&~~~get~~&+personNew.getAge());
//Tom~~~~~26
//3修改属性 (通过config
ExtJS 为我们生成了访问器get和set方法)
personNew.setName(&OldMan&);
personNew.setAge(88);
alert(personNew.Name+&~~.~~~&+personNew.Age);
//OldMan~~~~~88
alert(personNew.getName()+&~~get~~~&+personNew.getAge())
★ExtJS 中类的别名 - alias
1http://localhost:8080/TestExt4.2/phdq/PersonNew2.js?_dc=4 404 (Not Found)
2Uncaught Error: [Ext.Loader] Failed loading synchronously via XHR: 'PersonNew2.js';
please verify that the file exists. XHR status code: 404
第一个错误，ExtJS的动态加载检测到系统当前没有PersonNew2类的定义，于是就自动加载（当前路径的）PersonNew2.js，
这个路径是不存在的，于是出现了404未找到错误。
第二个错误，Person 未被定义，所以系统抛出类型错误信息。要想解决这个问题，我们需要将Ext.create方法的第一个参数修改为 &MyApp.PersonNew&。
但我们在这里不这样做，因为我们依然希望通过使用PersonNew2来完成，那么怎么办呢？
这时就用到别名了。
Ext.define(&MyApp.PersonNew&, {
Name: '',
alias:&PersonNew2&, //这时就用到别名了。
Say: function (msg) {
Ext.Msg.alert(this.Name + & Says:&, msg);
constructor: function (config) {
this.initConfig(config);
var Tom = Ext.create(&PersonNew2&, {
//这时就用到别名了。PersonNew2等价于MyApp.PersonNew
Name: 'Tom',
Tom.Say(&HelloXXXXXXXX&);
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：44696次
积分：1025
积分：1025
排名：千里之外
原创：55篇
转载：47篇
(1)(2)(1)(1)(3)(3)(9)(3)(1)(2)(16)(7)(25)(28)EXT.JS（26）
（1）本文章是针对于ExtJs 4.X ，文章中出现的5版本只是我引入的文件是ExtJs.5.0,并不是文章是基于5版本，文章是4版本的
定义类的方法：define
对于Ext4.X版本来说，采用了新定义类的define方法，而不是延续旧版本的extend方法，那么对于定义一个新的类。我们来了解下define的使用。
Ext.define(classname,properties,callback)
classname:要定义的新类的类名，properties：新类的配置对象，callback：回调函数，当类创建完后执行该函数
对于Ext定义一个新的类，那么我们可以想象到，既然是利用Ext.define去创建类，那么创建的类一定是Ext所特有的类，不同于传统的javascript创建一个类，也就是说我们要对于define方法的第二个参数properties配置项进行配置，需要找到Ext对于类支持的API并进行配置。
extend：用于继承
alias:类的别名
alternateClassName：备用名，与alias差不多
requires：需要使用到的类名数组，在动态加载时会根据该属性去下载类，注意需要的类是在当前类之前被加载
uses：与requires类似 但是被引用的类可以在该类之后才加载
constructor：构造器属性，一般用来初始化类的配置和调用其父类的方法
mixins：混入属性，多继承
config：定义类的配置项，会把config里的每个属性加上get和set方法
statics：定义静态方法，属性不能被子类继承
inheritableStatics：与statics类似，但是其属性可被子类继承
singleton：设置该类为单件模式
基本介绍就到这，下面进入代码示例：
首先引入ext所需要的样式，js和国际化（文章中都有，这里就省略了，望见谅）
在Ext中如何去定义一个类？之前文章也说到过define,即 Ext.define(className , properties , callback)
classname:要定义的新类的类名，properties：新类的配置对象，callback：回调函数，当类创建完后执行该函数，回调函数很少用。
Ext.onReady(function(){
Ext.define('Person',{
//这里是对于这个类的一些配置信息
//config属性 就是配置当前类的属性内容,并且会加上get和set方法
name:'张三' ,
//自己定义的方法
say:function(){
('我是say()方法...');
//给当前定义的类加一个构造器 ,目的就是为了初始化信息
constructor:function(config){
for(var attr in config){ //这里可以看到传进来的config
(attr + & : & + config[attr]);
me.initConfig(config); // 真正的初始化传递进来的参数
//Ext.create 实例化一个对象
var p = Ext.create('Person',{
name:'王五' ,
//因为config已经添加了get，set方法
我们就不再用p.name这种方法获取name值，推荐采用p.getName()
(p.getName()+p.getAge());
代码中注释也很详细，在这里我还是说一下，这个config的属性是Ext在创建类时配置属性，那也就是在Ext.Class下面api中，需要注意的是构造器constructor，这个方法中用到了initConfig()这个自己去看一下底层代码，在这里不解释，只需要知道是初始化参数的方法。另外就是config提供了set,get方法，那我们获取属性值的时候就不在推荐用实例对象.属性的方法，推荐使用get方法。
初始化没什么好说的，下面我们来说一下继承extend
//Sup Class
Ext.define('Person',{
name:'小树'
constructor:function(config){
me.initConfig(config);
//Sub Class
Ext.define('Boy',{
//使用Ext的继承
extend:'Person',
var b = Ext.create('Boy',{
name:'张三',
(b.getName()+','+b.getAge+','+b.getSex());
在代码中看到Boy继承了Person，创建Boy的时候拥有了Person里面sex属性，我们看一下javaScript原来的继承写法：
&pre name=&code& class=&javascript&&
//javascript : prototype(原型)
:所有类的实例对象所共享
function Person(name){
this.name =
//this.sayName = sayN
//如果方法单独拿出在外则不只是Person的方法，也就不叫继承
function sayName(){
alert(this.name);
Person.prototype.sayName = function(){
(this.name);
= new Person('张三');
p1.sayName();
= new Person('李四');
p2.sayName();
(p1.sayName == p2.sayName);
//javascript : prototype(原型)
//SupClass
var PersonClass = function(name){
this.name =
//(Person.prototype.constructor);
//原型对象的构造器,默认是当前的类的模板
//SupClass prototype object
PersonClass.prototype = {
constructor:PersonClass ,
//SubClass
var Boy = function(name,sex,age){
//借用构造函数继承的方式
PersonClass.call(this,name);
this.sex =
this.age =
//实现原型继承：继承父类的模板和父类的原型对象
//Boy.prototype = new PersonClass();
var b = new Boy('李四','男',25);
(b.name+','+b.age+','+b.sex);
//实现原型继承: 继承了父类的模板和父类的原型对象
//Boy.prototype = new Person();
//自己实现extend的方法
function myextend(sub , sup){
var F = function() {},
//定义一个空函数做为中转函数
subclassProto,
//子类的原型对象
superclassProto = sup. //把父类的原型对象 交给了superclassProto变量
F.prototype = superclassP // 做中转的位置：把父类的原型对象 赋值给了 F这个空函数的原型对象
subclassProto = sub.prototype = new F(); //进行原型继承
subclassProto.constructor =
//还原构造器
sub.superclass = superclassP
//做了一个保存,保存了父类的原型对象
//目的是为了防止你大意了
if (superclassProto.constructor === Object.prototype.constructor) {
superclassProto.constructor =
myextend(Boy ,PersonClass);
var b2 = new Boy('刘一','男',23);
(b2.name+','+b2.age+','+b2.sex);
原生Js利用的也就是一个构造函数继承方式，但仔细看，Boy.prototype = new PersonClass(); 实例初始化一次，构造器又实例初始化一次如果我的父类有N个属性，这样对于性能来讲是很差的。看ExtJs的方式，很巧妙：
//自己实现extend的方法
function myextend(sub , sup){
var F = function() {},
//定义一个空函数做为中转函数
subclassProto,
//子类的原型对象
superclassProto = sup. //把父类的原型对象 交给了superclassProto变量
F.prototype = superclassP // 做中转的位置：把父类的原型对象 赋值给了 F这个空函数的原型对象
subclassProto = sub.prototype = new F(); //进行原型继承
subclassProto.constructor =
//还原构造器
sub.superclass = superclassP
//做了一个保存,保存了父类的原型对象
//目的是为了防止你大意了
if (superclassProto.constructor === Object.prototype.constructor) {
superclassProto.constructor =
myextend(Boy ,PersonClass);
var b2 = new Boy('刘一','男',23);
(b2.name+','+b2.age+','+b2.sex);
创建一个空的函数来中转一次，这样继承父类的原型时并没有直接的原型对象，也就不存在重复初始化参数值，还考虑了我们没有对父类原型继承时自动给我们继承父类原型。
别名、备用名
Ext.define(&User&,{
name:'小树' ,
alias:'u' ,//起别名 底层代码在Ext.ClassManger
alternateClassName:'uu', //给当前类一个备用名 底层代码在Ext.ClassManger
constructor:function(config){
me.initConfig(config);
var u = Ext.create('u');
var uu = Ext.create('uu');
(u.getName()+&,&+uu.getAge());
静态方法，静态属性&statics(子类不能继承) inheritableStatics(子类可以继承)
/**statics(子类不能继承) inheritableStatics(子类可以继承) 给当前类定义静态方法或属性*/
Ext.define('Person',{
name:'我是父类'
statics:{ //静态的方法或属性
static_id:'我是Person的id,不能被子类所继承!!'
inheritableStatics:{ //静态的方法或属性
inheritableStatics_id:'我是Person的id,我可以被子类继承!!'
constructor:function(config){
me.initConfig(config);
//一定注意:!!!!!//实例对象是无法使用静态属性或方法的
//var p = Ext.create('Person');
//(p.static_id);
//用类名去使用静态属性:!!!! 不能p.static_id
(Person.static_id);
(Person.inheritableStatics_id);
Ext.define('User',{
extend:'Person' ,
(User.static_id);
// underfine
(User.inheritableStatics_id);
混合配置 &多继承（java中不能多继承，这里就是继承多个的意思，表述有问题请见谅）
/**mixins 混合的配置项,可以多继承的配置*/
Ext.define(&Sing&,{
canSing:function(){
('cansing...');
Ext.define(&Say&,{
canSay:function(){
('cansay...');
Ext.define('User',{
sing:&Sing& ,
var u = Ext.create(&User&);
u.canSay();
u.canSing();
requires 和 uses 以及 &singleton
需要Ext或者是其他的类做支持
requires加载需要的类时机是：当前类初始化之前被加载
requires:['Ext.window.Window','Ext.button.Button'],
uses加载需要的类时机是：当前类初始化之后被加载
uses:['Ext.form.Panel','Ext.grid.Panel'],
当前的类就被当做一个单例对象 &（单例就是只会初始化一次，new多少次都只有一个实例）
singleton:true
OK!这一节就到这吧，共勉！
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：6808次
排名：千里之外
原创：58篇
转载：29篇
(57)(13)(2)(1)(5)(4)(3)(3)}