Sencha Cmd是一套跨平台的命令行工具，用于支持整个ExtJS开发的生命周期。它包含以下功能：

1. 代码生成工具：可以生成整个应用程序，并且使用MVC模式扩展应用程序
2. JS编译器：此编译器理解Sencha的ExtJS/Touch框架，可以减少应用程序加载时间
3. Web服务器：一个轻量级的，开发用Web服务器
4. 包管理系统：分布式的包管理系统，可以方便的集成其它用户开发的、发布到Sencha Package Repository的包（例如ExtJS主题）到当前应用程序
5. 工作区管理：辅助跨越多个应用的框架、包、代码共享
6. 构建脚本：自动生成应用的构建脚本，并且暴露before、after扩展点
7. 支持与Cordova/Phone集成
8. 图形捕获：为支持遗留浏览器，可以将CSS3特性转换为图片
9. 优化工具：强大的代码选择工具，用于微调、确定哪些被包含在最终的构建中；确定跨越多个页面的公共代码并共享
10. 灵活的配置系统
11. 日志系统：详尽的日志，让你可以了解命令的内部工作步骤

# 一般命令调用格式
sencha [category] [command] [options...] [arguments...]
# 帮助
sencha help [module] [action]

这类子命令执行多种应用程序的构建处理：

# 仅仅更新scaffold：包括.sencha子目录中的内容，以及app.js等文件
sencha app upgrade
# path-to-new-framework为可选，用于在更新scaffold的同时更新你使用的ExtJS的版本
sencha app upgrade [ path-to-new-framework ]

sencha app init --ext=/path/to/extjs/ AppName --modern

sencha app install --frameworks=/path/to/extjs

# 基于开发环境构建
sencha app build development

生成模型、控制器或者其它组件，甚至整个应用程序：

sencha generate app -ext -classic AppName ./AppPath
sencha -sdk /home/alex/JavaScript/extjs/6.2.0 generate app -modern AppName ./AppPath

sencha generate controller Central

# 在应用根目录执行
# 生成一个名为User的模型，包含3个字段
sencha generate model User id:int,name,email

sencha generate package pkgname

# 在view/foo子目录下生成Thing视图，以及视图模型ThingModel、视图控制器ThingController
sencha generate view foo.Thing

这一类子命令用于管理包的远程仓库：

sencha repository add sencha http://cdn.sencha.com/cmd/packages/

# 检查新版本
sencha upgrade --check
# 执行升级
sencha upgrade
# 无人值守的升级
sencha upgrade --unattended
# 包含beta版本
sencha upgrade --check --beta 

可以使用下面的命令生成一个Universal应用的脚手架：

sencha -sdk /home/alex/JavaScript/extjs/6.2.0 generate app MyApp MyApp

.
├── app                   # 当前应用有关文件的目录
│   ├── Application.js    # 当前应用的实现类，扩展Ext.app.Application
│   ├── model             # 视图模型、模型存放目录
│   ├── store             # 存储存放目录
│   └── view              # 视图控制器、控制器存放目录
├── app.js                # 应用入口点定义
├── app.json              # 应用描述符文件
├── bootstrap.js          # 自举文件，其中包含微加载器
├── build                 # 构建结果存放目录
│   ├── development       # 构建环境：development的构建结果
│   └── temp
├── build.xml
├── classic               # 针对classic toolkit的源代码
│   ├── sass
│   └── src               # 组件，主要是UI组件
├── ext                   # 复制来的ExtJS SDK完整目录
├── index.html            # 入口点网页
├── modern                # 针对modern  toolkit的源代码
│   ├── sass
│   └── src               # 组件，主要是UI组件
├── overrides             # 对组件的重写存放在此
├── packages              # 依赖的包存放在此
├── resources             # 资源文件存放在此
├── .sencha
│   ├── app
│   │   ├── defaults.properties   # 构建属性的默认值和说明
│   │   ├── development.defaults.properties # 针对构建环境development的默认构建属性
│   │   ├── development.properties # 针对构建环境development的构建属性
│   │   ├── ext.properties  # 针对ExtJS的构建属性
│   │   ├── sencha.cfg      # Sencha Cmd配置文件
└── workspace.json        # 工作区描述符文件

执行下面的命令构建当前应用：

sencha app build

该命令会构建你的HTML页面、JS代码和主题到build目录中。

Sencha Cmd根据你的app.json，生成自举脚本（bootstrap）。自举脚本向动态类加载器（Ext.Loader以及微加载器）传递必要的信息，后者负责加载程序代码。自举脚本不会被你的JS代码的变动影响，因此你需要执行编辑 - 保存 - 重新载入 这样的工作流程。

要保证自举脚本与最新的源码文件匹配，可以基于以下两种途径之一：

1. 使用

   sencha app watch

    ，该命令启动一个Web服务器，并且监控源码，在源码改变后立即执行一次开发环境构建（development build）。该方式支持Fashion的Live Update功能
2. 手工构建并更新：
   

   # 除了更新JS部分，还继续样式的编译，并生成CSS
   sencha app build development
   # 仅仅更新bootstrap与JS相关的部分
   sencha app refresh

Cmd 6引入了此组件，用于支持快速开发ExtJS 6主题。联合使用app watch可以启用所谓实时更新（Live Update）的特性。

实时更新利用Fashion来编译Scss，并且将其生成的最新CSS注入到浏览器页面。Fashion基于JavaScript实现，不需要Ruby的支持。

Fashion扩展了Sass语言，添加了新的特性，以便Sencha Inspector之类的工具可以可视化的查看、编辑主题、应用中定义的变量。

配置app.json以启用实时更新：

"development": {
    "tags": [
        "fashion"
    ]
},

也可以不指定上述配置，直接修改URL来启用实时更新：

?platformTags=fashion:1

启用实时更新时，加载到浏览器的是Sass而非生成的CSS，当Sass发生变化时，Fashion会立即编译之并更新页面上的CSS。

动态变量是Fashion对Sass的语言扩展。在Fashion中动态变量非常重要，动态变量类似于普通变量，但是其值被

dynamic()

$bar: dynamic(blue);
$foo: dynamic($bar);  // 变量$foo依赖于$bar
$bar: dynamic(red);

@debug $foo;  // $foo的值为red而不是blue

可以注意到，动态变量的值并非在逐行处理过程中确定的。对动态变量的处理分为赋值、估算两个阶段。

赋值阶段的处理类似于普通变量，按照级联的顺序赋值。对动态变量的赋值只能在文件范围（位于任何控制块的外面）进行：

$bar: dynamic(blue);

@if something {
    $bar: dynamic(red); // 非法
}

$bar: dynamic(if(something, red, blue)); // 合法

这一限制是动态变量估算、提升行为（hoisting behaviors）所需。

在声明之后，再次对动态变量赋值，必须要附带dynamic()：

$bar: dynamic(blue);
$bar: red;  // bar被赋值为red
$bar: green !default;  // 重新赋值为green
@debug $bar;   // green

在该阶段，根据依赖顺序（而不是声明顺序）确定动态变量的实际值，例如：

$bar: dynamic(mix($colorA, $colorB, 20%));
$bar: dynamic(lighten($colorC, 20%));

由于对$bar进行了再次赋值，$bar依赖于$colorC，因此仅当$colorC的值被估算出来后，$bar的值即可确定，至于$colorA、$colorB何时估算，与$bar无关。

为了实现估算阶段的逻辑，Fashion收集所有动态变量，在执行任何Sass代码之前统一的估算它们。这意味着类似于JavaScript变量，Fashion动态变量也是被提升到作用域最前面的。

当一个变量用于给动态变量赋值，其本身也被升级为动态变量：

$foo: blue;   // 尽管$foo作为普通变量声明，但是由于动态变量$bar依赖于它，因此$foo被升级为动态变量
$bar: dynamic($foo);

你可以通过编写JS代码来扩展Fashion，要在Sass中包含这些扩展代码，可以：

require("my-module");
require("../path/file.js");

在内部，Fashion使用ES6的System.import加载标准的JS模块。

一个扩展的代码可以如下：

// ES6以前的版本
exports.init = function(runtime) {
    runtime.register({
        magic: function (first, second) {
        }
    });
};
// ES6
module foo {
    export function init (runtime) {
        runtime.register({
            magic: function (first, second) {
            }
        });
    }
} 

编译器是Sencha Cmd的主要组件。此编译器并不类似于：

1. YUI压缩器
2. Google Closure编译器
3. UglifyJS

上述工具解决JS开发者面临的不同问题，但是它们不能理解Sencha框架，例如Ext.define用于定义类。

编译器用于提供框架相关的优化、诊断，一旦代码通过了此编译器，其它一般性的工具可以继续处理它。这类优化可以极大的改善ExtJS的加载时间，特别是针对遗留浏览器。

为了编译器能够最优化的操作， 你必须遵循一系列的编码约定，这样编译器才能理解你的代码，进而执行优化操作。

Cmd生成的动态加载器，以及之前的JSBuilder，都假设代码按照一定的规则组织。你应该保证：

1. 每个JavaScript源文件应该在全局作用域包含一个Ext.define 语句
2. 源文件的文件Base名必须和ExtJS类的Simple name匹配
3. ExtJS类的命名空间应当映射为源码子目录
4. 为了让编译器能够自由的在类级别选择代码，应当确保一个类对应一个文件

第2、3两条类似于Java的包与文件系统的映射规则。

编译器能够识别Ext.define的以下关键字（keywords）并进行优化处理：requires、uses、extend、mixins、statics、alias、singleton、override、alternateClassName、xtype

除了Ext.define最常用的调用方法——第二个参数传递简单对象以外，编译器也能够识别以下几种调用变体：

// 指定第二个参数为函数
Ext.define('Foo.bar.Thing', function (Thing) {
    return {
        // 这里声明关键字
        extend: '...',
    };
});
// 指定第二个参数为函数调用
Ext.define('Foo.bar.Thing', function () {

    return {
        // 这里声明关键字
        extend: '...'
    };
}());

从ExtJS 4.1/Touch 2.0开始，Ext.define能够管理重写。在历史版本中，重写用于打补丁以解决BUG或者增强功能。在引入动态加载器后，情况变得复杂，因为

Ext.override

现在，编译器能够理解重写，以及它们对依赖、加载顺序的影响。在未来的版本中，编译器在消除dead code（被override替换）时会更加激进。遵循本节的规则，你可以在未来版本获得益处。

标准的重写代码范例如下：

// 尽管这里选定的名字空间是任意的，但是最好遵循下文说明的规则
Ext.define('MyApp.patches.grid.Panel', {
    override: 'Ext.grid.Panel',
    ...
});

通过重写来打补丁是最常见的应用。你应当把所有补丁的命名空间与它针对的目标类的命名空间对应，例如MyApp.patches对应Ext。

除了打补丁，重写还可以用做不完整类（Partial Classes）。当你使用Sencha Architect之类的代码生成器时，一个类通常分类两个部分：机器生成部分、人工编写部分，这种划分有助于机器部分的重新生成。不完整类的用法示例：

// 自动生成的类
Ext.define( 'Foo.bar.Thing', {
    // NOTE: This class is generated - DO NOT EDIT...
    requires: [
        'Foo.bar.custom.Thing'
    ],
    method: function () {
    },
} );
// 重写，作为部分类
Ext.define( 'Foo.bar.custom.Thing', {
    override: 'Foo.bar.Thing',
    method: function () {
        this.callParent(); // 调用自动生成的方法
    },
} );

重写的最后一种用法是作为切面（Aspect） 。OOP会导致的一个问题就是过度肥胖的基类，这是因为它包含过多的公共逻辑。使用override，可以分离出其中的逻辑，而仅仅在需要使用的时候，才require之：

// 作为切面的重写
Ext.define('Foo.feature.Component', {
    override: 'Ext.Component'
});
// 作为切面的重写，与Foo.feature.Component提供一个产品族
Ext.define('Foo.feature.grid.Panel', {
    override: 'Ext.grid.Panel',

    requires: [
        'Foo.feature.Component' // 由于重写不产生继承关系，这里必须显式require
    ]
});


// 需要使用上述切面的客户代码：

requires: [
    'Foo.feature.grid.Panel'
]
// 或者
requires: [
    'Foo.feature.*'
]

注意：在重写时，你可以调用

callSuper()

除了JavaScript、CSS、HTML以外，Web应用程序往往包含很多代码无关的资源文件（也叫资产，Asset）——图片、视频、数据文件。Cmd将这些资产分类并提供多种管理它们的选项。

资源文件一般都放在名为resources的目录下，这些目录可能来自：

1. 对于单Toolkit应用，位于应用根目录，例如MyApp/resources
2. 对于Universal应用，位于应用根目录，以及各Toolkit下，例如MyApp/resources、MyApp/classic/resources
3. 主题附带的资源文件，位于主题的根目录，例如theme-neptune/resources
4. 软件包附带的资源文件，位于软件包的根目录

你可以应用程序描述符app.json中的resources数组，用来定制应用程序资源的来源：

"resources" [{
    "path": "resources",   // 改变此配置以便在其它目录中存放资源
}]

对于单Toolkit应用，仅该数组的第一个元素作为实际的资源路径，其它元素、第一个元素的output设置都被忽略。 

对于Universal应用，该数组可以指定多个元素，并且使用output来指定使用哪个资源池：

"resources": [{
    "path": "resources",
    "output": "shared"   # 使用shared资源池
}, {
    "path": "${toolkit.name}/resources"   # 使用默认资源池
}],

这样，可以被多个Toolkit共享的资源，就可以放在（默认）应用根目录的resources目录下，而Toolkit独有的资源则放在与Toolkit同名的目录的resources子目录下。

对于包，支持像Universal应用那样声明多个资源目录、使用哪个资源池。

app.json的顶级output元素， 声明在构建后的应用程序文件被输出到何处：

"output": {
    "base": "${workspace.build.dir}/${build.environment}/${app.name}",
    // 例如 ./workspace/build/production/MyApp
},

对于Universal应用，可以定义资源池（resource pools）：

"output": {
    "base": "${workspace.build.dir}/${build.environment}/${app.name}",
    // 资源池定义
    "resources": {
        // 默认资源池，对应buildId下的resources目录
        "path": "${build.id}/resources",
        // 名为shared的共享资源池，对应应用程序的根目录下的resources子目录
        "shared": "resources"
    }

},

应用、主题、包中的资源文件，都输出到某个资源池中：

1. 单Toolkit应用、主题中的资源文件，输出到默认资源池
2. Universal应用，默认的，应用根目录下resources输出到共享资源池；toolkit.name/resources输出到默认资源池
3. 包的资源输出到资源池的package.name子目录下。这是应用程序构建为包提供的沙盒

多个不同来源的资源文件，可能存在路径名相同的情况，此时会按照一定的规则覆盖：

1. 由于主题支持继承，因此子主题中的同名资源，自动覆盖父主题中的资源
2. 在应用的resources目录中（如果是Universal应用，则必须是toolkit.name/resources目录中）的文件，可以覆盖同路径的来自主题、包的资源文件

与应用类似，包也具有自己的描述符package.json：

// 构建输出
"output": "${package.dir}/build",
// 资源路径
"resources": [{
    "path": "resources"
}]

为了让非Cmd应用使用包，可以单独构建之：

sencha package build

为了防止不同包中同名资源被意外的覆盖，应用程序构建（App build）为包中的资源提供沙盒，即，为每个包的资源提供resources的子目录，子目录以包名为名称。

由于应用程序资源、包资源路径处理方式的不同，因此在CSS中引用时，需要注意。Cmd提供了API来获取资源的正确路径：

.arrow-button {
    // 不使用资源池，或者使用默认资源池时：
    background-image: url(get-resource-path('images/arrow.png'));
    // 使用资源池时：
    background: url(get-resource-path('images/foo.png', $pool: 'shared'));
}

在JavaScript中，也有类似的API：

image.setSrc(
    // 第二个参数为资源池的名称
    Ext.getResourcePath('images/arrow.png', null, 'arrow-button') 
); 

Sencha Cmd应用的packages目录包含local、remote两个子目录，分别存放本地、远程包。

你可以在app.json中使用requires声明对包的依赖。sencha app build、sencha app refresh命令会自动把包集成到应用程序中。

执行下面的命令可以生成一个本地包：

sencha generate package common

此包的内容放置在packages/local/common目录中。此包的packages.json中会自动添加

local: true

远程包的管理是基于包仓库（package repositories）进行的，Cmd会自动生成一个本地的包仓库，用于缓存、发布包。

执行下面的命令，可以查看可用的远程仓库列表：

sencha repository list

sencha repository add

sencha repository remove

sencha-*、ext-*、touch-*、cmd-*这些前缀的包名被内部使用。

可以指定当前包的版本号，以及它和什么样的历史版本兼容：

{
    // 当前版本
    "version": "n.n.n",
    // 兼容的最低版本
    "compatVersion": "2.4.2",
}

在应用描述符的requires里，可以附加版本要求：

"requires": [ "ext-easy-button@1.0" ]

Cmd引入工作区的概念，以便管理多个需要共享框架、代码、样式、资源的应用程序。

构建一个大型应用程序的步骤与构建一个单页应用程序的起始步骤一样。一旦应用程序扩展到多个页面，以下常见问题将会出现：

1. 如何共享的使用同一框架
2. 如果跨页面共享代码
3. 如果共享第三方包

为了解决这些问题，Cmd引入了工作区的概念。一个工作区是包含了多个页面（在Sencha的术语里叫应用，Application，因为应用一般都是单页面的，一个应用只进行一次Ext.application调用）、框架（不同版本）、包以及其它共享代码/文件的目录。工作区的根目录通常会纳入版本控制。

如果在工作区内组织各页面的目录并不重要，但是通常把它们的目录作为工作区根目录的直接子目录。

执行下面的命令可以创建一个工作区：

sencha generate workspace /path/to/workspace

# 生成的目录结构如下：
.
├── packages
├── .sencha               # Sencha Cmd相关文件
│   ├── .cvsignore
│   ├── .gitignore
│   └── workspace         # 工作区相关文件
│   ├── plugin.xml
│   └── sencha.cfg        # Sencha Cmd配置
└── workspace.json        # 工作区描述符

所谓微加载器（Microloader）是Sencha的数据驱动的JavaScript/CSS动态加载器。微加载器由Cmd提供，并作为生成的应用程序的一部分。

ExtJS 6的微加载器实现与ExtJS 5或者Touch不同，它增强了一些功能，这些功能可以在app.json中配置。执行

sencha app upgrade

Cmd会把app.json转换为manifest供微加载器在运行时使用。你也可以在运行时调用

Ext.manifest

有三种方式来指定微加载器使用什么Manifest：

1. 嵌入式Manifest，配置：
   

   "output": {
       "manifest": {
           "embed": true
       }
   }

    可以在构建期间把Manifest嵌入到bootstrap.js文件中

2. 命名Manifest，你可以指定从哪个文件中加载Manifest，默认app.json：
   

   <script type="text/javascript">
       var Ext = Ext || {};
       Ext.manifest = 'foo';  // 从./foo.json加载
   </script>
   <script id="microloader" data-app="f72c0f68" type="text/javascript" src="bootstrap.js"></script>

3. 动态指定Manifest，你可以动态的设置Ext.manifest为任意字符串为应用描述符文件的basename

微加载器负责解析app.json并生成manifest，大概步骤如下：

1. 读取app.json，其中内容被后续步骤解析
2. 获取app.json中与当前构建环境（production/testing/development）匹配的设置，作为基础manifest
3. 获取app.json中与当前构建配置匹配（builds.***）的设置，覆盖上面的manifest
4. 读取app.json中与当前Toolkit匹配（classic/modern）的设置，覆盖上面的manifest
5. 读取app.json中与当前packager匹配的设置，覆盖上面的manifest
6. 开始处理依赖包，如果package.json中声明了js、css，则它们按照包的依赖顺序，插入上面manifest['js']或者manifest['css']数组的最前面。package.json中其它内容被置入manifest的packages属性中

Cmd生成的脚手架代码中已经引用的微加载器：

<script id="microloader" data-app="12345" type="text/javascript" src="bootstrap.js"></script>

其中data-app为应用的UUID，该ID会在LocalStorage中作为Key使用，避免多个页面的数据混乱在一起。

由Cmd自动生成的app.json叫做应用描述符，该描述符会被微加载器使用，并且在运行时暴露为 Ext.manifest。你可以定制其中的很多配置项，以改变应用的行为。下表列出最常用的配置项：

"theme": "ext-theme-crisp"

"classpath": [
    "app",
    "${toolkit.name}/src"
] 

"js": [{
    "path": "app.js",
    "bundle": true
}]

"js": [{
    "path": "library.js",
    "includeInBundle": true // 包含在concatenated classes中，如果false，则此文件在构建结果中存在，由微加载器独立加载
},{
    "path": "app.js",
    "bundle": true  // 只能有一个元素定义此属性，设置为true则此文件作为concatenated classes容器
}]

"css": [
    {
        "path": "${build.out.css.path}",
        "bundle": true,
        "exclude": [
            "fashion"
        ]
    }
],

"output": {
    "page": {
        "path": "../page.jsp",
        "enable": false // 仅仅说明页面URL是哪个，但是不赋值源文件到输出
    }
}

"output": {
    "appCache": {
        // 启用缓存
        "enable": true
    },
    "appCache": {
        // 哪些使用缓存
        "cache": [
            "index.html"
        ],
        // 哪些必须联网获取
        "network": [
            "*"
        ],
        // 哪些在联网获取失败时使用缓存
        "fallback": []
    }
},

"js": [
    {
        "path": "app.js",
        "bundle": true,
        "update": "delta"
    }
],

"css": [
    {
        "path": "app.css",
        "update": "full"
    }
]

"cache": {
    "enable": true
}

"cache": { "deltas": true }

Ext.application( {
    name: 'MyApp',
    mainView: 'MyMainView',
    // 监听缓存更新事件
    onAppUpdate: function () {
        Ext.Msg.confirm( '应用程序已更新',
            function ( choice ) {
                if ( choice === 'yes' ) {
                    window.location.reload();
                }
            }
        );
    }
} );

"builds": {
    "classic": {
        "theme": "ext-theme-classic"
    },
    "gray": {
        "theme": "ext-theme-gray"
    },
    "access": {
        "theme": "ext-theme-access"
    },
    "
}

"locales": [ "en", "he" ]

"tags": ["ios", "phone", "fashion"]
// 或者
"tags": {
    "ios": true,
    "phone": true,
    "desktop": false,
    "fashion": true
}

PhoneGap基于Cordova构建，并提供一些辅助工具，例如远程构建服务。

基于Sencha Cmd构建时，仅能构建DEBUG版本的Cordova/PhoneGap应用，要构建能够在应用商店下载的APP你需要使用Android Studio/XCode。

首先，按照一般性步骤创建Cmd应用：

mkdir MyApp && cd MyApp
sencha app init --ext=/home/alex/JavaScript/extjs/6.2.0 MyApp --universal

当开发ExtJS 6 Universal应用时，则上述生成的应用结构的app.json中已经包含了builds块，这种情况下sencha cordova/phonegap子命令无法修改此块，因此你需要手工的修改：

"builds": {
    "classic": {},
    "modern": {
        "toolkit": "modern",
        "theme": "theme-triton",
        // 如果使用Cordova，可以添加：
        "cordova": {
            "config": {
                "platforms": "ios",
                "id": "cc.gmem.myappid"
            }
        },
        // 如果使用PhoneGap，可以添加：
        "packager": "phonegap",
        "phonegap": {
            "config": {
                "platform": "ios",
                "id": "cc.gmem.myappid"
            }
        }
    }
},

然后进入工程目录，初始化Cordova/PhoneGap支持：

sencha phonegap init cc.gmem.myappid  MyApp
# 或者
sencha cordova init cc.gmem.myappid MyApp

当开发ExtJS Modern应用程序时，上述命令会自动生成如下builds块：

// native仅仅是一个构建配置名（build-name），你可以将其修改为任意值
"native": {
    "packager": "cordova",
    "cordova": {
        "config": {
            "platforms": "ios android",  // 需要支持的移动平台
            "id": "cc.gmem.myappid2",    // 用于唯一识别应用程序的标识符
            "name": "MyApp2"             // 应用程序名称
        }
    }
}

上述命令执行完毕后，在工程目录会出现cordova或者phonegap子目录。 这些子目录的内容与普通Cordova/PhoneGap工程一致。

下面的Cmd子命令可以用于构建出Native软件包： 

# 首先构建Sencha应用程序，然后构建Native应用
sencha app build {build-name}
# 首先构建，然后尝试在连接上来的设备上运行程序
sencha app run {build-name}
# 首先构建，然后尝试在模拟器上运行程序
sencha app emulate {build-name}
# 构建Sencha应用程序，然后拷贝到Cordova/PhoneGap指定目录，准备后续的Native构建
sencha app prepare {build-name}

使用PhoneGap远程构建服务，可以避免很多麻烦的问题，例如下载SDK、工具，购买Mac电脑。你仅仅需要把自己的Web应用上传到PhoneGap服务器，Adobe就可以自动的把Native应用生成给你。在开始之前，你需要到PhoneGap网站申请一个免费账号。如果要构建iOS应用，你需要在PhoneGap网站上填写一系列的credentials信息。

要启用远程构建，需要配置app.json：

"builds": {
    "native": {
        "packager": "phonegap",
        "phonegap" : {
            "config": {
                "platform": "ios",
                "remote": true,  // 远程构建
                "id": "com.mydomain.MyApp"
            }
        }
    }
}

为了向Cmd提供你的PhoneGap网站账号信息，你需要在应用根目录创建一个local.properties文件：

phonegap.username=name@me.com
phonegap.password=passwd

远程构建完毕后，你可以到PhoneGap门户去下载安装包，或者将其发布到应用商店。 

"frameworks": {
    "ext62": "ext",
    "ext602": "ext-6.0.2"
}

"framework": "ext62"

# 自动生成frameworks子项，其键根据目录中ExtJS的版本号推导出，例如6.2.0 版本的键为ext62，6.0.2版本的键为ext602
sencha framework add /path/to/ext
# 手工指定键值  path为拷贝到工作区的哪个子目录，key为键，必须以ext或者touch开头
sencha framework add -key extFiveO -source /path/to/ext-5.0.0 -path ext50

sencha generate app -extFiveO AppName path/to/app

# --force 即使有应用程序在使用，也强制删除框架
sencha framework remove --force  extFiveO

# 从/path/to/ext目录升级以ext作为key的框架
sencha framework upgrade ext /path/to/ext
# 升级单个应用程序
sencha app upgrade ../ext62
# 升级整个工作区中所有应用程序、包中和Cmd相关的文件
sencha workspace upgrade 

sencha framework list

# 除了--modern，还可以 --classic 或者 --universal
sencha app init --ext=/path/to/extjs/ AppName --modern

sencha app build

sencha app install --frameworks=/path/to/extjs
# frameworks是 6.1引入的特性，允许你指向一个具有多个版本ExtJS的目录
# 当前使用的ExtJS版本定义在workspace.json中，Cmd会自动选择最匹配的版本

sencha workspace install --frameworks=/path/to/extjs 

"output": {
    "js": {
        "version": "ES6"
    }
}

The post Sencha Cmd学习笔记 appeared first on 绿色记忆.

选取器控件通常具有这样的UI风格：

1. 包含一个触发按钮
2. 点击触发按钮，在字段输入框下方弹出一个“picker”
3. 操作picker，会改变输入框的值

选取器控件的父类是Ext.form.field.Picker，它继承于Trigger，后者继承于Text

这是一个基础的输入框字段，可以用来替换

<input type="text" />

Text内置了若干验证机制，例如：allowBlank 、minLength、maxLength、regex ，并且，可以使用vtype、validator提供定制的验证功能

默认情况下，用户在Text输入文字后，就会立即启动验证，可以通过validateOnChange、checkChangeEvents、 checkChangeBuffer对此行为进行控制。

Text提供了以下成员：

 Ext.form.field.Text的源代码分析如下：

Ext.define('Ext.form.field.Text', {
    extend:'Ext.form.field.Base',
    alias: 'widget.textfield',
    size: 20,
    growMin : 30,
    growMax : 800,
    growAppend: 'W',
    allowBlank : true,
    minLength : 0,
    maxLength : Number.MAX_VALUE,
    minLengthText : 'The minimum length for this field is {0}',
    maxLengthText : 'The maximum length for this field is {0}',
    blankText : 'This field is required',
    regexText : '',
    emptyCls : Ext.baseCSSPrefix + 'form-empty-field',
    requiredCls : Ext.baseCSSPrefix + 'form-required-field',
    componentLayout: 'textfield', //组件布局方式
    valueContainsPlaceholder : false,
    initComponent: function () {
        var me = this;
        me.callParent();
        me.addEvents(
            'autosize',
            'keydown',
            'keyup',
            'keypress'
        );
        me.addStateEvents('change'); //值改变作为状态事件
        me.setGrowSizePolicy();
    },
    setGrowSizePolicy: function(){
        if (this.grow) {
            this.shrinkWrap |= 1;
        }    
    },
    //初始化事件处理
    initEvents : function(){
        var me = this,
            el = me.inputEl;
        me.callParent();
        if(me.selectOnFocus || me.emptyText){
            //聚焦选取
            me.mon(el, 'mousedown', me.onMouseDown, me);
        }
        if(me.maskRe || (me.vtype && me.disableKeyFilter !== true && (me.maskRe = Ext.form.field.VTypes[me.vtype+'Mask']))){
            //击键过滤
            me.mon(el, 'keypress', me.filterKeys, me);
        }
        if (me.enableKeyEvents) {
            //启用了按键事件
            me.mon(el, {
                scope: me,
                keyup: me.onKeyUp,
                keydown: me.onKeyDown,
                keypress: me.onKeyPress
            });
        }
    },
    //判断两值相等：按字符串比较
    isEqual: function(value1, value2) {
        return this.isEqualAsString(value1, value2);
    },
    //值改变时的模板方法
    onChange: function() {
        this.callParent();
        this.autoSize();
    },
    //字段fieldSubTpl的填充数据
    getSubTplData: function() {
        var me = this,
            value = me.getRawValue(),
            isEmpty = me.emptyText && value.length < 1,
            maxLength = me.maxLength,
            placeholder;
        if (me.enforceMaxLength) {
            if (maxLength === Number.MAX_VALUE) {
                maxLength = undefined;
            }
        } else {
            maxLength = undefined;
        }
        if (isEmpty) {
            if (Ext.supports.Placeholder) {
                placeholder = me.emptyText;
            } else {
                value = me.emptyText;
                me.valueContainsPlaceholder = true;
            }
        }
        //把必要的数据覆盖到父类版本
        return Ext.apply(me.callParent(), {
            maxLength   : maxLength,
            readOnly    : me.readOnly,
            placeholder : placeholder,
            value       : value,
            fieldCls    : me.fieldCls + ((isEmpty && (placeholder || value)) ? ' ' + me.emptyCls : '') + (me.allowBlank ? '' :  ' ' + me.requiredCls)
        });
    },
    //渲染后模板
    afterRender: function(){
        this.autoSize();
        this.callParent();
    },
    //鼠标按下时模板
    onMouseDown: function(e){
        var me = this;
        if(!me.hasFocus){
            //如果按下鼠标时焦点已经离开当前元素，则注册单次执行的事件句柄，阻止默认行为
            me.mon(me.inputEl, 'mouseup', Ext.emptyFn, me, { single: true, preventDefault: true });
        }
    },
    //对原始值进行预处理
    processRawValue: function(value) {
        var me = this,
            stripRe = me.stripCharsRe,
            newValue;

        if (stripRe) {
            newValue = value.replace(stripRe, ''); //把匹配正则式的部分剔除
            if (newValue !== value) {
                me.setRawValue(newValue); //设置原始值
                value = newValue;
            }
        }
        return value;
    },
    //禁用时模板
    onDisable: function(){
        this.callParent();
        if (Ext.isIE) {
            //IE特殊处理，禁止选中
            this.inputEl.dom.unselectable = 'on';
        }
    },
    //启用时模板
    onEnable: function(){
        this.callParent();
        if (Ext.isIE) {
            this.inputEl.dom.unselectable = '';
        }
    },
    //按下键时的模板
    onKeyDown: function(e) {
        this.fireEvent('keydown', this, e);//发布事件
    },
    //放开按键时的模板
    onKeyUp: function(e) {
        this.fireEvent('keyup', this, e);//发布事件
    },
    //击键时模板
    onKeyPress: function(e) {
        this.fireEvent('keypress', this, e);//发布事件
    },
    //重置
    reset : function(){
        this.callParent();
        this.applyEmptyText();//显示空白文本
    },
    //使用HTML5 placeholder或者input.value显示空白文本
    applyEmptyText : function(){
        var me = this,
            emptyText = me.emptyText,
            isEmpty;

        if (me.rendered && emptyText) {
            isEmpty = me.getRawValue().length < 1 && !me.hasFocus;

            if (Ext.supports.Placeholder) {
                me.inputEl.dom.placeholder = emptyText;
            } else if (isEmpty) {
                me.setRawValue(emptyText);
                me.valueContainsPlaceholder = true;
            }
            if (isEmpty) {
                me.inputEl.addCls(me.emptyCls);
            }
            me.autoSize();
        }
    },
    //设置组件布局后
    afterFirstLayout: function() {
        this.callParent();
        if (Ext.isIE && this.disabled) {
            var el = this.inputEl;
            if (el) {
                el.dom.unselectable = 'on';
            }
        }
    },
    //聚焦前，清除空白文本
    preFocus : function(){
        var me = this,
            inputEl = me.inputEl,
            emptyText = me.emptyText,
            isEmpty;
        me.callParent(arguments);
        if ((emptyText && !Ext.supports.Placeholder) && (inputEl.dom.value === me.emptyText && me.valueContainsPlaceholder)) {
            me.setRawValue('');
            isEmpty = true;
            inputEl.removeCls(me.emptyCls);
            me.valueContainsPlaceholder = false;
        } else if (Ext.supports.Placeholder) {
            me.inputEl.removeCls(me.emptyCls);
        }
        if (me.selectOnFocus || isEmpty) {
            inputEl.dom.select();
        }
    },
    //处理聚焦
    onFocus: function() {
        var me = this;
        me.callParent(arguments);
        if (me.emptyText) {
            me.autoSize();
        }
    },
    //聚焦后，显示空白文本
    postBlur : function(){
        this.callParent(arguments);
        this.applyEmptyText();
    },
    //获取原始值
    getRawValue: function() {
        var me = this,
            v = me.callParent();
        if (v === me.emptyText && me.valueContainsPlaceholder) {
            v = ''; //空白文本处理
        }
        return v;
    },
    //设置值
    setValue: function(value) {
        var me = this,
            inputEl = me.inputEl;
        if (inputEl && me.emptyText && !Ext.isEmpty(value)) {
            //移除空白文本的样式
            inputEl.removeCls(me.emptyCls);
            me.valueContainsPlaceholder = false;
        }
        me.callParent(arguments);
        me.applyEmptyText();
        return me;
    },
    //执行验证
    getErrors: function(value) {
        var me = this,
            errors = me.callParent(arguments),
            validator = me.validator,
            emptyText = me.emptyText,
            allowBlank = me.allowBlank,
            vtype = me.vtype,
            vtypes = Ext.form.field.VTypes,
            regex = me.regex,
            format = Ext.String.format,
            msg;
        value = value || me.processRawValue(me.getRawValue());
        if (Ext.isFunction(validator)) {
            msg = validator.call(me, value);
            if (msg !== true) {
                errors.push(msg);
            }
        }
        if (value.length < 1 || (value === me.emptyText && me.valueContainsPlaceholder)) {
            if (!allowBlank) {
                errors.push(me.blankText);
            }
            return errors;
        }
        if (value.length < me.minLength) {
            errors.push(format(me.minLengthText, me.minLength));
        }
        if (value.length > me.maxLength) {
            errors.push(format(me.maxLengthText, me.maxLength));
        }
        if (vtype) {
            if(!vtypes[vtype](value, me)){
                errors.push(me.vtypeText || vtypes[vtype +'Text']);
            }
        }
        if (regex && !regex.test(value)) {
            errors.push(me.regexText || me.invalidText);
        }
        return errors;
    },
    selectText : function(start, end){
        var me = this,
            v = me.getRawValue(),
            doFocus = true,
            el = me.inputEl.dom,
            undef,
            range;

        if (v.length > 0) {
            start = start === undef ? 0 : start;
            end = end === undef ? v.length : end;
            if (el.setSelectionRange) {
                el.setSelectionRange(start, end);
            }
            else if(el.createTextRange) {
                range = el.createTextRange(); //文本选择范围
                range.moveStart('character', start);
                range.moveEnd('character', end - v.length);
                range.select();
            }
            doFocus = Ext.isGecko || Ext.isOpera;
        }
        if (doFocus) {
            me.focus();
        }
    },
    autoSize: function() {
        var me = this;
        if (me.grow && me.rendered) {
            me.autoSizing = true;
            me.updateLayout();
        }
    },
    //组件布局完成后
    afterComponentLayout: function() {
        var me = this,
            width;

        me.callParent(arguments);
        if (me.autoSizing) {
            width = me.inputEl.getWidth();
            if (width !== me.lastInputWidth) {
                me.fireEvent('autosize', me, width);//触发autosize事件
                me.lastInputWidth = width;
                delete me.autoSizing;
            }
        }
    }
});

该类简单的为Text添加一个可以触发某种行为的触发按钮（Trigger Button），默认效果如下拉框。触发按钮没有默认行为，子类需要通过实现onTriggerClick()方法来添加行为。

文件上传（File）、选取器（Picker）、数字字段（Number）是该类的直接或者间接子类型。

下面是一个简单的例子：

Ext.define( 'Ext.ux.AlertTrigger', {
    extend : 'Ext.form.field.Trigger',
    alias : 'widget.alerttrigger',
    onTriggerClick : function()
    {
        Ext.Msg.alert( 'Message', 'Current value is ' + this.getValue() );
    }
} );

 Trigger提供了以下成员：

Ext.form.field.Trigger的源代码分析如下：

Ext.define('Ext.form.field.Trigger', {
    extend:'Ext.form.field.Text',
    alias: ['widget.triggerfield', 'widget.trigger'],
    //作为组件属性的子元素
    childEls: [
        { name: 'triggerCell', select: '.' + Ext.baseCSSPrefix + 'trigger-cell' },
        { name: 'triggerEl', select: '.' + Ext.baseCSSPrefix + 'form-trigger' },
        'triggerWrap',
        'inputCell'
    ],
    triggerBaseCls: Ext.baseCSSPrefix + 'form-trigger',
    triggerWrapCls: Ext.baseCSSPrefix + 'form-trigger-wrap',
    triggerNoEditCls: Ext.baseCSSPrefix + 'trigger-noedit',
    hideTrigger: false,
    editable: true,
    readOnly: false,
    repeatTriggerClick: false,
    autoSize: Ext.emptyFn,
    monitorTab: true,
    mimicing: false,
    triggerIndexRe: /trigger-index-(\d+)/,
    componentLayout: 'triggerfield',
    initComponent: function() {
        this.wrapFocusCls = this.triggerWrapCls + '-focus';
        this.callParent(arguments);
    },
    //覆盖父类版本：获取HTML标记，用于插入到DOM中
    getSubTplMarkup: function() {
        var me = this,
            field = me.callParent(arguments);//Base类生成的input元素部分
        return '<table id="' + me.id + '-triggerWrap" class="' + Ext.baseCSSPrefix + 'form-trigger-wrap" cellpadding="0" cellspacing="0"><tbody><tr>' +
            '<td id="' + me.id + '-inputCell" class="' + Ext.baseCSSPrefix + 'form-trigger-input-cell">' + field + '</td>' +
            me.getTriggerMarkup() +  //触发按钮
            '</tr></tbody></table>';
    },
    //生成触发按钮的包装元素的HTML标记
    getTriggerMarkup: function() {
        var me = this,
            i = 0,
            hideTrigger = (me.readOnly || me.hideTrigger),
            triggerCls,
            triggerBaseCls = me.triggerBaseCls,
            triggerConfigs = [];
        if (!me.trigger1Cls) {
            me.trigger1Cls = me.triggerCls;
        }
        //可以指定trigger1Cls、trigger2Cls……等等，可以创建多个触发按钮
        for (i = 0; (triggerCls = me['trigger' + (i + 1) + 'Cls']) || i < 1; i++) {
            triggerConfigs.push({
                tag: 'td',
                valign: 'top',//顶部对齐
                cls: Ext.baseCSSPrefix + 'trigger-cell',
                style: 'width:' + me.triggerWidth + (hideTrigger ? 'px;display:none' : 'px'),
                cn: {
                    cls: [Ext.baseCSSPrefix + 'trigger-index-' + i, triggerBaseCls, triggerCls].join(' '),
                    role: 'button'
                }
            });
        }
        triggerConfigs[i - 1].cn.cls += ' ' + triggerBaseCls + '-last';
        return Ext.DomHelper.markup(triggerConfigs);
    },
    //fieldSubTpl填充上下文
    getSubTplData: function(){
        var me = this,
            data = me.callParent(),
            readOnly = me.readOnly === true,
            editable = me.editable !== false;
        //添加额外两个数据项
        return Ext.apply(data, {
            editableCls: (readOnly || !editable) ? ' ' + me.triggerNoEditCls : '',
            readOnly: !editable || readOnly
        });  
    },
    //带标签的填充上下文
    getLabelableRenderData: function() {
        var me = this,
            triggerWrapCls = me.triggerWrapCls,
            result = me.callParent(arguments);

        return Ext.applyIf(result, {
            triggerWrapCls: triggerWrapCls,
            triggerMarkup: me.getTriggerMarkup()
        });
    },
    //检查禁用状态
    disableCheck: function() {
        return !this.disabled;    
    },
    //渲染前模板
    beforeRender: function() {
        var me = this,
            triggerBaseCls = me.triggerBaseCls,
            tempEl;
  
        if (!me.triggerWidth) {
            //从临时元素自动计算触发按钮的宽度
            tempEl = Ext.resetElement.createChild({ //resetElement专门用于存放临时元素
                style: 'position: absolute;', 
                cls: Ext.baseCSSPrefix + 'form-trigger'
            });
            Ext.form.field.Trigger.prototype.triggerWidth = tempEl.getWidth();
            tempEl.remove();
        }
        me.callParent();
        if (triggerBaseCls != Ext.baseCSSPrefix + 'form-trigger') {
            me.addChildEls({ name: 'triggerEl', select: '.' + triggerBaseCls });
        }
        me.lastTriggerStateFlags = me.getTriggerStateFlags();
    },
    //渲染时模板
    onRender: function() {
        var me = this;
        me.callParent(arguments);
        me.doc = Ext.getDoc();
        me.initTrigger();//初始化触发按钮
        me.triggerEl.unselectable();//禁止触发按钮上的文本选择
    },
    //触发按钮的初始化
    initTrigger: function() {
        var me = this,
            triggerWrap = me.triggerWrap,
            triggerEl = me.triggerEl,//注意triggerEl是符合元素，包含若干按钮
            disableCheck = me.disableCheck,
            els, eLen, el, e, idx;
        //添加事件处理句柄
        if (me.repeatTriggerClick) {
            //ClickRepeater可以应用到任何元素，在元素点击时触发click事件
            //它可以设置触发的最小时间间隔
            me.triggerRepeater = new Ext.util.ClickRepeater(triggerWrap, {
                preventDefault: true,
                handler: me.onTriggerWrapClick, //点击事件处理
                listeners: {
                    mouseup: me.onTriggerWrapMouseup, //鼠标放开事件处理
                    scope: me
                },
                scope: me
            });
        } else {
            me.mon(triggerWrap, {
                click: me.onTriggerWrapClick,
                mouseup: me.onTriggerWrapMouseup,
                scope: me
            });
        }
        //设置触发按钮的样式
        triggerEl.setVisibilityMode(Ext.Element.DISPLAY);
        triggerEl.addClsOnOver(me.triggerBaseCls + '-over', disableCheck, me);
        els  = triggerEl.elements; //所有触发按钮
        eLen = els.length;
        for (e = 0; e < eLen; e++) {
            el = els[e];
            idx = e+1;
            //为所有触发按钮添加样式：trigger1Cls-over
            el.addClsOnOver(me['trigger' + (idx) + 'Cls'] + '-over', disableCheck, me);
            el.addClsOnClick(me['trigger' + (idx) + 'Cls'] + '-click', disableCheck, me);
        }
        triggerEl.addClsOnClick(me.triggerBaseCls + '-click', disableCheck, me);

    },
    //获取触发按钮总宽度
    getTriggerWidth: function() {
        var me = this,
            totalTriggerWidth = 0;

        if (me.triggerWrap && !me.hideTrigger && !me.readOnly) {
            totalTriggerWidth = me.triggerEl.getCount() * me.triggerWidth;
        }
        return totalTriggerWidth;
    },
    //设置触发按钮隐藏与否，更新布局
    setHideTrigger: function(hideTrigger) {
        if (hideTrigger != this.hideTrigger) {
            this.hideTrigger = hideTrigger;
            this.updateLayout();
        }
    },
    //设置可编辑性
    setEditable: function(editable) {
        if (editable != this.editable) {
            this.editable = editable;
            this.updateLayout();//更新布局
        }
    },
    //设置只读性
    setReadOnly: function(readOnly) {
        if (readOnly != this.readOnly) {
            this.readOnly = readOnly;
            this.updateLayout();//更新布局
        }
    },
    onDestroy: function() {
        var me = this;
        //销毁成员变量
        Ext.destroyMembers(me, 'triggerRepeater', 'triggerWrap', 'triggerEl');
        delete me.doc;
        me.callParent();
    },
    onFocus: function() {
        var me = this;
        me.callParent(arguments);
        if (!me.mimicing) {
            me.bodyEl.addCls(me.wrapFocusCls);
            me.mimicing = true;
            me.mon(me.doc, 'mousedown', me.mimicBlur, me, {
                delay: 10
            });
            if (me.monitorTab) {
                me.on('specialkey', me.checkTab, me);
            }
        }
    },
    checkTab: function(me, e) {
        if (!this.ignoreMonitorTab && e.getKey() == e.TAB) {
            this.triggerBlur();
        }
    },
    //用于检查DOM结构是否与组件状态失去同步
    getTriggerStateFlags: function () {
        var me = this,
            state = 0;

        if (me.readOnly) {
            state += 1;
        }
        if (me.editable) {
            state += 2;
        }
        if (me.hideTrigger) {
            state += 4;
        }
        return state;
    },
    onBlur: Ext.emptyFn,
    mimicBlur: function(e) {
        if (!this.isDestroyed && !this.bodyEl.contains(e.target) && this.validateBlur(e)) {
            this.triggerBlur(e);
        }
    },
    triggerBlur: function(e) {
        var me = this;
        me.mimicing = false;
        me.mun(me.doc, 'mousedown', me.mimicBlur, me);
        if (me.monitorTab && me.inputEl) {
            me.un('specialkey', me.checkTab, me);
        }
        Ext.form.field.Trigger.superclass.onBlur.call(me, e);
        if (me.bodyEl) {
            me.bodyEl.removeCls(me.wrapFocusCls);
        }
    },
    validateBlur: function(e) {
        return true;
    },
    //点击了触发按钮包装元素后的处理：
    onTriggerWrapClick: function() {
        var me = this,
            targetEl, match,
            triggerClickMethod,
            event;

        event = arguments[me.triggerRepeater ? 1 : 0];
        if (event && !me.readOnly && !me.disabled) {
                targetEl = event.getTarget('.' + me.triggerBaseCls, null);
                match = targetEl && targetEl.className.match(me.triggerIndexRe);

            if (match) {
                //调用相应的onTrigger1Click……以支持多个触发按钮
                //默认调用onTriggerClick
                triggerClickMethod = me['onTrigger' + (parseInt(match[1], 10) + 1) + 'Click'] || me.onTriggerClick;
                if (triggerClickMethod) {
                    triggerClickMethod.call(me, event);
                }
            }
        }
    },
    onTriggerWrapMouseup: Ext.emptyFn,
    onTriggerClick: Ext.emptyFn
});

该类是一般“选取器”，例如：下拉列表（ComboBox）、日期控件（Date）、下拉树（TreePicker）等的基类。它提供了以下公共逻辑：

1. 点击触发按钮、执行键盘导航后，切换Picker下拉窗的可见性
2. 依据配置matchFieldWidth、pickerAlign/pickerOffset来缩放、对齐Picker下拉窗

子类必须实现createPicker()，以提供picker下拉窗的内容。

Picker类提供了以下成员：

Ext.form.field.Picker的代码分析如下：

Ext.define('Ext.form.field.Picker', {
    extend: 'Ext.form.field.Trigger',
    alias: 'widget.pickerfield',
    matchFieldWidth: true,
    pickerAlign: 'tl-bl?', //对齐下拉窗的左上角到inputEl的左下角，?表示尝试按指定方式对齐，但是会收到viewport的约束
    openCls: Ext.baseCSSPrefix + 'pickerfield-open',
    editable: true,
    initComponent: function() {
        this.callParent();
        //添加额外的事件
        this.addEvents(
            'expand',
            'collapse',
            'select'
        );
    },
    //初始化必要的事件处理器，该方法会由Renderable在渲染后自动调用，那时组件的DOM结构已经生成
    initEvents: function() {
        var me = this;
        me.callParent();
        //处理打开/收起下拉窗的键盘导航事件
        me.keyNav = new Ext.util.KeyNav(me.inputEl, {
            down: me.onDownArrow, //向下箭头按钮
            esc: {
                handler: me.onEsc, //ESC按键
                scope: me,
                defaultEventAction: false
            },
            scope: me,
            forceKeyDown: true
        });
        //如果配置为不可编辑，点击输入框亦可打开下拉窗
        if (!me.editable) {
            me.mon(me.inputEl, 'click', me.onTriggerClick, me);
        }
        if (Ext.isGecko) {
            me.inputEl.dom.setAttribute('autocomplete', 'off');
        }
    },
    //处理ESC按键
    onEsc: function(e) {
        var me = this;
        if (me.isExpanded) {
            //如果是展开的，则收起，停止默认行为和事件传播
            me.collapse();
            e.stopEvent();
        } else {
            //如果当前字段具有一个Window组件，必须让当前字段失去焦点
            //因为Window会在收到ESC时隐藏，此时如果当前字段仍然获得焦点，那么向下箭头按键将导致下拉窗意外显示
            if (me.up('window')) {
                me.blur();
            }
            //如果没有启动焦点管理器，停止默认行为和事件传播
            else if ((!Ext.FocusManager || !Ext.FocusManager.enabled)) {
                e.stopEvent();
            }
        }
    },
    //向下按键
    onDownArrow: function(e) {
        if (!this.isExpanded) {
            //触发按钮点击逻辑
            this.onTriggerClick();
        }
    },
    //打开Picker下拉窗
    expand: function() {
        var me = this,
            bodyEl, picker, collapseIf;
        if (me.rendered && !me.isExpanded && !me.isDestroyed) {
            //如果尚未渲染，不执行任何动作
            bodyEl = me.bodyEl;
            picker = me.getPicker(); //获取或者创建下拉窗组件
            collapseIf = me.collapseIf;
            picker.show(); //显示下拉窗
            me.isExpanded = true; //设置展开状态
            me.alignPicker(); //对齐下拉窗
            bodyEl.addCls(me.openCls);
            //侦听点击和鼠标滚轮事件
            me.mon(Ext.getDoc(), {
                mousewheel: collapseIf,
                mousedown: collapseIf,
                scope: me
            });
            //当浏览器窗口大小改变后，重新对齐下拉窗
            Ext.EventManager.onWindowResize(me.alignPicker, me);
            me.fireEvent('expand', me); //发布展开事件
            me.onExpand(); //调用模板方法
        }
    },
    //打开下拉窗时的模板方法
    onExpand: Ext.emptyFn,
    //对齐下拉窗
    alignPicker: function() {
        var me = this,
            picker = me.getPicker();
        //如果是收起状态，不需要做任何事情
        if (me.isExpanded) {
            if (me.matchFieldWidth) {
                //匹配当前字段的宽度
                picker.setWidth(me.bodyEl.getWidth());
            }
            if (picker.isFloating()) {
                //如果下拉窗是浮动的（一般都是）
                me.doAlign();
            }
        }
    },
    //对齐下拉窗
    doAlign: function(){
        var me = this,
            picker = me.picker,
            aboveSfx = '-above',
            isAbove;
        //浮动组件，以inputEl为基准进行对齐
        me.picker.alignTo(me.inputEl, me.pickerAlign, me.pickerOffset);
        //对齐后，是否位于输入框的上面？
        isAbove = picker.el.getY() < me.inputEl.getY();
        //设置相应的样式
        me.bodyEl[isAbove ? 'addCls' : 'removeCls'](me.openCls + aboveSfx);
        picker[isAbove ? 'addCls' : 'removeCls'](picker.baseCls + aboveSfx);
    },
    //收起下拉窗
    collapse: function() {
        if (this.isExpanded && !this.isDestroyed) {
            var me = this,
                openCls = me.openCls,
                picker = me.picker,
                doc = Ext.getDoc(),
                collapseIf = me.collapseIf,
                aboveSfx = '-above';
            picker.hide(); //隐藏下拉窗组件
            me.isExpanded = false; //设置状态
            //移除打开样式
            me.bodyEl.removeCls([openCls, openCls + aboveSfx]);
            picker.el.removeCls(picker.baseCls + aboveSfx);
            //移除只有在打开时才有意义的监听器
            doc.un('mousewheel', collapseIf, me);
            doc.un('mousedown', collapseIf, me);
            Ext.EventManager.removeResizeListener(me.alignPicker, me);
            me.fireEvent('collapse', me); //发布事件
            me.onCollapse(); //调用模板
        }
    },
    //收起下拉窗时的模板方法
    onCollapse: Ext.emptyFn,
    collapseIf: function(e) {
        var me = this;
        //仅匹配以下条件时，收起
        if (!me.isDestroyed  //当前组件没有被销毁
            && !e.within(me.bodyEl, false, true)  //且滚轮、鼠标事件不是发生在字段体内、或者子段体的子元素内
            && !e.within(me.picker.el, false, true) //且滚轮、鼠标事件不是件发生在下拉窗体内、或者下拉窗体的子元素内
            && !me.isEventWithinPickerLoadMask(e)//且滚轮、鼠标事件不是发生在下拉窗的LoadMask中
        ){
            me.collapse();
        }
    },
    //获取或者创建下拉窗组件
    getPicker: function() {
        var me = this;
        return me.picker || (me.picker = me.createPicker());
    },
    //子类必须实现
    createPicker: Ext.emptyFn,
    //默认行为：使下拉框组件在打开/收起之间切换
    onTriggerClick: function() {
        var me = this;
        if (!me.readOnly && !me.disabled) {
            if (me.isExpanded) {
                me.collapse();
            } else {
                me.expand();
            }
            me.inputEl.focus();
        }
    },
    //模仿失焦
    mimicBlur: function(e) {
        var me = this,
            picker = me.picker;
        //忽略下拉窗内部发生的mousedown事件
        if (!picker || !e.within(picker.el, false, true) && !me.isEventWithinPickerLoadMask(e)) {
            me.callParent(arguments);
        }
    },
    //销毁模板
    onDestroy : function(){
        var me = this,
            picker = me.picker;
        //销毁浏览器窗口大小改变监听
        Ext.EventManager.removeResizeListener(me.alignPicker, me);
        //销毁键盘导航监听
        Ext.destroy(me.keyNav);
        if (picker) {
            delete picker.pickerField; //防止循环引用
            picker.destroy();//销毁下拉窗
        }
        me.callParent();
    },
    //判断是否下拉窗当前具有一个加载遮罩，并且事件发生在遮罩或者其子元素里面
    isEventWithinPickerLoadMask: function(e) {
        var loadMask = this.picker.loadMask;

        return loadMask ? e.within(loadMask.maskEl, false, true) || e.within(loadMask.el, false, true) : false;
    }

});

取色面板组件：

/**
 * 基于HSV（色相/饱和度/亮度）色彩空间的调色板
 */
Ext.define( 'Ext.ux.panel.HSVColorPalette', {
    alias : 'widget.hsvcolorpalette',
    extend : 'Ext.panel.Panel',
    requires : [
        'Ext.Img'
    ],
    statics : {
        hsvImgSize : [
            181, 101
        ],
        sldDivCount : 60,
        hsImgData : "data:Img/png;base64,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",
        hvImgData : "data:Img/png;base64,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",
        crossImgData : "data:Img/gif;base64,R0lGODlhDwAPAKEBAAAAAP///////////yH5BAEKAAIALAAAAAAPAA8AAAIklB8Qx53b4otSUWcvyiz4/4AeQJbmKY4p1HHapBlwPL/uVRsFADs=",
        spotImgData : "data:image/png;base64,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"
    },
    /**
     * @cfg {String} mode
     * 调色模式，支持hsv、hvs
     */
    mode : 'hsv',
    /**
     * 所有颜色的数组，每个元素为三元数组，分别为色相（H）、饱和度（S）、明度（V）
     * 有效值范围分别为0-6, 0-1, 0-1
     */
    colors : [
        [
            0, 0, 0
        ]
    ],
    currentColorIndex : 0,
    initialPositioned : false,
    multiColorsMode : true,
    multiColorRows : 2,
    multiColorCols : 6,
    defaultColor : 'FFFFFF',
    colorCellCls : Ext.baseCSSPrefix + 'hsv-color-palette-cell',
    colorCellEmptyCls : Ext.baseCSSPrefix + 'hsv-color-palette-cell-empty',
    colorCellSelectedCls : Ext.baseCSSPrefix + 'hsv-color-palette-cell-selected',
    getCurrent : function()
    {
        return this.colors[this.currentColorIndex];
    },
    initComponent : function()
    {
        var me = this;
        me.colors = [
            [
                0, 0, 0
            ]
        ];
        me.addEvents( {
            /**
             * @event
             * 当前颜色改变时触发该事件
             */
            curcolorchange : true,
            /**
             * @event
             * 当组件第一次被渲染到预期的位置后，触发该事件
             */
            initialpositioned : true
        } );
        var sldDivCount = me.statics().sldDivCount;
        var multiColorCells = [];
        var multiColorCellsCount = me.multiColorRows * me.multiColorCols;
        for ( var i = 0; i < multiColorCellsCount; i++ )
        {
            multiColorCells.push( {
                xtype : 'box',
                cls : [
                    me.colorCellCls, me.colorCellEmptyCls
                ]
            } );
        }
        Ext.apply( me, {
            width : 194,
            minHeight : 160,
            cls : Ext.baseCSSPrefix + 'hsv-color-palette',
            bodyCls : Ext.baseCSSPrefix + 'hsv-color-palette-body',
            frame : false,
            border : true,
            layout : {
                type : 'vbox',
                align : 'center'
            },
            items : [
                {
                    //上半部分部调色板
                    //包装容器
                    xtype : 'container',
                    itemId : 'palette',
                    layout : {
                        type : 'hbox'
                    },
                    items : [
                        {
                            xtype : 'container',
                            layout : 'fit',
                            cls : Ext.baseCSSPrefix + 'hsv-color-palette-pad-wrapper',
                            items : [
                                {
                                    //取色点
                                    itemId : 'spot',
                                    xtype : 'image',
                                    src : me.statics().crossImgData,
                                    //相对于容器浮动
                                    floating : true,
                                    //浮动组件的阴影效果
                                    shadow : false,
                                    //只有autoShow为true的浮动组件才会自动显示
                                    autoShow : false
                                }, {
                                    //调色板
                                    itemId : 'pad',
                                    xtype : 'image',
                                    width : me.statics().hsvImgSize[0],
                                    height : me.statics().hsvImgSize[1],
                                    src : me.mode == 'hsv' ? me.statics().hsImgData : me.statics().hvImgData
                                }
                            ]
                        }
                    ]
                }, {
                    //调色滑动器
                    xtype : 'container',
                    itemId : 'sld',
                    layout : {
                        type : 'hbox',
                        align : 'stretch'
                    },
                    cls : Ext.baseCSSPrefix + 'hsv-color-palette-sld-wrapper',
                    width : 181,
                    margin : '14 0 0 0',
                    height : 20,
                    defaults : {
                        flex : 1,
                        xtype : 'box'
                    },
                    //覆盖父类方法
                    xhooks : {
                        initComponent : function()
                        {
                            var sld = this;
                            sld.items = [];
                            for ( var i = 0; i < sldDivCount; i++ )
                            {
                                sld.items.push( {} );
                            }
                            sld.items.push( {
                                xtype : 'box',
                                itemId : 'knob',
                                cls : Ext.baseCSSPrefix + 'hsv-color-palette-sld-knob',
                                floating : true,
                                shadow : false
                            } );
                            sld.callParent( arguments );
                        }
                    }
                }, {
                    //下半部分值区域
                    xtype : 'container',
                    itemId : 'cc',
                    width : 181,
                    margin : '15 0 0 0',
                    padding : '3 0 3 0',
                    hidden : !me.multiColorsMode,
                    cls : Ext.baseCSSPrefix + 'hsv-color-palette-colors-container',
                    layout : {
                        type : 'table',
                        columns : me.multiColorCols,
                        tableAttrs : {
                            style : {
                                width : '100%'
                            }
                        },
                        tdAttrs : {
                            style : {
                                padding : 3
                            }
                        }
                    },
                    items : multiColorCells
                }
            ]
        } );
        me.callParent( arguments );
    },
    /**
     * 得到调色板组件
     * @return {}
     */
    getPad : function()
    {
        var me = this;
        return me.queryById( 'pad' );
    },
    /**
     * 得到调色板中的取色点组件
     * @return {}
     */
    getPadSpot : function()
    {
        var me = this;
        return me.queryById( 'spot' );
    },
    /**
     * 得到颜色滑动条组件
     * @return {}
     */
    getSld : function()
    {
        var me = this;
        return me.queryById( 'sld' );
    },
    /**
    * 得到颜色滑动条中的滑块组件
    * @return {}
    */
    getSldKnob : function()
    {
        var me = this;
        return me.queryById( 'knob' );
    },
    /**
     * 得到颜色单元格的容器
     * @return {}
     */
    getColorContainer : function()
    {
        return this.queryById( 'cc' );
    },
    /**
     * 得到颜色单元格列表
     * @return {} Ext.util.AbstractMixedCollection
     */
    getColorCells : function()
    {
        return this.getColorContainer().items;
    },
    //@private
    getRelevantColorCellIndex : function( e )
    {
        var me = this;
        var ccs = me.getColorCells();
        var len = ccs.getCount();
        for ( var i = 0; i < len; i++ )
        {
            var cell = ccs.getAt( i );
            if ( e.within( cell.getEl(), false, true ) )
            {
                return i;
            }
        }
        return -1;
    },
    /**
     * @private
     * 将RGB色彩转换为HSV色彩
     * @param {} r 0-1 红色
     * @param {} g 0-1 绿色
     * @param {} b 0-1 蓝色
     * @return {} [h,s,v]
     */
    rgb2hsv : function( r, g, b )
    {
        if ( r.length == 3 )
        {
            g = r[1];
            b = r[2];
            r = r[0];
        }
        var n = Math.min( Math.min( r, g ), b );
        var v = Math.max( Math.max( r, g ), b );
        var m = v - n;
        if ( m === 0 )
        {
            return [
                null, 0, v
            ];
        }
        var h = r === n ? 3 + ( b - g ) / m : ( g === n ? 5 + ( r - b ) / m : 1 + ( g - r ) / m );
        return [
            h === 6 ? 0 : h, m / v, v
        ];
    },
    /**
     * @private
     * 将HSV色彩转换为RGB色彩
     * @param {} h 0-6 色相
     * @param {} s 0-1 饱和度
     * @param {} v 0-1 亮度
     * @return {} [r, g, b]
     */
    hsv2rgb : function( h, s, v )
    {
        if ( h === null )
        {
            return [
                v, v, v
            ];
        }
        var i = Math.floor( h );
        var f = i % 2 ? h - i : 1 - ( h - i );
        var m = v * ( 1 - s );
        var n = v * ( 1 - s * f );
        switch ( i )
        {
            case 6 :
            case 0 :
                return [
                    v, n, m
                ];
            case 1 :
                return [
                    n, v, m
                ];
            case 2 :
                return [
                    m, v, n
                ];
            case 3 :
                return [
                    m, n, v
                ];
            case 4 :
                return [
                    n, m, v
                ];
            case 5 :
                return [
                    v, m, n
                ];
        }
    },
    /**
     * 将RGB颜色转换为十六进制颜色字符串
     * @param {} rgb [r, g, b]形式，元素的大小在0-1范围内
     * @return {}
     */
    rgb2hex : function( rgb )
    {
        var hex = ( 0x100 | Math.round( 255 * rgb[0] ) ).toString( 16 ).substr( 1 );
        hex += ( 0x100 | Math.round( 255 * rgb[1] ) ).toString( 16 ).substr( 1 );
        hex += ( 0x100 | Math.round( 255 * rgb[2] ) ).toString( 16 ).substr( 1 );
        return hex;
    },
    /**
    * 将十六进制颜色字符串转换为RGB颜色
    * @param {} hex 形如FF0000的6位十六进制数字组成的颜色字符串
    * @return {} [r, g, b]形式，元素的大小在0-1范围内
    */
    hex2rgb : function( hex )
    {
        var r = parseInt( hex.substr( 0, 2 ), 16 );
        var g = parseInt( hex.substr( 2, 2 ), 16 );
        var b = parseInt( hex.substr( 4, 2 ), 16 );
        return [
            r / 255, g / 255, b / 255
        ];
    },
    hsv2hex : function( hsv )
    {
        var me = this;
        var h = hsv[0];
        var s = hsv[1];
        var v = hsv[2];
        return me.rgb2hex( me.hsv2rgb( h, s, v ) ).toUpperCase();
    },
    hex2hsv : function( hex )
    {
        var me = this;
        return me.rgb2hsv( me.hex2rgb( hex ) );
    },
    /**
     * @private
     * 获取鼠标位置相对于调色板的位置百分比
     * @param {} e 事件对象
     * @return {} [xOffset,yOffset] 形式，元素值范围在0-1之间
     */
    getPadRelativePos : function( e )
    {
        var me = this;
        var xy = e.getXY();
        var p = me.getPad();
        var xo = ( xy[0] - p.getPosition()[0] ) / p.getWidth();
        if ( xo > 1 ) xo = 1;
        if ( xo < 0 ) xo = 0;
        var yo = 1 - ( xy[1] - p.getPosition()[1] ) / p.getHeight();
        if ( yo > 1 ) yo = 1;
        if ( yo < 0 ) yo = 0;
        return [
            xo, yo
        ];
    },
    /**
     * @private
     * 获取鼠标位置相对于滑块X轴方向的百分比
     * @param {} e 事件对象
     * @return {} xOffset，值范围在0-1之间
     */
    getSldRelativeX : function( e )
    {
        var me = this;
        var xy = e.getXY();
        var s = me.getSld();
        var xo = ( xy[0] - s.getPosition()[0] ) / s.getWidth();
        if ( xo > 1 ) xo = 1;
        if ( xo < 0 ) xo = 0;
        return xo;
    },
    /**
     * @private
     * 设置取色点的位置
     * @param {} xy 页面坐标
     */
    updatePadSpotByPos : function( xy )
    {
        var me = this;
        var spot = me.getPadSpot();
        spot.show();
        spot.setPagePosition( xy[0] - 8, xy[1] - 8 );
    },
    /**
     * @private
     * 更新取色点的位置
     */
    updatePadSpot : function()
    {
        var me = this;
        var pad = me.getPad();
        var xy = pad.getPosition();
        var w = pad.getWidth();
        var h = pad.getHeight();
        xy[0] += w * ( me.getCurrent()[0] / 6 );
        xy[1] += h * ( 1 - me.getCurrent()[1] );
        me.updatePadSpotByPos( xy );
    },
    /**
    * @private
    * 设置取色滑块的位置
    * @param {} xy 页面坐标
    */
    updateSldKnobByPos : function( x )
    {
        var me = this;
        var sld = me.getSld();
        var knob = me.getSldKnob();
        knob.show();
        knob.setPagePosition( x - 5, sld.getPosition()[1] - 9 );
    },
    /**
     * @private
     * 更新滑动条滑块
     */
    updateSldKnob : function()
    {
        var me = this;
        var sld = me.getSld();
        var xy = sld.getPosition();
        var w = sld.getWidth();
        xy[0] += w * me.getCurrent()[2];
        me.updateSldKnobByPos( xy[0] );
    },
    /**
     * @private
     * 更新滑动条背景颜色
     */
    updateSldBg : function()
    {
        var me = this;
        var sld = me.getSld();
        var sldDivCount = me.statics().sldDivCount;
        for ( var i = 0; i < sldDivCount; i++ )
        {
            var div = sld.getComponent( i );
            var h = me.getCurrent()[0];
            var s = me.getCurrent()[1];
            var v = i / sldDivCount;
            var color = '#' + me.rgb2hex( me.hsv2rgb( h, s, v ) );
            div.getEl().setStyle( {
                backgroundColor : color
            } );
        }
    },
    /**
     * @private
     * 更新调色板组件的样式
     */
    updatePad : function()
    {
        var me = this;
        me.updatePadSpot();
    },
    /**
     * @private
     * 更新滑动条组件的样式
     */
    updateSld : function()
    {
        var me = this;
        me.updateSldBg();
        me.updateSldKnob();
    },
    /**
     * @private
     * 更新颜色容器区的单元格
     */
    updateCells : function()
    {
        var me = this;
        var colors = me.colors;
        var ccs = me.getColorCells();
        var count = ccs.getCount();
        for ( var i = 0; i < count; i++ )
        {
            var cc = ccs.getAt( i );
            if ( i > colors.length - 1 )
            {
                cc.addCls( me.colorCellEmptyCls );
                cc.removeCls( me.colorCellSelectedCls );
            }
            else
            {
                cc.getEl().setStyle( {
                    backgroundColor : '#' + me.hsv2hex( colors[i] )
                } );
                if ( i == me.currentColorIndex )
                {
                    cc.removeCls( me.colorCellEmptyCls );
                    cc.addCls( me.colorCellSelectedCls );
                }
                else
                {
                    cc.removeCls( me.colorCellEmptyCls );
                    cc.removeCls( me.colorCellSelectedCls );
                }
            }
        }
    },
    /**
     * @private
     * 更新当前组件的视觉样式
     */
    updateView : function()
    {
        var me = this;
        me.updateSld();
        me.updatePad();
        me.updateCells();
    },
    /**
     * @private
     * 根据取色板的位置信息来更新当前颜色
     * @param e 当前事件对象
     */
    onPadSpotPositionChange : function( e )
    {
        var me = this;
        var xy = e.getXY();
        me.updatePadSpotByPos( xy );
        //更新++++
        var rxy = me.getPadRelativePos( e );
        me.getCurrent()[0] = rxy[0] * 6;
        me.getCurrent()[1] = rxy[1];
        me.fireEvent( 'curcolorchange' );
        me.updateView();
    },
    /**
     * @private
     * 根据取色滑块的位置信息来更新当前颜色
     * @param e 当前事件对象
     */
    onSldKnobPositionChange : function( e )
    {
        var me = this;
        var xy = e.getXY();
        me.getCurrent()[2] = me.getSldRelativeX( e );
        me.fireEvent( 'curcolorchange' );
        me.updateView();
    },
    //在此模板内完成内部事件句柄的初始化，该模板方法被调用时，组件已经完成渲染
    initEvents : function()
    {
        var me = this;
        var pad = me.getPad();
        //该面板被移动后，取色点、取色滑块的位置需要被更新
        me.on( 'move', function()
        {
            me.updateView();
            if ( !me.initialPositioned )
            {
                me.initialPositioned = true;
                me.fireEvent( 'initialpositioned' )
            }
        } );
        me.getEl().on( 'mousedown', function( e )
        {
            e.preventDefault();
        } );
        pad.getEl().on( 'mousedown', function( e )
        {
            e.preventDefault();
        } );
        pad.getEl().on( 'click', function( e )
        {
            me.onPadSpotPositionChange( e );
        } );
        var sld = me.getSld();
        sld.getEl().on( 'mousedown', function( e )
        {
            e.preventDefault();
        } );
        sld.getEl().on( 'click', function( e )
        {
            me.onSldKnobPositionChange( e );
        } );
        var cc = me.getColorContainer();
        cc.getEl().on( 'dblclick', function( e )
        {
            var idx = me.getRelevantColorCellIndex( e );
            if ( idx > 0 )//第一个颜色禁止删除
            {
                if ( idx >= me.colors.length )
                {
                    me.addColor( me.defaultColor );
                }
                else
                {
                    me.removeColor( idx );
                }
            }
        } );
        cc.getEl().on( 'click', function( e )
        {
            var idx = me.getRelevantColorCellIndex( e );
            me.setCurrentColorIndex( idx );
        } );
    },
    onShow : function()
    {
        var me = this;
        me.getPadSpot().show();
        me.getSldKnob().show();
        me.callParent( arguments );
    },
    onHide : function()
    {
        var me = this;
        me.getPadSpot().hide();
        me.getSldKnob().hide();
        me.callParent( arguments );
    },
    //@private
    getCurrent : function()
    {
        return this.colors[this.currentColorIndex];
    },
    /**
     * 获取当前取色器颜色值代码
     * @return {} 形如FF0000的6位十六进制数字组成的字符串
     */
    getCurrentColor : function()
    {
        var me = this;
        return me.hsv2hex( me.getCurrent() );
    },
    /**
     * 设置当前取色器颜色值代码
     * @param {} hex 形如FF0000的6位十六进制数字组成的字符串
     */
    setCurrentColor : function( hex )
    {
        if ( !hex ) return;
        var me = this;
        me.colors[me.currentColorIndex] = me.hex2hsv( hex );
        me.updateView();
    },
    /**
     * 设置当前取色器的索引
     * @param {} idx
     */
    setCurrentColorIndex : function( idx )
    {
        var me = this;
        if ( idx >= me.colors.length ) return;
        me.currentColorIndex = idx;
        me.updateView();
    },
    getColors : function()
    {
        var me = this;
        var hexColors = [];
        for ( var i = 0; i < me.colors.length; i++ )
        {
            var c = me.colors[i];
            var h = c[0];
            var s = c[1];
            var v = c[2];
            hexColors[i] = me.rgb2hex( me.hsv2rgb( h, s, v ) ).toUpperCase();
        }
        return hexColors;
    },
    /**
     * 设置当前取色器颜色值列表
     * @param {} hexArray ['FF0000']形式的数组
     * @param {} currentIndex 当前颜色的索引
     */
    setColors : function( hexArray, currentIndex )
    {
        var me = this;
        if ( !currentIndex ) currentIndex = 0;
        for ( var i = 0; i < hexArray.length; i++ )
        {
            me.colors[i] = me.rgb2hsv( me.hex2rgb( hexArray[i] ) );
        }
        me.updateView();
    },
    /**
     * 添加一个颜色到末尾并设置其为当前颜色
     * @param {} hex 'FF0000'形式的颜色代码
     */
    addColor : function( hex )
    {
        var me = this;
        me.colors.push( me.hex2hsv( hex ) );
        me.fireEvent( 'curcolorchange' );
        me.setCurrentColorIndex( me.colors.length - 1 );
    },
    removeColor : function( idx, noUpdateView )
    {
        var me = this;
        me.colors.splice( idx, 1 );
        me.fireEvent( 'curcolorchange' );
        me.setCurrentColorIndex( 0 );
    }
} );

选取器代码：

/**
 * 基于HSV（色相/饱和度/亮度）色彩空间的取色器组件
 */
Ext.define( 'Ext.ux.form.field.HSVColorPicker', {
    alias : 'widget.hsvcolorpicker',
    extend : 'Ext.form.field.Picker',
    requires : [
        'Ext.ux.panel.HSVColorPalette'
    ],
    inputType : 'hidden',
    triggerCls : Ext.baseCSSPrefix + 'form-hsv-color-trigger',
    childEls : [
        'colorDisplay'
    ],//元素作为组件成员变量的声明
    colorDisplayCmp : null,
    /**
     * @config 是否显示色块的边框
     * @type Boolean
     */
    colorDisplayCellBorder : true,
    multiColorsMode : false,
    initComponent : function()
    {
        var me = this;
        Ext.apply( me, {
            matchFieldWidth : false
        } );
        me.callParent( arguments );
    },
    createPicker : function()
    {
        var me = this;
        var picker = Ext.create( 'Ext.ux.panel.HSVColorPalette', {
            //必须设置为浮动组件
            floating : true,
            multiColorsMode : me.multiColorsMode,
            listeners : {
                initialpositioned : function()
                {
                    //在选取器第一次定位完毕后，设置其当前颜色值，以渲染取色点、取色滑块以及滑动条颜色
                    me.setPickerValue();
                },
                curcolorchange : function()
                {
                    //回填颜色值
                    me.setValue( this.getColors() );
                }
            }
        } );
        return picker;
    },
    //多值支持，使用数组作为内部表示
    valueToRaw : function( value )
    {
        return value.join();
    },
    rawToValue : function( rawValue )
    {
        rawValue || ( rawValue = '' );
        return rawValue.split( ',' );
    },
    /**
     * 设置该控件的值
     * @param {} value 要设置的值
     * @return {}
     */
    setValue : function( value )
    {
        value || ( value = [] );
        if ( !Ext.isArray( value ) ) value = [
            value
        ];
        var me = this;
        var ret = me.callParent( arguments );
        if ( me.colorDisplayCmp ) me.updateColorDisplay();
        return ret;
    },
    /**
     * 更新颜色显示区
     */
    updateColorDisplay : function()
    {
        var me = this;
        me.colorDisplayCmp.removeAll( true );
        var v = me.getValue();
        for ( var i = 0; i < v.length; i++ )
        {
            var cell = {
                style : {
                    backgroundColor : '#' + v[i]
                }
            };
            if ( !me.colorDisplayCellBorder )
            {
                Ext.apply( cell, {
                    border : 0
                } );
            }
            me.colorDisplayCmp.add( cell );
        }
    },
    /**
     * 设置调色板组件的值
     */
    setPickerValue : function()
    {
        var me = this;
        var value = me.getValue();
        if ( value ) me.getPicker().setColors( value );
    },
    isEventWithinPicker : function( e )
    {
        var me = this;
        var box = me.picker.getBox();
        var x = e.getXY()[0];
        var y = e.getXY()[1];
        return x >= box.x && x <= ( box.x + box.width ) && y >= box.y && y <= ( box.y + box.height );
    },
    //覆盖此方法，防止点击到调色板的取色点、取色滑块时导致选取器被隐藏
    collapseIf : function( e )
    {
        var me = this;
        if ( !me.isDestroyed && !e.within( me.bodyEl, false, true ) && !me.isEventWithinPicker( e ) && !me.isEventWithinPickerLoadMask( e ) )
        {
            me.collapse();
        }
    },
    //覆盖此方法，添加colorDisplay的点击监听
    initEvents : function()
    {
        var me = this;
        me.callParent();
        if ( !me.editable )
        {
            me.mon( me.colorDisplay, 'click', function( e )
            {
                me.onTriggerClick();
                if ( !me.readOnly && !me.disabled )
                {
                    var cdp = me.colorDisplayCmp;
                    var len = cdp.items.getCount();
                    for ( var i = 0; i < len; i++ )
                    {
                        var cell = cdp.items.getAt( i );
                        if ( e.within( cell.getEl(), false, true ) )
                        {
                            me.getPicker().setCurrentColorIndex( i );
                            break;
                        }
                    }
                }
            } );
        }
    },
    //覆盖此方法，改变默认的基于Ext.form.field.Text的表单字段外观
    getSubTplMarkup : function()
    {
        var me = this;
        //隐藏字段
        var field = Ext.form.field.Text.prototype.getSubTplMarkup.apply( this, arguments );
        //添加一个颜色显示的区域
        var display = '<div id="' + me.id + '-colorDisplay" class="' + Ext.baseCSSPrefix + 'form-hsv-color-picker-display"></div>';
        return [
            '<table id="' + me.id + '-triggerWrap" class="' + Ext.baseCSSPrefix + 'form-trigger-wrap" cellpadding="0" cellspacing="0">',
            '  <tbody>',
            '    <tr>',
            '        <td id="' + me.id + '-inputCell" class="' + Ext.baseCSSPrefix + 'form-trigger-input-cell">' + field + display + '</td>',
            '        ' + me.getTriggerMarkup(),
            '    </tr>',
            '  </tbody>',
            '</table>'
        ].join( '' );
    },
    afterRender : function()
    {
        var me = this;
        me.callParent( arguments );
        me.colorDisplayCmp = Ext.create( 'Ext.container.Container', {
            cls : Ext.baseCSSPrefix + 'form-hsv-color-picker-display-container',
            layout : {
                type : 'hbox',
                align : 'stretch',
                pack : 'start'
            },
            defaults : {
                xtype : 'box',
                flex : 1,
                cls : Ext.baseCSSPrefix + 'form-hsv-color-picker-display-cell'
            },
            listeners : {
                afterrender : {
                    scope : me,
                    fn : me.updateColorDisplay,
                    single : true
                }
            }
        } );
        me.colorDisplayCmp.render( me.colorDisplay );
    },
    //覆盖此方法，在组件布局执行完毕后更新色块容器的布局
    afterComponentLayout : function()
    {
        var me = this;
        me.callParent( arguments );
        me.colorDisplayCmp.updateLayout();
    },
    //覆盖此方法，销毁内部组件
    onDestroy : function()
    {
        var me = this;
        me.callParent( arguments );
        if(me.colorDisplayCmp)
        me.colorDisplayCmp.destroy();
    },
    //覆盖此方法，改变对齐参考元素
    doAlign : function()
    {
        var me = this, picker = me.picker, aboveSfx = '-above', isAbove;
        me.picker.alignTo( me.colorDisplay, me.pickerAlign, me.pickerOffset );
        isAbove = picker.el.getY() < me.inputEl.getY();
        me.bodyEl[isAbove ? 'addCls' : 'removeCls']( me.openCls + aboveSfx );
        picker[isAbove ? 'addCls' : 'removeCls']( picker.baseCls + aboveSfx );
    }
} );

CSS样式文件：

/* HSVColorPalette */
.x-hsv-color-palette {
    border: 1px solid #8AB4B8;
}

.x-hsv-color-palette-body {
    padding-top: 4px;
    background-image: none;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #D8E6E7), color-stop(100%, #D8E6E7));
    background-image: -webkit-linear-gradient(top, #D8E6E7, #E3EDEE);
    background-image: -moz-linear-gradient(top, #D8E6E7, #E3EDEE);
    background-image: -o-linear-gradient(top, #D8E6E7, #E3EDEE);
    background-image: -ms-linear-gradient(top, #D8E6E7, #E3EDEE);
    background-image: linear-gradient(top, #D8E6E7, #E3EDEE);
}

.x-hsv-color-palette-pad-wrapper {
    border-top: 1px solid #888888;
    border-left: 1px solid #999999;
    border-right: 1px solid #EEEEEE;
    border-bottom: 1px solid #DDDDDD;
    background-color: #C5DADC;
}

.x-hsv-color-palette-sld-wrapper {
    border-top: 1px solid #888888;
    border-left: 1px solid #999999;
    border-right: 1px solid #DDDDDD;
    border-bottom: 1px solid #DDDDDD;
    background-color: #C5DADC;
}

.x-hsv-color-palette-sld-knob {
    width: 11px;
    height: 38px;
    background-image: url('../../resources/themes/icons/blue-green/hsv-color-panel-knob.png');
}
.x-hsv-color-palette-cell {
    border: 1px solid #D8E6E7;
    cursor: pointer;
    height: 14px;
}

.x-hsv-color-palette-cell-empty {
    background-image: url('../../resources/themes/images/blue-green/form/hsv-color-picker-display-cell-empty.png');
}

.x-hsv-color-palette-cell-selected {
    border: 2px dotted #D8E6E7;
}

.x-hsv-color-palette-colors-container {
    background-color: #D8E6E7;
}

/* HSVColorPicker */
.x-form-hsv-color-trigger {
    background-image: url('../../resources/themes/images/blue-green/form/hsv-color-picker-trigger.gif');
}
.x-form-hsv-color-picker-display {
    padding: 3px 0px;
    border: 1px solid;
    background-color: white;
    border-color: #AECBCE;
    height: 22px;
    cursor: pointer;
}
.x-form-hsv-color-picker-display-container {
    width: 100%;
}

.x-form-hsv-color-picker-display-cell {
    border: 1px dotted #C5DADC;
    height: 14px;
    margin: 0 1 0 1;
}

Ext.Loader.setConfig( {
    enabled : true,
    paths : {
        'Ext.ux' : 'http://192.168.0.89:5050/sshe-static/extjs-4.1.1/ux'
    }
} );
Ext.require( [
    'Ext.ux.form.field.HSVColorPicker'
] );
Ext.onReady( function()
{
    var window = Ext.create( 'Ext.window.Window', {
        title : '下拉取色器演示',
        layout : 'fit',
        width : 360,
        height : 240,
        border : false,
        closable : false,
        items : {
            xtype : 'form',
            bodyPadding : 10,
            frame : true,
            border : false,
            defaults : {
                anchor : '100%'
            },
            items : [

                {
                    xtype : 'fieldset',
                    title : '普通取色器',
                    items : [
                        {
                            xtype : 'hsvcolorpicker',
                            fieldLabel : '颜色',
                            value : [
                                'CC324C', '33CC00', '0033CC', 'AE6FCC', '000000'
                            ],
                            colorDisplayCellBorder : true,
                            multiColorsMode : true,
                            editable : false
                        }, {
                            xtype : 'hsvcolorpicker',
                            fieldLabel : '单值颜色',
                            value : [
                                'CC324C'
                            ],
                            colorDisplayCellBorder : true,
                            multiColorsMode : false,
                            editable : false
                        }
                    ]
                }, {
                    xtype : 'fieldset',
                    title : '表格中的取色器',
                    items : {
                        xtype : 'grid',
                        store : Ext.create( 'Ext.data.ArrayStore', {
                            fields : [
                                {
                                    name : 'Item'
                                }, {
                                    name : 'Color'
                                }
                            ],
                            data : [
                                [
                                    'Item1', 'CC0000'
                                ]
                            ]
                        } ),
                        columns : [
                            {
                                text : '项目',
                                sortable : false,
                                dataIndex : 'Item'
                            }, {
                                text : '颜色',
                                sortable : true,
                                dataIndex : 'Color',
                                flex : 1,
                                editor : {
                                    xtype : 'hsvcolorpicker',
                                    colorDisplayCellBorder : false,
                                    multiColorsMode : true,
                                    allowBlank : false
                                }
                            }
                        ],
                        plugins : [
                            Ext.create( 'Ext.grid.plugin.CellEditing', {
                                clicksToEdit : 1
                            } )
                        ]
                    }
                }
            ]
        }
    } );
    window.show();
} )

运行效果如下（在线演示地址）：

The post ExtJS 4中的选取器控件 appeared first on 绿色记忆.

ExtJS组件的生命周期可以整体上划分为三个部分：初始化、渲染、销毁。生命周期由Ext.Component类控制。

这一阶段通常执行的很快，因为都是在JavaScript代码内完成的。注意：组件不需要经过渲染阶段即可被销毁。

该阶段整体流程图如下：

各步骤说明如下：

1. 应用配置项：在实例化组件的时候，我们可以传递一个配置对象（包含若干配置项），其中包含新组件必要的参数、引用
2. 底层（Base）事件注册：Ext.Component类定义了若干核心事件，这些事件在组件的某些行为前、后触发（对应事件名称beforeXxx、afterXxx），这些行为包括：enable/disable、show/hide、render/ destroy、 state restore/state save。其中before事件处理函数如果返回false，则行为被取消，例如，如果beforeshow返回false，那么组件的show行为将不生效，即不显示。通常这些事件都由Ext.Component类本身负责触发
3. 分配或者生成组件ID：如果没有指定ID，ExtJS会自动为组件生成
4. 构造Pre-initComponent插件：所有在initComponent之前定义的插件被创建，该步骤允许某些插件（例如Grid编辑器）尽早的执行必要的动作
5. 执行initComponent：这是最重要的一个扩展点。initComponent方法中会包含很多逻辑，例如：
   1. 注册子类特有的事件
   2. 引用数据存储
   3. 创建子组件
6. 在ComponentManager中注册当前组件
7. 底层（Base）混入类构造器调用：组件提供两个混入类提供底层功能，Ext.util.Observable为组件提供发布、监听事件的能力；Ext.state.Stateful为组件处理状态相关（state-specific）的事件
8. 组件的resize事件作为状态事件（state event）初始化，状态事件用于保存组件的状态
9. 初始化插件：如果提供了plugins配置，那么在此调用插件的init方法，并传入当前Component作为其参数。如果由多个插件，按照在配置中声明顺序初始化之
10. 启动组件的数据加载器：如果提供了一个loader配置项，则用其创建ComponentLoader，下面是一个例子：
    

    var cmp = Ext.create( 'Ext.Component', {
        renderTo : Ext.getBody(),
        tpl : '{firstName} - {lastName}', //HTML内容模板
        loader : {
            url : 'userinfo',
            autoLoad : false, //是否自动加载数据
            renderer : 'data', //使用data作为渲染器，则自动提供给模板使用
            params : {
                userId : 1
            }
        }
    } );
    cmp.getLoader().load();

11. 组件被渲染：如果提供renderTo、applyTo配置项，那么立即开始渲染阶段；否则，组件等待其render()方法被其容器或者被用户代码调用，不作为其他容器子组件的组件，必须手动渲染，例如：
    

    someComponent.render('someDivId');

这一阶段用户将得到组件的视角反馈。如果初始化阶段出现任何问题，组件将渲染错误或者根本不渲染。

该阶段整体流程图如下：

各步骤说明如下：

1. 触发beforerender事件：组件发布该事件，并检查所有监听器函数的返回值，如果任一返回值为false，停止渲染
2. 组件对应的DOM元素被缓存：如果指定了el配置项，那么使用一个Ext.Element包围el对应的元素
3. 浮动组件注册：如果组件被配置为floating，则在WindowManager中注册自身，以便启用Z-Index、焦点管理。这一步骤对Window、Menu等组件比较重要
4. 设置组件所在的容器：
   1. 如果指定了renderTo配置项，则在目标元素下添加单个DIV，并在此DIV中渲染当前组件
   2. 如果指定了applyTo配置项，则目标元素直接作为组件的容器，目标元素将被组件完全管理
5. 调用onRender：这是一个关键的步骤，组件的所有DOM元素被插入到文档中，并且渲染到屏幕上。每个组件子类应当首先调用其父类的onRender方法，然后再执行子类特有的逻辑
6. 可见性模式（Visibility mode）被配置：通过组件的hideMode配置来设置，可以是display、visibility、offsets
7. 初始化overCls：如果提供了overCls配置项，则组件使其元素在mouseover、mouseout事件发生时添加、去除对应的CSS样式
8. 触发render事件：在此刻，所有必须的元素已经插入到文档，并且应用了样式
9. 初始化组件的内容：如果提供了contentEl、html、tpl或者data配置项，则在组件对应的DIV中渲染HTML代码
10. 调用afterRender：该方法会被render自动调用，这是一个重要的模板方法包括以下职责：
    1. 配置组件的尺寸、对齐、位置，并且为HTML内容添加一些样式
    2. 如果组件为Resizable，则执行Resizable类的初始化
    3. 如果组件为draggable，则执行相应的逻辑使其可拖拽
    4. 如果配置了autoScroll，则设置组件的滚动条
11. 触发afterrender事件：通知监听器，所有关键的渲染操作都完成了，该事件是很好的操控组件DOM的时机
12. 挂钩afterRenderEvents
13. 组件的元素可以支持聚焦
14. 如果组件被配置为hidden:true，则调用其hide()方法
15. 如果组件被配置为disabled:true，则调用其disable()方法

销毁阶段包含重要的资源清理动作，例如：移出组件（包括子组件）的DOM元素、从ComponentManager注销组件、注销事件监听器。

该阶段整体流程图如下：

各步骤说明如下：

1. 触发beforedestroy事件：如果任何一个监听器返回false，则取消组件的销毁
2. 调用beforeDestroy：组件的destroy()方法首先调用该模板方法，在这里可以完成非组件成员的销毁
3. 如果当前组件是floating，则从FloatingManager中解除自身的注册
4. 从父容器中移出当前组件
5. 调用onDestroy，该模板方法包括以下职责：
   1. 销毁所有配置的drag-and-drop代理
   2. 销毁配置的Resizer
   3. 如果组件监视浏览器的resize事件，则解除注册该监听器
   4. 销毁配置的ComponentLayout、loadMask、任何浮动子组件
6. 销毁注册的插件：遍历并调用其destroy()方法
7. 如果组件已经渲染，则清理Element对象（从文档中删除DOM节点）、Element的事件监听器
8. 触发destroy事件：此时组件已经不存在于文档
9. 从ComponentManager解除注册
10. 销毁Ext.state.Stateful混入类，并且解除任何状态相关（state-specific）的组件事件
11. 销毁组件的事件监听器

The post ExtJS 4组件的生命周期 appeared first on 绿色记忆.

1. 字段：又称字段，对应于原始HTML表单中的input等元素，在ExtJS中，混入了Ext.form.field.Field的任何类型都是表单字段
2. 字段值：
   1. 数据值（data value）：与字段类型密切相关的，反映真实对象状态的值，例如对于日期字段，其数据值是JavaScript日期对象
   2. 字符串值（stringified value）：用于表单提交的，字符串形式的值
   3. 原始值（raw value）：Base类引入的概念，主要用于HTML INPUT元素，通常是一个字符串

Base、Field、Labelable三个类是ExtJS表单字段体系的核心。其中，Field定义了核心接口函数，Base是一个抽象基类，Labelable处理字段文字标签、错误信息等相关的逻辑。

作为所有表单字段的抽象基类，它提供了：

1. 默认的事件处理，包括specialkey、writeablechange两个额外事件
2. 公共的渲染逻辑，包括错误消息、错误样式的生成与显示
3. 其它公共基础功能，例如提供了基于XTemplate的UI生成机制
4. 混入了Ext.form.field.Field，以支持字段值处理、表单验证
5. 混入了Ext.form.Labelable，以支持标签、错误信息的显示
6. 继承了Ext.Component，因而表单字段是一种组件

字段体（Field body）的HTML内容由 XTemplate：fieldSubTpl来定义，该模板的占位符数据由getSubTplData()方法提供，覆盖这两个成员可以定制自己的字段渲染方式。

Ext.form.field.Base提供的配置项/属性/方法包括：

Ext.form.field.Base的源代码分析：

Ext.define('Ext.form.field.Base', {
    extend: 'Ext.Component',
    mixins: {
        labelable: 'Ext.form.Labelable',
        field: 'Ext.form.field.Field'
    },
    alias: 'widget.field',
    alternateClassName: ['Ext.form.Field', 'Ext.form.BaseField'],
    requires: ['Ext.util.DelayedTask', 'Ext.XTemplate', 'Ext.layout.component.field.Field'],
	//子类可以修改此模板以改变字段的UI，这里就是生成一个HTML的input元素。
	//注意这里叫“子模板”是因为字段HTML还有外部包装元素，外部元素的渲染是Labelable混入负责的
    fieldSubTpl: [
        ' name="{name}"',
			//values是XTemplate内置变量，代表当前占位符替换时的上下文对象
            ' value="{[Ext.util.Format.htmlEncode(values.value)]}"',
            ' placeholder="{placeholder}"',
            '{%if (values.maxLength !== undefined){%} maxlength="{maxLength}"{%}%}',
            ' readonly="readonly"',
            ' disabled="disabled"',
            ' tabIndex="{tabIdx}"',
            ' style="{fieldStyle}"',
        ' class="{fieldCls} {typeCls} {editableCls}" autocomplete="off"/>',
        {
            disableFormats: true
        }
    ],
	//需要插入字段模板的内容
    subTplInsertions: [
        'inputAttrTpl'  //增加Input元素的属性
    ],
    inputType: 'text',
    invalidText : 'The value in this field is invalid',
    fieldCls : Ext.baseCSSPrefix + 'form-field',
    focusCls : 'form-focus',
    dirtyCls : Ext.baseCSSPrefix + 'form-dirty',
	//用于检测值变更的原始DOM事件
    checkChangeEvents: Ext.isIE && (!document.documentMode || document.documentMode < 9) ?
                        ['change', 'propertychange'] :
                        ['change', 'input', 'textInput', 'keyup', 'dragdrop'],
    checkChangeBuffer: 50,
    componentLayout: 'field', //组件布局的类型
    readOnly : false,
    readOnlyCls: Ext.baseCSSPrefix + 'form-readonly',
    validateOnBlur: true,
    // private
    hasFocus : false,
    baseCls: Ext.baseCSSPrefix + 'field',
    maskOnDisable: false,
    // private
    initComponent : function() {
        var me = this;
        me.callParent();
        me.subTplData = me.subTplData || {}; //初始化模板数据
        me.addEvents(
            'specialkey',
            'writeablechange'
        );
		//初始化两个混入类
        me.initLabelable();
        me.initField();
        if (!me.name) {
            me.name = me.getInputId();
        }
    },
    beforeRender: function(){
        var me = this;
        me.callParent(arguments);
        me.beforeLabelableRender(arguments);
		//如果被设置为只读，则在渲染前添加只读样式类
        if (me.readOnly) {
            me.addCls(me.readOnlyCls);
        }
    },
    getInputId: function() {
        return this.inputId || (this.inputId = this.id + '-inputEl');
    },
	//获取字段UI模板的上下文数据
    getSubTplData: function() {
        var me = this,
            type = me.inputType,
            inputId = me.getInputId(),
            data;
        
        data = Ext.apply({
            id         : inputId,
            cmpId      : me.id,
            name       : me.name || inputId,
            disabled   : me.disabled,
            readOnly   : me.readOnly,
            value      : me.getRawValue(),
            type       : type,
            fieldCls   : me.fieldCls,
            fieldStyle : me.getFieldStyle(),
            tabIdx     : me.tabIndex,
            typeCls    : Ext.baseCSSPrefix + 'form-' + (type === 'password' ? 'text' : type)
        }, me.subTplData);
        me.getInsertionRenderData(data, me.subTplInsertions);
        return data;
    },
    afterFirstLayout: function() {
        this.callParent();
        var el = this.inputEl;
        if (el) {
            el.selectable();
        }
    },
    applyRenderSelectors: function() {
        var me = this;

        me.callParent();
		//inputEl属性不一定总是存在子类可以不渲染inputEl
        me.inputEl = me.el.getById(me.getInputId());
    },
	//覆盖Labelable的方法，得到完成占位符替换的字段UI模板，对应的HTML会被插入外部模板（默认来自Labelable）的bodyEl占位符中
    getSubTplMarkup: function() {
        return this.getTpl('fieldSubTpl').apply(this.getSubTplData());
    },
	//覆盖AbstractComponent混入的Renderable的方法，决定组件如何混入
    initRenderTpl: function() {
        var me = this;
		//如果没有定义自己的渲染模板，则使用从Labelable混入的渲染模板
        if (!me.hasOwnProperty('renderTpl')) {
            me.renderTpl = me.getTpl('labelableRenderTpl');
        }
        return me.callParent();
    },
	//覆盖AbstractComponent混入的Renderable的方法，初始化渲染时的上下文数据
    initRenderData: function() {
		//把来自Labelable的上下文数据合并进去
        return Ext.applyIf(this.callParent(), this.getLabelableRenderData());
    },
    setFieldStyle: function(style) {
        var me = this,
            inputEl = me.inputEl;
        if (inputEl) {
            inputEl.applyStyles(style);
        }
        me.fieldStyle = style;
    },
    getFieldStyle: function() {
        return 'width:100%;' + (Ext.isObject(this.fieldStyle) ? Ext.DomHelper.generateStyles(this.fieldStyle) : this.fieldStyle ||'');
    },
    // private
    onRender : function() {
        var me = this;
        me.callParent(arguments);
		//渲染Labelable、错误信息
        me.onLabelableRender();
        me.renderActiveError();
    },
    getFocusEl: function() {
        return this.inputEl;
    },
    isFileUpload: function() {
        return this.inputType === 'file';
    },
    extractFileInput: function() {
        var me = this,
            fileInput = me.isFileUpload() ? me.inputEl.dom : null,
            clone;
        if (fileInput) {
            clone = fileInput.cloneNode(true);
            fileInput.parentNode.replaceChild(clone, fileInput);
            me.inputEl = Ext.get(clone);
        }
        return fileInput;
    },
    // private 覆盖Field的方法，与getSubmitValue()逻辑一致
    getSubmitData: function() {
        var me = this,
            data = null,
            val;
        if (!me.disabled && me.submitValue && !me.isFileUpload()) {
            val = me.getSubmitValue();
            if (val !== null) {
                data = {};
                data[me.getName()] = val;
            }
        }
        return data;
    },
    getSubmitValue: function() {
        return this.processRawValue(this.getRawValue());
    },
	//获得原始值，如果字段有inputEl，则使用其HTML属性value，否则使用成员变量rawValue
    getRawValue: function() {
        var me = this,
            v = (me.inputEl ? me.inputEl.getValue() : Ext.value(me.rawValue, ''));
        me.rawValue = v;
        return v;
    },
	//设置原始值，transformRawValue()方法的唯一意义就是在设置原始值时对入参进行转换
    setRawValue: function(value) {
        var me = this;
        value = Ext.value(me.transformRawValue(value), '');
        me.rawValue = value;
        if (me.inputEl) {
            me.inputEl.dom.value = value;
        }
        return value;
    },
    transformRawValue: function(value) {
        return value;
    },
	//缺省实现就是将数据值转换为字符串
    valueToRaw: function(value) {
        return '' + Ext.value(value, '');
    },
	//缺省实现认为原始值与数据值一致
    rawToValue: function(rawValue) {
        return rawValue;
    },
	//原始值预处理
    processRawValue: function(value) {
        return value;
    },
	//在Ext.form.field.Base类层次下，原始值（rawValue）是中心，而不是接口Field定义的数据值（value）
	//数据值是根据原始值导出的
	//该方法具有边际效应，即获取数据值的时候也更新了它
    getValue: function() {
        var me = this,
            val = me.rawToValue(me.processRawValue(me.getRawValue()));
        me.value = val;
        return val;
    },
	//设置值之前先设置原始值
    setValue: function(value) {
        var me = this;
        me.setRawValue(me.valueToRaw(value));
        return me.mixins.field.setValue.call(me, value);
    },
    onBoxReady: function() {
        var me = this;
        me.callParent();
        
        if (me.setReadOnlyOnBoxReady) {
            me.setReadOnly(me.readOnly);
        }
            
    },
    //private
    onDisable: function() {
        var me = this,
            inputEl = me.inputEl;
            
        me.callParent();
        if (inputEl) {
            inputEl.dom.disabled = true;
            if (me.hasActiveError()) {
                me.clearInvalid();
                me.needsValidateOnEnable = true;
            }
        }
    },
    //private
    onEnable: function() {
        var me = this,
            inputEl = me.inputEl;
            
        me.callParent();
        if (inputEl) {
            inputEl.dom.disabled = false;
            if (me.needsValidateOnEnable) {
                delete me.needsValidateOnEnable;
                //启用后立即验证以触发错误
                me.forceValidation = true;
                me.isValid();
                delete me.forceValidation;
            }
        }
    },

    setReadOnly: function(readOnly) {
        var me = this,
            inputEl = me.inputEl;
        readOnly = !!readOnly;
        me[readOnly ? 'addCls' : 'removeCls'](me.readOnlyCls);
        me.readOnly = readOnly;
        if (inputEl) {
            inputEl.dom.readOnly = readOnly;
        } else if (me.rendering) {
            me.setReadOnlyOnBoxReady = true;
        }
        me.fireEvent('writeablechange', me, readOnly);
    },
    // private
    fireKey: function(e){
        if(e.isSpecialKey()){
            this.fireEvent('specialkey', this, new Ext.EventObjectImpl(e));
        }
    },
    //由Renderable在afterRender之后调用，可以完成必要的事件监听器注册
    initEvents : function(){
        var me = this,
            inputEl = me.inputEl,
            onChangeTask,
            onChangeEvent,
            events = me.checkChangeEvents,
            e,
            eLen   = events.length,
            event;
        if (me.inEditor) {
            me.onBlur = Ext.Function.createBuffered(me.onBlur, 10);
        }
        if (inputEl) {
            me.mon(inputEl, Ext.EventManager.getKeyEvent(), me.fireKey,  me);
            //用于实时监听值改变
            onChangeTask = new Ext.util.DelayedTask(me.checkChange, me);
            me.onChangeEvent = onChangeEvent = function() {
                onChangeTask.delay(me.checkChangeBuffer);
            };
            for (e = 0; e < eLen; e++) {
                event = events[e];

                if (event === 'propertychange') {
                    me.usesPropertychange = true;
                }
                me.mon(inputEl, event, onChangeEvent);
            }
        }
        me.callParent();
    },
	//执行组件布局
    doComponentLayout: function() {
        var me = this,
            inputEl = me.inputEl,
            usesPropertychange = me.usesPropertychange,
            ename = 'propertychange',
            onChangeEvent = me.onChangeEvent;
        if (usesPropertychange) {
            me.mun(inputEl, ename, onChangeEvent);
        }
        me.callParent(arguments);
        if (usesPropertychange) {
            me.mon(inputEl, ename, onChangeEvent);
        }
    },
    onDirtyChange: function(isDirty) {
		//注意这种写法，比if-else结构清爽
        this[isDirty ? 'addCls' : 'removeCls'](this.dirtyCls);
    },
    isValid : function() {
        var me = this,
            disabled = me.disabled,
            validate = me.forceValidation || !disabled;
        return validate ? me.validateValue(me.processRawValue(me.getRawValue())) : disabled;
    },
    validateValue: function(value) {
        var me = this,
            errors = me.getErrors(value), //来自Field混入的getErrors()是数据验证的核心
            isValid = Ext.isEmpty(errors);
        if (!me.preventMark) {
            if (isValid) {
                me.clearInvalid();
            } else {
                me.markInvalid(errors);
            }
        }
        return isValid;
    },
    markInvalid : function(errors) {
        var me = this,
            oldMsg = me.getActiveError();
        me.setActiveErrors(Ext.Array.from(errors));
        if (oldMsg !== me.getActiveError()) {
            me.updateLayout();
        }
    },
    clearInvalid : function() {
        var me = this,
            hadError = me.hasActiveError();
        me.unsetActiveError();
        if (hadError) {
            me.updateLayout();
        }
    },
    renderActiveError: function() {
        var me = this,
            hasError = me.hasActiveError();
        if (me.inputEl) {
            me.inputEl[hasError ? 'addCls' : 'removeCls'](me.invalidCls + '-field');
        }
        me.mixins.labelable.renderActiveError.call(me);
    },
    getActionEl: function() {
        return this.inputEl || this.el;
    }
});

但凡混入了该类的ExtJS类型，都可以视作“表单字段”。该混入为表单字段提供了行为、状态的公共接口：：

1. 字段值的读写方法：包括基于字符串、对象的值读写，可以返回值或者键值对
2. 用于跟踪字段值、验证值、脏值状态变化的事件与方法
3. 触发验证、脏值检查的方法
4. 错误消息，样式的读写方法

直接混入了该类的类型包括：

1. Ext.form.CheckboxGroup（Ext.form.RadioGroup是其直接子类）
2. Ext.form.field.Base
3. Ext.form.field.HtmlEditor
4. Ext.ux.form.MultiSelect

需要自定义表单字段时，通常不需要直接使用该混入，最好是继承Ext.form.field.Base。

Ext.form.field.Field提供的配置项/属性/方法包括：

Ext.form.field.Field的源代码分析，比较简单，主要关心字段的读、写、脏、验这四个方面，不包含任何UI相关的逻辑：

Ext.define('Ext.form.field.Field', {
    isFormField : true,
    disabled : false,
    submitValue: true,
    validateOnChange: true,
    suspendCheckChange: 0,
    /**
     * 字段在初始化时必须调用该方法
     */
    initField: function() {
        //添加基础事件
        this.addEvents(
            'change',
            'validitychange',
            'dirtychange'
        );
        this.initValue();
    },
    /**
     * 初始化字段值
     */
    initValue: function() {
        var me = this;
        me.value = me.transformOriginalValue(me.value);//对配置项提供的值进行转换
        me.originalValue = me.lastValue = me.value; //设置原始值
        me.suspendCheckChange++; //有很多这样的计数器，来判断是否允许触发change事件
        me.setValue(me.value);
        me.suspendCheckChange--;
    },

    setValue: function(value) {
        var me = this;
        me.value = value;
        me.checkChange(); //检查是否需要触发change事件
        return me;
    },
    //覆写此方法，会影响change事件的触发
    isEqual: function(value1, value2) {
        return String(value1) === String(value2);
    },

    isEqualAsString: function(value1, value2){
        return String(Ext.value(value1, '')) === String(Ext.value(value2, ''));
    },

    getSubmitData: function() {
        var me = this,
            data = null;
        if (!me.disabled && me.submitValue && !me.isFileUpload()) {
            data = {};
            data[me.getName()] = '' + me.getValue();//默认的字符串转换
        }
        return data;//如果禁用，将返回null
    },
    getModelData: function() {
        var me = this,
            data = null;
        if (!me.disabled && !me.isFileUpload()) {
            data = {};
            data[me.getName()] = me.getValue();
        }
        return data;//如果禁用，将返回null
    },
    reset : function(){
        var me = this;

        me.beforeReset();
        me.setValue(me.originalValue);
        me.clearInvalid();
        //恢复原始的验证状态
        delete me.wasValid;
    },
    resetOriginalValue: function() {
        this.originalValue = this.getValue();//直接设置当前值为原始值
        this.checkDirty();
    },
    checkChange: function() {
        if (!this.suspendCheckChange) {//如果没有暂停值变化检测
            var me = this,
                newVal = me.getValue(),
                oldVal = me.lastValue;
            if (!me.isEqual(newVal, oldVal) && !me.isDestroyed) {
                me.lastValue = newVal;
                me.fireEvent('change', me, newVal, oldVal);
                me.onChange(newVal, oldVal);
            }
        }
    },
    //私有方法
    onChange: function(newVal, oldVal) {
        if (this.validateOnChange) {
            this.validate();
        }
        this.checkDirty();
    },

    isDirty : function() {
        var me = this;
        return !me.disabled && !me.isEqual(me.getValue(), me.originalValue);
    },

    checkDirty: function() {
        var me = this,
            isDirty = me.isDirty();
        if (isDirty !== me.wasDirty) {
            me.fireEvent('dirtychange', me, isDirty);
            me.onDirtyChange(isDirty);
            me.wasDirty = isDirty;
        }
    },
    /*验证的底层都是调用getErrors()*/
    isValid : function() {
        var me = this;
        return me.disabled || Ext.isEmpty(me.getErrors());
    },

    validate : function() {
        var me = this,
            isValid = me.isValid();
        if (isValid !== me.wasValid) {
            me.wasValid = isValid;
            me.fireEvent('validitychange', me, isValid);
        }
        return isValid;
    },

    batchChanges: function(fn) {
        try {
            this.suspendCheckChange++;
            fn();
        } catch(e){
            throw e;
        } finally {
            this.suspendCheckChange--;
        }
        this.checkChange();
    },

    isFileUpload: function() {
        return false;
    },
    
    /*下面都是缺省适配 */
    extractFileInput: function() {
        return null;
    },

    markInvalid: Ext.emptyFn, //添加字段的无效值样式、消息

    clearInvalid: Ext.emptyFn, //清除字段的无效值样式、消息
    
    beforeReset: Ext.emptyFn, //模板方法
        
    transformOriginalValue: function(value){
        return value;
    },
    getName: function() {
        return this.name;
    },
    getValue: function() {
        return this.value;
    },
    onDirtyChange: Ext.emptyFn,

    getErrors: function(value) {
        return [];
    }
});

该混入类可以为组件（通常用于表单字段）添加标签、错误消息。Ext.form.FieldContainer、Ext.form.field.Base、Ext.form.field.HtmlEditor混入了该类，通常不需要直接使用该混入类。

使用该混入的组件应当使用Field组件布局（或其衍生形式）以便确定标签、消息的位置大小，在组件初始化阶段（initComponent）应当调用initLabelable进行该混入的初始化。

Ext.form.Labelable提供的配置项/属性/方法包括：

Ext.form.Labelable的源代码分析，关注的内容主要是标签、错误信息的显示和布局：

Ext.define("Ext.form.Labelable", {
    requires: ['Ext.XTemplate'],
    autoEl: {
        tag: 'table',
        cellpadding: 0
    },
    //描述组件子元素的数组，渲染到renderTpl中
    childEls: [
        'labelCell',
        'labelEl',
        'bodyEl',
        'sideErrorCell',
        'errorEl',
        'inputRow',
        'bottomPlaceHolder'
    ],
    //修饰了标签、错误信息后的字段的HTML标记模板
    //Ext.form.field.Base使用该模板作为其默认的组件renderTpl
    labelableRenderTpl: [
        //标签部分
        '<tr id="{id}-inputRow" <tpl if="inFormLayout">id="{id}"</tpl>>',
            '<tpl if="labelOnLeft">',  //如果：左侧标签
                '<td id="{id}-labelCell" style="{labelCellStyle}" {labelCellAttrs}>',
                    '{beforeLabelTpl}',//子模板：标签元素之前
                                               //子模板：标签元素属性
                    '<label id="{id}-labelEl" {labelAttrTpl}<tpl if="inputId"> for="{inputId}"</tpl> class="{labelCls}"',
                        '<tpl if="labelStyle"> style="{labelStyle}"</tpl>>',
                        '{beforeLabelTextTpl}', //子模板：标签文本之前
                                               //文字标签  冒号
                        '<tpl if="fieldLabel">{fieldLabel}{labelSeparator}</tpl>',
                        '{afterLabelTextTpl}', //子模板：标签文本之后
                    '</label>',
                    '{afterLabelTpl}',    //子模板：标签元素之后
                '</td>',
            '</tpl>',                   //如果结束：左侧标签

            '<td class="{baseBodyCls} {fieldBodyCls}" id="{id}-bodyEl" colspan="{bodyColspan}" role="presentation">',
                '{beforeBodyEl}',       //在字段bodyEl之前的元素
                '<tpl if="labelAlign==\'top\'">',  //如果：顶部标签
                    '{beforeLabelTpl}',            //子模板：标签元素之前
                    '<div id="{id}-labelCell" style="{labelCellStyle}">',
                                                   //子模板：标签元素属性
                        '<label id="{id}-labelEl" {labelAttrTpl}<tpl if="inputId"> for="{inputId}"</tpl> class="{labelCls}"',
                            '<tpl if="labelStyle"> style="{labelStyle}"</tpl>>',
                            '{beforeLabelTextTpl}',//子模板：标签文本之前
                                                   //文字标签  冒号
                            '<tpl if="fieldLabel">{fieldLabel}{labelSeparator}</tpl>',
                            '{afterLabelTextTpl}', //子模板：标签文本之后
                        '</label>',
                    '</div>',
                    '{afterLabelTpl}',             //子模板：标签元素之后
                '</tpl>',                          //结束如果：顶部标签

                '{beforeSubTpl}',                      //字段主体标记之前
                '{[values.$comp.getSubTplMarkup()]}',  //字段主体标记，调用字段的getSubTplMarkup()得到
                '{afterSubTpl}',                       //字段主体标记之后

            //错误消息部分
            '<tpl if="msgTarget===\'side\'">',  //右侧
                '{afterBodyEl}',                      //在字段bodyEl之后的元素
                '</td>',
                '<td id="{id}-sideErrorCell" vAlign="{[values.labelAlign===\'top\' && !values.hideLabel ? \'bottom\' : \'middle\']}" style="{[values.autoFitErrors ? \'display:none\' : \'\']}" width="{errorIconWidth}">',
                    '<div id="{id}-errorEl" class="{errorMsgCls}" style="display:none;width:{errorIconWidth}px"></div>',
                '</td>',
            '<tpl elseif="msgTarget==\'under\'">',  //下面
                '<div id="{id}-errorEl" class="{errorMsgClass}" colspan="2" style="display:none"></div>',
                '{afterBodyEl}',                     //在字段bodyEl之后的元素
                '</td>',
            '</tpl>',

        '</tr>',
        {
            disableFormats: true
        }
    ],
    //当前错误信息的HTML标记模板
    activeErrorsTpl: [
        '<tpl if="errors && errors.length">',
            '<ul><tpl for="errors"><li>{.}</li></tpl></ul>',
        '</tpl>'
    ],
    isFieldLabelable: true,
    formItemCls: Ext.baseCSSPrefix + 'form-item',
    labelCls: Ext.baseCSSPrefix + 'form-item-label',
    errorMsgCls: Ext.baseCSSPrefix + 'form-error-msg',
    baseBodyCls: Ext.baseCSSPrefix + 'form-item-body',
    fieldBodyCls: '',
    clearCls: Ext.baseCSSPrefix + 'clear',
    invalidCls : Ext.baseCSSPrefix + 'form-invalid',
    fieldLabel: undefined,
    labelAlign : 'left',
    labelWidth: 100,
    labelPad : 5,
    labelSeparator : ':',
    hideLabel: false,
    hideEmptyLabel: true,
    preventMark: false,
    autoFitErrors: true,
    msgTarget: 'qtip',
    noWrap: true,
    //模板插入点成员属性声明
    labelableInsertions: [],
    isFieldLabelable: true,
    formItemCls: Ext.baseCSSPrefix + 'form-item',
    labelCls: Ext.baseCSSPrefix + 'form-item-label',
    errorMsgCls: Ext.baseCSSPrefix + 'form-error-msg',
    baseBodyCls: Ext.baseCSSPrefix + 'form-item-body',
    fieldBodyCls: '',
    clearCls: Ext.baseCSSPrefix + 'clear',
    invalidCls : Ext.baseCSSPrefix + 'form-invalid',
    fieldLabel: undefined,
    labelAlign : 'left',
    labelWidth: 100,
    labelPad : 5,
    labelSeparator : ':',
    hideLabel: false,
    hideEmptyLabel: true,
    preventMark: false,
    autoFitErrors: true,
    msgTarget: 'qtip',
    noWrap: true,
    //模板插入点成员属性声明
    labelableInsertions: [
        'beforeBodyEl',
        'afterBodyEl',
        'beforeLabelTpl',
        'afterLabelTpl',
        'beforeSubTpl',
        'afterSubTpl',
        'beforeLabelTextTpl',
        'afterLabelTextTpl',
        'labelAttrTpl'
    ],
    labelableRenderProps: [ 'allowBlank', 'id', 'labelAlign', 'fieldBodyCls', 'baseBodyCls',
                            'clearCls', 'labelSeparator', 'msgTarget' ],
    //在字段的initComponent阶段调用
    initLabelable: function() {
        var me = this,
            padding = me.padding;
        if (padding) {
            me.padding = undefined;
            me.extraMargins = Ext.Element.parseBox(padding);
        }
        me.addCls(me.formItemCls);
        me.lastActiveError = '';
        me.addEvents(
            'errorchange'
        );
    },
    trimLabelSeparator: function() {
        var me = this,
            separator = me.labelSeparator,
            label = me.fieldLabel || '',
            lastChar = label.substr(label.length - 1);
        return lastChar === separator ? label.slice(0, -1) : label;
    },
    getFieldLabel: function() {
        return this.trimLabelSeparator();
    },
    setFieldLabel: function(label){
        label = label || '';
        var me = this,
            separator = me.labelSeparator,
            labelEl = me.labelEl;
        me.fieldLabel = label;
        if (me.rendered) {
            if (Ext.isEmpty(label) && me.hideEmptyLabel) {
                labelEl.parent().setDisplayed('none');
            } else {
                if (separator) {
                    label = me.trimLabelSeparator() + separator;
                }
                labelEl.update(label);
                labelEl.parent().setDisplayed('');
            }
            me.updateLayout();
        }
    },
    getInsertionRenderData: function (data, names) {
        var i = names.length,
            name, value;
        while (i--) {
            name = names[i];
            value = this[name];
            if (value) {
                if (typeof value != 'string') {
                    if (!value.isTemplate) {
                        value = Ext.XTemplate.getTpl(this, name);
                    }
                    value = value.apply(data);
                }
            }
            data[name] = value || '';
        }
        return data;
    },
    //收集渲染数据
    getLabelableRenderData: function() {
        var me = this,
            data,
            tempEl,
            topLabel = me.labelAlign === 'top';
        if (!Ext.form.Labelable.errorIconWidth) {
            Ext.form.Labelable.errorIconWidth = (tempEl = Ext.resetElement.createChild({style: 'position:absolute', cls: Ext.baseCSSPrefix + 'form-invalid-icon'})).getWidth();
            tempEl.remove();
        }
        //复制并覆盖默认值
        data = Ext.copyTo({
            inFormLayout   : me.ownerLayout && me.ownerLayout.type === 'form',
            inputId        : me.getInputId(),
            labelOnLeft    : !topLabel,
            hideLabel      : !me.hasVisibleLabel(),
            fieldLabel     : me.getFieldLabel(),
            labelCellStyle : me.getLabelCellStyle(),
            labelCellAttrs : me.getLabelCellAttrs(),
            labelCls       : me.getLabelCls(),
            labelStyle     : me.getLabelStyle(),
            bodyColspan    : me.getBodyColspan(),
            externalError  : !me.autoFitErrors,
            errorMsgCls    : me.getErrorMsgCls(),
            errorIconWidth : Ext.form.Labelable.errorIconWidth
        },
        me, me.labelableRenderProps, true);
        //用于插入主模板的若干变量或者模板，模板在getInsertionRenderData完成替换
        me.getInsertionRenderData(data, me.labelableInsertions);
        return data;
    },
    beforeLabelableRender: function() {
        var me = this;
        if (me.ownerLayout) {
            me.addCls(Ext.baseCSSPrefix + me.ownerLayout.type + '-form-item');
        }
    },
    onLabelableRender: function() {
        var me = this,
            margins,
            side,
            style = {};
        if (me.extraMargins) {
            margins = me.el.getMargin();
            for (side in margins) {
                if (margins.hasOwnProperty(side)) {
                    style['margin-' + side] = (margins[side] + me.extraMargins[side]) + 'px';
                }
            }
            me.el.setStyle(style);
        }
    },
    hasVisibleLabel: function(){
        if (this.hideLabel) {
            return false;
        }
        return !(this.hideEmptyLabel && !this.getFieldLabel());
    },
    getBodyColspan: function() {
        var me = this,
            result;
 
        if (me.msgTarget === 'side' && (!me.autoFitErrors || me.hasActiveError())) {
            result = 1;
        } else {
            result = 2;
        }
        if (me.labelAlign !== 'top' && !me.hasVisibleLabel()) {
            result++;
        }
        return result;
    },
    getLabelCls: function() {
        var labelCls = this.labelCls,
            labelClsExtra = this.labelClsExtra;
 
        if (this.labelAlign === 'top') {
            labelCls += '-top';
        }
        return labelClsExtra ? labelCls + ' ' + labelClsExtra : labelCls;
    },
    getLabelCellStyle: function() {
        var me = this,
            hideLabelCell = me.hideLabel || (!me.fieldLabel && me.hideEmptyLabel);
 
        return hideLabelCell ? 'display:none;' : '';
    },
    getErrorMsgCls: function() {
        var me = this,
            hideLabelCell = (me.hideLabel || (!me.fieldLabel && me.hideEmptyLabel));
        return me.errorMsgCls + (!hideLabelCell && me.labelAlign === 'top' ? ' ' + Ext.baseCSSPrefix + 'lbl-top-err-icon' : '');
    },
    getLabelCellAttrs: function() {
        var me = this,
            labelAlign = me.labelAlign,
            result = '';
 
        if (labelAlign !== 'top') {
            result = 'valign="top" halign="' + labelAlign + '" width="' + (me.labelWidth + me.labelPad) + '"';
        }
        return result + ' class="' + Ext.baseCSSPrefix + 'field-label-cell"';
    },
    getLabelStyle: function(){
        var me = this,
            labelPad = me.labelPad,
            labelStyle = '';
        if (me.labelAlign !== 'top') {
            if (me.labelWidth) {
                labelStyle = 'width:' + me.labelWidth + 'px;';
            }
            labelStyle += 'margin-right:' + labelPad + 'px;';
        }
        return labelStyle + (me.labelStyle || '');
    },
    //混入该类的组件必须实现此方法，提供表单字段的input元素
    getSubTplMarkup: function() {
        return '';
    },
    getInputId: function() {
        return '';
    },
    getActiveError : function() {
        return this.activeError || '';
    },
    hasActiveError: function() {
        return !!this.getActiveError();
    },
    setActiveError: function(msg) {
        this.setActiveErrors(msg);
    },
    getActiveErrors: function() {
        return this.activeErrors || [];
    },
    setActiveErrors: function(errors) {
        errors = Ext.Array.from(errors);
        this.activeError = errors[0];
        this.activeErrors = errors;
        this.activeError = this.getTpl('activeErrorsTpl').apply({errors: errors});
        this.renderActiveError();
    },
    unsetActiveError: function() {
        delete this.activeError;
        delete this.activeErrors;
        this.renderActiveError();
    },
    renderActiveError: function() {
        var me = this,
            activeError = me.getActiveError(),
            hasError = !!activeError;
 
        if (activeError !== me.lastActiveError) {
            me.fireEvent('errorchange', me, activeError);
            me.lastActiveError = activeError;
        }
        if (me.rendered && !me.isDestroyed && !me.preventMark) {
            me.el[hasError ? 'addCls' : 'removeCls'](me.invalidCls);
            me.getActionEl().dom.setAttribute('aria-invalid', hasError);
            if (me.errorEl) {
                me.errorEl.dom.innerHTML = activeError;
            }
        }
    },
    setFieldDefaults: function(defaults) {
        var me = this,
            val, key;
        for (key in defaults) {
            if (defaults.hasOwnProperty(key)) {
                val = defaults[key];
 
                if (!me.hasOwnProperty(key)) {
                    me[key] = val;
                }
            }
        }
    }
});

The post 浅析ExtJS 4表单字段 appeared first on 绿色记忆.

容器是一种特殊的组件，容器与一般组件的根本差别在于，它的内部可以包含其他组件（包括容器）作为其“子组件（items）”。容器提供添加、删除、插入子组件的方法和相关的事件。此外，容器还引入了“容器布局”，专门处理子组件的大小、位置。

在ExtJS 4的组件机制一文中，包含了对三层嵌套的面板的渲染阶段的整体分析，请参考。

本节主要分析以下几点内容：

1. 容器（及其子组件）的初始化过程
2. 容器渲染阶段，如何得到和处理渲染树
3. 渲染树如何委托布局来渲染子组件

考虑下面的例子：

Ext.create( 'Ext.container.Container', {
    renderTo : Ext.getBody(),
    id : 'c0',
    width : 250,
    height : 250,
    style : {
        backgroundColor : '#f88'
    },
    html:'This is a container',
    items : [
        {
            id : 'c0-b0',
            xtype : 'box',
            width : 100,
            height : 100,
            style : {
                backgroundColor : '#8f8'
            }
        }, {
            id : 'c0-b1',
            xtype : 'box',
            width : 100,
            height : 100,
            style : {
                backgroundColor : '#88f'
            }
        }
    ]
} );

这是包含两个Component（b0,b1）的Container（c0），使用Auto布局。下面是最终渲染效果和DOM结构：

在容器c0的初始化（主要是initComponent）阶段，包含以下重要逻辑：

1. 调用getLayout()初始化布局对象
   1. 使用静态函数Ext.layout.Layout.create()创建布局对象，由于未指定布局方式，创建为Ext.layout.container.Auto
   2. 调用AbstractContainer.setLayout()设置容器与布局的关联性。注意布局和容器是一对一的关联关系
2. 调用initItems()初始化子组件
   1. initItems()调用AbstractContainer.add()
   2. add()调用prepareItems()，把b0、b1添加为子组件，并完成子组件的初始化阶段：
      1. 调用lookupComponent()查找组件：如果子组件存在于ComponentManager中，则获取之，否则构造之
      2. 在本例中需要构造，调用子组件的constructor、initComponent
         1. 如果子组件也是容器（本例不是），则又是一个递归的过程，直到最底层的子代组件被初始化
   3. add()遍历所有被初始化完毕的子组件，执行：
      1. 对于浮动组件，转移到floatingItems集合中，并调用子组件onAdded()模板
      2. 对于非浮动组件，存放在items集合中，分别：
         1. 触发beforeadd事件、调用onBeforeAdd模板，只要任一返回false，取消添加
         2. 调用子组件onAdded()，导致子组件added事件触发
         3. 调用容器onAdd()
         4. 调用布局onAdd()
         5. 发布add事件
3. 由于配置了renderTo，触发渲染阶段开始

如ExtJS 4的组件机制一文所分析，渲染阶段会自上而下的onRender，并自下而上的完成afterRender，完成整个组件层次的渲染。渲染的核心是渲染树，渲染树包括tpl属性，是一个XTemplate模板，以及从Layout等对象获取过来控制渲染细节的若干函数。

渲染树tpl.html是模板内容，它看起来很简单，下表列出不同容器tree.tpl.html：

{%this.renderContainer(out,values)%}

{% this.renderDockedItems(out,values,0); %}
<div id="{id}-body" 
     class="{baseCls}-body
            <tpl if="bodyCls"> {bodyCls}</tpl> {baseCls}-body-{ui}
            <tpl if="uiCls">
                <tpl for="uiCls"> 
                    {parent.baseCls}-body-{parent.ui}-{.}
                </tpl>
            </tpl>"
      <tpl if="bodyStyle"> 
      style="{bodyStyle}"
      </tpl>
>
    {%this.renderContainer(out,values);%}
</div>
{% this.renderDockedItems(out,values,1); %}

在填充渲染树模板过程中，通过调用renderContainer()，容器的渲染行为会最终委托给布局对象，而布局也是使用模板机制进行渲染，下表列出常见布局使用的模板：

{%this.renderBody(out,values)%}

{%this.renderBody(out,values)%}
<div id="{ownerId}-clearEl" class="x-clear" role="presentation">
</div>

可以看到，renderContainer()方法是容器渲染（生成DOM结构）的核心，那么这个函数从何而来？

渲染树tpl模板成员函数的来源

tree.tpl是在渲染调用链：render() - getRenderTree() - getElConfig()中生成的：

1. 如果容器使用模拟的圆角外框（注意，如果支持CSS3则绝不会通过图片去模拟圆角外框效果），调用initFramingTpl()
   1. 获取Renderable.frameTpl或者frameTplTable
   2. 调用Renderable.setupFramingTpl()对frameTpl进行预处理：
      1. 把模板成员函数applyRenderTpl关联到this.doApplyRenderTpl
      2. 把模板成员函数renderDockedItems关联到this.doRenderFramingDockedItems
   3. frameTpl中包含对applyRenderTpl()的调用代码，这段代码的前后则是圆角外框效果的HTML
   4. applyRenderTpl()就是doApplyRenderTpl()，后者则转调initRenderTpl()
   5. 至此，可以看到initRenderTpl()是核心所在
2. 如果容器不使用模拟的圆角外框，直接调用initRenderTpl()
   1. 调用getTpl()把上表中AbstractContainer.renderTpl获取作为模板
   2. 调用setupRenderTpl()
      1. 获取容器布局对象
      2. 调用Renderable覆盖版本：设置tpl.renderBody=tpl.renderContent=this.doRenderContent
      3. 调用layout.setupRenderTpl
         1. tpl.renderBody = layout.doRenderBody
         2. tpl.renderContainer = layout.doRenderContainer
         3. tpl.renderItems = layout.doRenderItems
         4. tpl.renderPadder = layout.doRenderPadder

自此，渲染树的所有成员变量，成员函数的来源均已分析清楚。

渲染树插入DOM的具体过程

明确渲染树之后，render()方法会调用Ext.DomHelper()把渲染树插入到DOM结构中，细节如下：➁

1. 获取c0的渲染树后，Renderable.render()调用Ext.DomHelper.append()进行DOM插入
2. 调用 Ext.DomHelper.insert() 
3. 调用Ext.DomHelper.markup()，调用generateMarkup()生成渲染树的HTML字符串，具体如下：
   1. 输出c0的封装元素：<tree.tag，即

      <div

       
   2. 遍历tree的属性，判断哪些需要作为封装元素的属性
      1. cls作为属性，输出：

         class="x-container x-container-default"

          
      2. style作为属性，输出：

         style="background-color:#f88;width:250px;height:250px;"

      3. id作为属性，输出：

         id="c0"

          
   3. 输出

      >

       ，关闭封装元素的开始标签
   4. 调用tree.tpl.applyOut，填充模板并输出：
      1. 调用renderContainer()，这一步是容器渲染核心的起点
      2. 上一步即调用Auto布局父类layout.container.Container.doRenderContainer()
         1. 由于this指针的问题，从模板数据中取得$comp.layout，即当前布局对象
         2. 获取布局的渲染模板lt，调用layout.getRenderTpl()，结果如上表Auto
         3. 调用layout.owner.setupRenderTpl()对lt进行预处理，owner即c0
            1. 设置lt.renderBody=lt.renderContent=c0.doRenderContent
            2. 调用layout.setupRenderTpl()，设置：
               1. lt.renderBody = layout.doRenderBody
               2. lt.renderContainer = layout.doRenderContainer
               3. lt.renderItems = layout.doRenderItems
               4. lt.renderPadder = layout.doRenderPadder
         4. 以上3步完成布局渲染模板的初始化后，调用layout.getRenderData()初始化渲染上下文：
            1. $comp = c0
            2. $layout = c0.layout
            3. ownerId = c.id
         5. 执行布局渲染模板的applyOut()
            1. 调用lt.renderBody()，即layout.doRenderBody()
               1. 调用lt.renderItems()，即layout.doRenderItems()渲染子组件   ➀
               2. 调用lt.renderContent()，即c0.doRenderContent()渲染容器内容
            2. 输出：

               <div id="c0-clearEl" class="x-clear" role="presentation"></div>

   5. 输出c0的封装元素的关闭标签：

      </div>

       
4. Renderable.render()调用wrapPrimaryEl()，至此，c0.getEl()不再返回undefined
5. 调用Renderable.finishRender()，完成渲染过程，细节内容请参考：ExtJS 4的组件机制

布局渲染子组件的过程

如上一节➀，布局对象调用doRenderItems来完整子组件的渲染，这是合理的，因为容器内子组件的排列、大小、位置就是由布局对象负责的。

子组件渲染具体过程如下：

1. doRenderItems()调用layout.getRenderTree()获取布局的渲染树
   1. 调用Ext.layout.Layout.getItemsRenderTree()，遍历每个子组件（b0、b1）：
      1. 对组件调用layout.configureItem(item)，进行布局的预处理
      2. 对每个组件调用item.getRenderTree()，即获取子组件本身的渲染树
      3. 返回子组件渲染树的数组
2. doRenderItems()调用DomHelper.generateMarkup()生成子组件的DOM结构，如果子组件本身是容器，这里会有个递归处理过程，类似 ➁
3. 输出：
   

   <div class="x-component x-component-default" style="background-color:#8f8;width:100px;height:100px;" id="c0-b0"></div>
   <div class="x-component x-component-default" style="background-color:#88f;width:100px;height:100px;" id="c0-b1"></div>

容器内容的渲染过程

Container类没有对Renderable.doRenderContent()进行覆盖，因此调用的就是原始版本：

1. 把c0的html配置附加到输出

   This is a container

    
2. 如果c0配置了tpl，把该模板填充并输出

该私有类为Sencha的RIA框架产品线提供了公共的逻辑，包括以下成员：

AbstractContainer类的源代码分析如下：

Ext.define('Ext.container.AbstractContainer', {
    renderTpl: '{%this.renderContainer(out,values)%}',
    suspendLayout : false,
    autoDestroy : true,
    defaultType: 'panel',
    detachOnRemove: true,
    isContainer : true,
    layoutCounter : 0,
    baseCls: Ext.baseCSSPrefix + 'container',
    bubbleEvents: ['add', 'remove'],
    initComponent : function(){
        var me = this;
        //初始化事件
        me.addEvents(
            'afterlayout',
            'beforeadd',
            'beforeremove',
            'add',
            'remove'
        );
        me.callParent();//调用覆盖版本
        me.getLayout(); //初始化布局
        me.initItems(); //初始化子组件，合并为数组并调用add()
    },
    initItems : function() {
        var me = this, items = me.items;
        me.items = new Ext.util.AbstractMixedCollection(false, me.getComponentId);
        if (items) {
            if (!Ext.isArray(items)) {
                items = [items];
            }
            me.add(items);
        }
    },
    //渲染当前容器、及其子组件
    //该方法直接使用了Renderable的版本
    //子组件如何渲染，容器并不知道，所以委托其布局对象去渲染
    //详细参考《容器的渲染过程》一节
    render : function(){this.callParents(arguments);},
    //聚焦元素
    getFocusEl: function() {
        return this.getTargetEl();
    },
    //该方法会被finishRender调用，完成子组件/子元素的渲染
    finishRenderChildren: function () {
        this.callParent(); //覆盖版本完成了子元素的渲染，属于组件布局系统
        var layout = this.getLayout();
        if (layout) {
            layout.finishRender(); //容器布局系统，完成子组件的渲染
        }
    },
    //生命周期模板方法
    beforeRender: function () {
        var me = this, layout = me.getLayout();
        me.callParent();
        if (!layout.initialized) {
            //如果布局尚未初始化，初始化之
            layout.initLayout();
        }
    },
    //初始化渲染模板，对当前类的renderTpl预处理
    setupRenderTpl: function (renderTpl) {
        var layout = this.getLayout();
        this.callParent(arguments);
        layout.setupRenderTpl(renderTpl);
    },

    //设置容器的布局
    setLayout : function(layout) {
        var currentLayout = this.layout;
        if (currentLayout && currentLayout.isLayout && currentLayout != layout) {
            currentLayout.setOwner(null); //解除与当前正在使用的布局的关联
        }
        //设置新布局的双向关联
        this.layout = layout;
        layout.setOwner(this);
    },
    //初始化当前容器关联的布局对象
    getLayout : function() {
        var me = this;
        if (!me.layout || !me.layout.isLayout) {
            me.setLayout(Ext.layout.Layout.create(me.layout, me.self.prototype.layout || 'autocontainer'));
        }
        return me.layout;
    },
    //就是调用updateLayout()，不一定会flush
    doLayout : function() {
        this.updateLayout();
        return this;
    },
    
    afterLayout : function(layout) {
        var me = this;
        ++me.layoutCounter;
        if (me.hasListeners.afterlayout) {
            me.fireEvent('afterlayout', me, layout);
        }
    },

    //准备子组件
    prepareItems : function(items, applyDefaults) {
        if (Ext.isArray(items)) {
            items = items.slice(); //浅拷贝数组
        } else {
            items = [items];
        }
        var me = this,
            i = 0,
            len = items.length,
            item;
        //遍历处理子组件
        for (; i < len; i++) {
            item = items[i];
            if (item == null) {
                Ext.Array.erase(items, i, 1);
                --i;
                --len;
            } else {
                if (applyDefaults) {
                    item = this.applyDefaults(item);//应用默认配置
                }
                //告诉子组件，它在容器的初始化阶段就被包含在items中
                item.isContained = me;
                items[i] = me.lookupComponent(item); //查找或者创建子组件
                delete item.isContained;
            }
        }

        return items;
    },

    //如果在组件管理器中存在，则查找，否则创建
    lookupComponent : function(comp) {
        return (typeof comp == 'string') ? Ext.ComponentManager.get(comp)
                                         : Ext.ComponentManager.create(comp, this.defaultType);
    },

    add : function() {
        var me = this,
            args = Ext.Array.slice(arguments),
            index = (typeof args[0] == 'number') ? args.shift() : -1,
            layout = me.getLayout(),
            addingArray, items, i, length, item, pos, ret;

        if (args.length == 1 && Ext.isArray(args[0])) {
            items = args[0];
            addingArray = true;
        } else {
            items = args;
        }
        ret = items = me.prepareItems(items, true); //准备子组件，并应用缺省配置
        length = items.length;
        if (me.rendered) {
            Ext.suspendLayouts(); //如果容器已经渲染，要在添加期间暂停布局
        }
        if (!addingArray && length == 1) {
            ret = items[0];
        }
        for (i = 0; i < length; i++) {
            pos = (index < 0) ? me.items.length : (index + i);
            if (item.floating) {
                //浮动组件的处理
                me.floatingItems = me.floatingItems || new Ext.util.MixedCollection();
                me.floatingItems.add(item);
                item.onAdded(me, pos);
            } else if ((!me.hasListeners.beforeadd || me.fireEvent('beforeadd', me, item, pos) !== false) && me.onBeforeAdd(item) !== false) {
                //普通组件的处理
                me.items.insert(pos, item);
                item.onAdded(me, pos);
                me.onAdd(item, pos);
                layout.onAdd(item, pos);
                if (me.hasListeners.add) {
                    me.fireEvent('add', me, item, pos); //发布事件
                }
            }
        }
        //更新（计算）布局
        me.updateLayout();
        if (me.rendered) {
            //恢复布局系统
            Ext.resumeLayouts(true);
        }
        return ret;
    },
    //子组件相关模板方法   
    onAdd : Ext.emptyFn,
    onRemove : Ext.emptyFn,
    onBeforeAdd : function(item) {
        var me = this,
            border = item.border;
        if (item.ownerCt && item.ownerCt !== me) {
            //如果组件原来就在某个容器中，自动将其移除
            //因为有这个逻辑，实际使用时不必先移除，再添加
            item.ownerCt.remove(item, false);
        }
        if (me.border === false || me.border === 0) {
            item.border = Ext.isDefined(border) && border !== false && border !== 0;
        }
    },
    //移动子组件的位置并重新布局
    move : function(fromIdx, toIdx) {
        var items = this.items,
            item;
        item = items.removeAt(fromIdx);
        if (item === false) {
            return false;
        }
        items.insert(toIdx, item);
        this.doLayout();
        return item;
    },
    remove : function(comp, autoDestroy) {
        var me = this,
            c = me.getComponent(comp);
        //before模板方法调用、事件发布
        if (c && (!me.hasListeners.beforeremove || me.fireEvent('beforeremove', me, c) !== false)) {
            me.doRemove(c, autoDestroy);//执行实际移除逻辑
            if (me.hasListeners.remove) {
                me.fireEvent('remove', me, c); //移除事件
            }
            //如果容器本身正在销毁过程中，则不需要更新布局
            if (!me.destroying) {
                me.doLayout();
            }
        }
        return c;
    },
    doRemove : function(component, autoDestroy) {
        var me = this,
            layout = me.layout,
            hasLayout = layout && me.rendered,
            destroying = autoDestroy === true || (autoDestroy !== false && me.autoDestroy);

        autoDestroy = autoDestroy === true || (autoDestroy !== false && me.autoDestroy);
        me.items.remove(component); //从items中剔除
        if (hasLayout) {
            if (layout.running) {
                //取消正在进行的布局
                Ext.AbstractComponent.cancelLayout(component, destroying);
            }
            layout.onRemove(component, destroying); //模板方法
        }

        component.onRemoved(destroying);//模板方法
        me.onRemove(component, destroying);//模板方法
        if (destroying) {
            component.destroy();//可选的，销毁子组件
        }
        else {
            if (hasLayout) {
                layout.afterRemove(component);       
            }
            if (me.detachOnRemove && component.rendered) {
                //把子组件转移到detachedBody
                Ext.getDetachedBody().appendChild(component.getEl());
            }
        }
    },
    //移除所有子组件
    removeAll : function(autoDestroy) {
        var me = this,
            removeItems = me.items.items.slice(),
            items = [],
            i = 0,
            len = removeItems.length,
            item;
        me.suspendLayouts();
        for (; i < len; i++) {
            item = removeItems[i];
            me.remove(item, autoDestroy);
            if (item.ownerCt !== me) {
                items.push(item);
            }
        }
        me.resumeLayouts(!!len);
        return items;
    },
    //启用容器
    enable: function() {
        this.callParent(arguments);

        var itemsToDisable = this.getChildItemsToDisable(),
            length         = itemsToDisable.length,
            item, i;

        for (i = 0; i < length; i++) {
            item = itemsToDisable[i];

            if (item.resetDisable) {
                item.enable();
            }
        }

        return this;
    },
    //禁用容器
    disable: function() {
        this.callParent(arguments);

        var itemsToDisable = this.getChildItemsToDisable(),
            length         = itemsToDisable.length,
            item, i;

        for (i = 0; i < length; i++) {
            item = itemsToDisable[i];

            if (item.resetDisable !== false && !item.disabled) {
                item.disable();
                item.resetDisable = true;
            }
        }
        return this;
    },
    //布局前模板方法，返回false禁止布局
    beforeLayout: function() {
        return true;
    },
    //容器销毁前模板方法
    beforeDestroy : function() {
        var me = this,
            items = me.items,
            c;
        //销毁前首先移除、销毁子组件
        if (items) {
            while ((c = items.first())) {
                me.doRemove(c, true);
            }
        }
        //销毁容器关联的布局对象
        Ext.destroy(
            me.layout
        );
        me.callParent();
    }
});

该类的包含的逻辑很少，提供以下成员：

Container类的源代码分析如下：

Ext.define('Ext.container.Container', {
    extend: 'Ext.container.AbstractContainer',
    alias: 'widget.container',
    alternateClassName: 'Ext.Container',
    fireHierarchyEvent: function (ename) {
        //使hierarchyEventSource对象发布事件，并且把当前对象作为事件参数
        this.hierarchyEventSource.fireEvent(ename, this);
    },
    //生命周期模板方法：以下三个方法都是通过hierarchyEventSource对象发布相应的事件
    afterHide: function() {
        this.callParent(arguments);
        this.fireHierarchyEvent('hide');
    },
    afterShow: function(){
        this.callParent(arguments);
        this.fireHierarchyEvent('show');
    },
    onAdded: function() {
        this.callParent(arguments);
        if (this.hierarchyEventSource.hasListeners.added) {
            this.fireHierarchyEvent('added');
        }
    },
    //寻找“直接”包含某个元素的子组件
    getChildByElement: function(el, deep) {
        var item,
            itemEl,
            i = 0,
            it = this.getRefItems(),
            ln = it.length;

        el = Ext.getDom(el);
        for (; i < ln; i++) {
            item = it[i];
            itemEl = item.getEl();
            if (itemEl && ((itemEl.dom === el) || itemEl.contains(el))) {
                return (deep && item.getChildByElement) ? item.getChildByElement(el, deep) : item;
            }
        }
        return null;
    }
}, function () {
    this.hierarchyEventSource = this.prototype.hierarchyEventSource = new Ext.util.Observable({ events: {
        //支持的事件
        hide: true,
        show: true,
        collapse: true,
        expand: true,
        added: true
    }});
});

The post ExtJS 4的容器机制 appeared first on 绿色记忆.

组件、容器是ExtJS组件机制的基础，后者是前者的子类型。

这是一个ExtJS框架的私有混入，定义了组件渲染的核心逻辑，对于下面这个包含三层嵌套的Panel：

Ext.onReady( function()
{
    Ext.createByAlias( 'widget.panel', {
        id : 'ContainerA',
        layout : 'hbox',
        width : 500,
        height : 500,
        renderTo : Ext.getBody(),
        items : [
            {
                id : 'ContainerB',
                xtype : 'container',
                width : 250,
                height : 250,
                layout : 'fit',
                items : [
                    {
                        id : 'ComponentA',
                        html : 'Hello World !'
                    }
                ]
            }
        ]
    } );
} )

Renderable定义其渲染过程如下：

1. ContainerA被初始化时转调父类构造器，在AbstractComponent.constructor()中，由于配置了renderTo，调用render()方法，进入渲染阶段
2. render()开始渲染ContainerA，首先禁用布局系统，然后调用getRenderTree()，获取“渲染树”，这个所谓的渲染树就是一个DomHelper规格对象
3. getRenderTree()触发事件beforerender、调用beforeRender()模板方法，然后调用getElConfig()获取渲染树对象
4. 根据是否配置外框（Window、Tip必须有外框），getElConfig()会生成不同的结果：要么调用initFramingTpl()，要么调用initRenderTpl()生成一个模板，并置入渲染树：{tag : 'div', tpl: template}的tpl属性
   1. 从细节上看，initRenderTpl()获取当前类（Container）的renderTpl属性作为tpl，该模板具有以下成员：
      

      属性	说明
      html	容器的HTML结构，整体形式如下： {% this.renderDockedItems(out,values,0); %} {%this.renderContainer(out,values);%} {% this.renderDockedItems(out,values,1); %}
      initialConfig	传入的初始配置对象
      renderBody	可供在模板中调用的一系列方法 这些xxx方法都是在： Renderable.setupFramingTpl() AbstractContainer.setupRenderTpl() 等方法中，与容器、布局类的doXxx进行关联得到的。之所以要和布局类的doXxx关联，是因为布局才知道子组件如何渲染
      renderContainer
      renderContent
      renderDockedItems
      renderItems
      renderPadder

   2. 如果配置了autoEl，替换渲染树的tag属性
   3. 调用initRenderData生成tpl的填充上下文（tplData），并提供一些默认值
   4. 最终返回的渲染树形式如下（符合DomHelper规格约定）：
      

      {
          tag: "div",
          cls: "", 
          style: {
              height: "500px"
              width: "500px"
          }, 
          id: "ContainerA"
          tpl: {
              html: "..."
              initialConfig: {}
              renderBody: function (out, renderData) {...}
              renderContainer: function (out, renderData) {...}
              renderContent: function (out, renderData) {...}
              renderDockedItems: function (out, renderData, after) {...}
              renderItems: function (out, renderData) {...}
              renderPadder: function (out, renderData) {...}
          }, 
          tplData : {
              $comp: '当前组件'
              baseCls: "x-panel"
              bodyCls: "x-panel-body-default"
              bodyStyle: ""
              componentCls: "x-panel"
              frame: undefined
              id: "ContainerA"
              ui: "default"
              uiCls: []
          }
      }

5. render()得到渲染树后，使用DomHelper将其插入到文档中，一旦插入，整个组件（包括所有后代组件）的DOM结构就都生成了，结果如下：
6. 插入DOM完毕后，render()设置ContainerA的el为新生成的HTML元素ContainerA
7. render()调用finishRender()完成渲染阶段，在此阶段，会自上而下的递归调用所有子代组件的onRender()，然后自下而上的递归完成所有子代组件的afterRender()调用，需要注意的是，子代的onRender()完全处于父代的afterRender()调用的内部
   1. 调用onRender()
      1. 设置renderSelectors为成员变量
      2. 清除正在渲染状态：rendering，设置rendered=true
      3. 记住lastBox={width:500,height:500}
   2. 设置targetEl的overflow样式；设置封装元素的visibilityMode
   3. 如果有存在监听器，则发布render事件
   4. 调用afterRender()，该方法最终会触发布局，主要逻辑位于Rendererable中
      1. 调用finishRenderChildren()完成子代的渲染
         1. 组件布局渲染：调用Renderable.finishRenderChildren()渲染内部结构
            1. 获取组件布局getComponentLayout()，这里是Ext.layout.component.Dock
            2. 调用Dock.finishRender(),该方法会获取dockedItems，并调用Ext.layout.Layout.finishRenderItems()逐个渲染
         2. 容器布局渲染：调用AbstractContainer.finishRenderChildren()渲染子组件
            1. 获取容器布局getLayout()，这里是Ext.layout.container.HBox
            2. 调用HBox.finishRender()，后者转调父类（Ext.layout.container.Container）版本
            3. Container.finishRender()获取渲染目标（targetEl）和渲染子组件（仅一个ContainerB）
            4. 调用Container.finishRenderItems(target, items)完成子组件渲染
            5. 转调Ext.layout.Layout.finishRenderItems()，逻辑类似7.4.1.1
               1. 调用ContainerB的Renderable.finishRender，这一小节是类似于7的递归调用
                  1. 子组件ContainerB的el属性被设置，不再为空
                  2. 调用ContainerB的onRender模板方法，逻辑类似7.1，lastBox为250
                  3. 调用ContainerB.afterRender()
                     1. finishRenderChildren()
                     2. 完成组件布局渲染（Dock）
                     3. 完成容器布局渲染（Fit），继续递归用
                        1. ComponentA.finishRender()
                           1. ComponentA.onRender()
                           2. ComponentA.afterRender()
                              1. ……一直递归到最底层组件……
                     4. 由于不是顶层容器，不进行updateLayout()
                  4. 如果有存在监听器，则发布afterrender事件
                  5. 初始化事件：initEvents()
                  6. 如果配置为隐藏，那么调用getEl().hide()
            6. 对于每一个item，调用afterRenderItem(item)
      2. 为targetEl添加CSS类styleHtmlCls、增减样式
      3. 由于当前容器是顶层的，调用AbstractComponent.updateLayout()触发布局
         1. 如果当前组件是隐藏的，调用cancelLayout()取消布局
         2. 否则判断是否布局根，如果不是，什么都不做
         3. 由于ContainerA的布局未被暂停，调用静态函数Ext.AbstractComponent.updateLayout执行实际布局逻辑。这里可以看到，AbstractComponent类对象是全局的布局管理对象，updateLayout会把参数指定的组件放入某个队列，并且进行复杂的布局计算
            1. 如果当前正在运行布局，则把ContainerA放入running的无效队列
            2. 如果当前没有运行布局，则把ContainerA放入pending的无效队列，这里匹配这一条
               1. 如果当前布局系统没有被暂停，则立即刷新布局flushLayouts()
   5. 如果有存在监听器，则发布afterrender事件
   6. 初始化事件，调用AbstractComponenet.initEvents()。initEvent()包含若干在组件渲染完毕后，需要初始化的事件监听器
      1. 如果具有afterRenderEvents，则把这些监听器注册为组件子元素的受管监听器，这些事件属于DOM事件
      2. 为当前组件添加焦点监听器（addFocusListener）
   7. 如果配置为隐藏，那么调用getEl().hide()
8. render()启用布局系统，转调AbstractComponent.resumeLayouts()静态函数
   1. 刷出布局，调用flushLayouts()
   2. 覆写pendingLayouts的runComplete方法防止死循环
   3. 调用pendingLayouts（类型Ext.layout.Context）的run()方法
      1. 调用Context.flushInvalidates()
         1. 转调Context.invalidate()，使相关的组件、容器布局失效
      2. 调用Context.flush()
      3. 调用Context.runComplete()

Renderable类包含以下成员：

Ext.util.Renderable的代码分析如下：

Ext.define('Ext.util.Renderable', {
    requires: [
        'Ext.dom.Element'
    ],
    //外框：在组件外围制造圆角矩形效果
    frameCls: Ext.baseCSSPrefix + 'frame',
    frameIdRegex: /[\-]frame\d+[TMB][LCR]$/,
    frameElementCls: {
        tl: [],
        tc: [],
        tr: [],
        ml: [],
        mc: [],
        mr: [],
        bl: [],
        bc: [],
        br: []
    },
    frameElNames: ['TL','TC','TR','ML','MC','MR','BL','BC','BR'],
    //基于DIV的外框模板
    frameTpl: [
        '{%this.renderDockedItems(out,values,0);%}',//渲染停靠的子组件
        '<tpl if="top">',
            '<tpl if="left"><div id="{fgid}TL" class="{frameCls}-tl {baseCls}-tl {baseCls}-{ui}-tl<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-tl</tpl>" style="background-position: {tl}; padding-left: {frameWidth}px" role="presentation"></tpl>',
                '<tpl if="right"><div id="{fgid}TR" class="{frameCls}-tr {baseCls}-tr {baseCls}-{ui}-tr<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-tr</tpl>" style="background-position: {tr}; padding-right: {frameWidth}px" role="presentation"></tpl>',
                    '<div id="{fgid}TC" class="{frameCls}-tc {baseCls}-tc {baseCls}-{ui}-tc<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-tc</tpl>" style="background-position: {tc}; height: {frameWidth}px" role="presentation"></div>',
                '<tpl if="right"></div></tpl>',
            '<tpl if="left"></div></tpl>',
        '</tpl>',
        '<tpl if="left"><div id="{fgid}ML" class="{frameCls}-ml {baseCls}-ml {baseCls}-{ui}-ml<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-ml</tpl>" style="background-position: {ml}; padding-left: {frameWidth}px" role="presentation"></tpl>',
            '<tpl if="right"><div id="{fgid}MR" class="{frameCls}-mr {baseCls}-mr {baseCls}-{ui}-mr<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-mr</tpl>" style="background-position: {mr}; padding-right: {frameWidth}px" role="presentation"></tpl>',
                '<div id="{fgid}MC" class="{frameCls}-mc {baseCls}-mc {baseCls}-{ui}-mc<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-mc</tpl>" role="presentation">',
                    '{%this.applyRenderTpl(out, values)%}', //渲染主体内容
                '</div>',
            '<tpl if="right"></div></tpl>',
        '<tpl if="left"></div></tpl>',
        '<tpl if="bottom">',
            '<tpl if="left"><div id="{fgid}BL" class="{frameCls}-bl {baseCls}-bl {baseCls}-{ui}-bl<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-bl</tpl>" style="background-position: {bl}; padding-left: {frameWidth}px" role="presentation"></tpl>',
                '<tpl if="right"><div id="{fgid}BR" class="{frameCls}-br {baseCls}-br {baseCls}-{ui}-br<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-br</tpl>" style="background-position: {br}; padding-right: {frameWidth}px" role="presentation"></tpl>',
                    '<div id="{fgid}BC" class="{frameCls}-bc {baseCls}-bc {baseCls}-{ui}-bc<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-bc</tpl>" style="background-position: {bc}; height: {frameWidth}px" role="presentation"></div>',
                '<tpl if="right"></div></tpl>',
            '<tpl if="left"></div></tpl>',
        '</tpl>',
        '{%this.renderDockedItems(out,values,1);%}'//渲染停靠的子组件
    ],
    //基于TABLE的外框模板
    frameTableTpl: [
        '{%this.renderDockedItems(out,values,0);%}',
        '<table><tbody>',
            '<tpl if="top">',
                '<tr>',
                    '<tpl if="left"><td id="{fgid}TL" class="{frameCls}-tl {baseCls}-tl {baseCls}-{ui}-tl<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-tl</tpl>" style="background-position: {tl}; padding-left:{frameWidth}px" role="presentation"></td></tpl>',
                    '<td id="{fgid}TC" class="{frameCls}-tc {baseCls}-tc {baseCls}-{ui}-tc<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-tc</tpl>" style="background-position: {tc}; height: {frameWidth}px" role="presentation"></td>',
                    '<tpl if="right"><td id="{fgid}TR" class="{frameCls}-tr {baseCls}-tr {baseCls}-{ui}-tr<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-tr</tpl>" style="background-position: {tr}; padding-left: {frameWidth}px" role="presentation"></td></tpl>',
                '</tr>',
            '</tpl>',
            '<tr>',
                '<tpl if="left"><td id="{fgid}ML" class="{frameCls}-ml {baseCls}-ml {baseCls}-{ui}-ml<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-ml</tpl>" style="background-position: {ml}; padding-left: {frameWidth}px" role="presentation"></td></tpl>',
                '<td id="{fgid}MC" class="{frameCls}-mc {baseCls}-mc {baseCls}-{ui}-mc<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-mc</tpl>" style="background-position: 0 0;" role="presentation">',
                    '{%this.applyRenderTpl(out, values)%}',
                '</td>',
                '<tpl if="right"><td id="{fgid}MR" class="{frameCls}-mr {baseCls}-mr {baseCls}-{ui}-mr<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-mr</tpl>" style="background-position: {mr}; padding-left: {frameWidth}px" role="presentation"></td></tpl>',
            '</tr>',
            '<tpl if="bottom">',
                '<tr>',
                    '<tpl if="left"><td id="{fgid}BL" class="{frameCls}-bl {baseCls}-bl {baseCls}-{ui}-bl<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-bl</tpl>" style="background-position: {bl}; padding-left: {frameWidth}px" role="presentation"></td></tpl>',
                    '<td id="{fgid}BC" class="{frameCls}-bc {baseCls}-bc {baseCls}-{ui}-bc<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-bc</tpl>" style="background-position: {bc}; height: {frameWidth}px" role="presentation"></td>',
                    '<tpl if="right"><td id="{fgid}BR" class="{frameCls}-br {baseCls}-br {baseCls}-{ui}-br<tpl for="uiCls"> {parent.baseCls}-{parent.ui}-{.}-br</tpl>" style="background-position: {br}; padding-left: {frameWidth}px" role="presentation"></td></tpl>',
                '</tr>',
            '</tpl>',
        '</tbody></table>',
        '{%this.renderDockedItems(out,values,1);%}'
    ],
    //执行渲染，生成组件的全部HTML并插入到DOM
    //container是渲染到的HTML父节点
    render: function(container, position) {
        var me = this,
            el = me.el && (me.el = Ext.get(me.el)),
            vetoed,
            tree,
            nextSibling;
        //暂停所有布局
        Ext.suspendLayouts();
        //确保父节点container的引用已经获取
        container = me.initContainer(container);
        //得到下一个兄弟HTML节点，在其前面插入
        nextSibling = me.getInsertPosition(position);
        //对于顶层组件，渲染开始时el是不存在的
        if (!el) {
            //如果当前组件的封装元素还不存在
            //getRenderTree将会发布beforerender事件、调用beforeRender模板方法
            //然后调用getElConfig()获得当前组件（包括全部子组件）完整的DomHelper规格对象
            tree = me.getRenderTree();
            if (me.ownerLayout && me.ownerLayout.transformItemRenderTree) {
                tree = me.ownerLayout.transformItemRenderTree(tree);
            }
            // 注意：如果beforeRender返回false，则tree不生成
            if (tree) {
                //插入当前组件到文档中
                if (nextSibling) {
                    el = Ext.DomHelper.insertBefore(nextSibling, tree);
                } else {
                    el = Ext.DomHelper.append(container, tree);
                }
                //设置this.el变量
                me.wrapPrimaryEl(el);
            }
        } else {
            //如果当前组件的封装元素已经存在
            if (!me.hasListeners.beforerender || me.fireEvent('beforerender', me) !== false) {
                me.initStyles(el);
                if (me.allowDomMove !== false) {
                    if (nextSibling) {
                        container.dom.insertBefore(el.dom, nextSibling);
                    } else {
                        container.dom.appendChild(el.dom);
                    }
                }
            } else {
                vetoed = true;//非顶层组件为true
            }
        }
        //如果当前组件是顶层组件，则自上而下的递归整棵组件树（子代组件的finishRender被递归调用）
        //访问每个组件的onRender()方法
        if (el && !vetoed) {
            me.finishRender(position);
        }
        //恢复布局系统，如果组件的parentNode在document.body下，立即刷新所有未决的布局
        Ext.resumeLayouts(!container.isDetachedBody);
    },
    //获取组件的parentNode
    initContainer: function(container) {
        var me = this;
        //如果没有指定container，则自动获取el的parentNode
        if (!container && me.el) {
            container = me.el.dom.parentNode;
            me.allowDomMove = false;
        }
        me.container = container.dom ? container : Ext.get(container);
        return me.container;
    },
    //所谓渲染树就是一个DomHelper规格对象
    getRenderTree: function() {
        var me = this;
        //发布beforerender事件
        if (!me.hasListeners.beforerender || me.fireEvent('beforerender', me) !== false) {
            //如果beforerender事件句柄没有返回false，则调用beforeRender()模板方法
            me.beforeRender();
            //该标记可以让布局管理器的finishRenderItems、afterFinishRenderItems指导哪些items需要处理
            me.rendering = true;
            //如果当前组件的封装元素以及存在，则返回一个代理元素
            if (me.el) {
                //由于这里正在生成一棵“渲染树”，因此使用一个代理元素（proxy el）在生成的目标DOM的精确位置进行占位
                //在finishRender阶段，代理元素会被真实元素替换
                return {
                    tag: 'div',
                    id: (me.$pid = Ext.id())
                };
            }
            //否则，生成一个代表当前组件（包含子全部子组件）的完整的DomHelper规格对象
            return me.getElConfig();
        }
        return null;
    },
    //生成当前组件完整的DomHelper规格
    getElConfig : function() {
        var me = this,
            autoEl = me.autoEl,
            frameInfo = me.getFrameInfo(),
            //规格对象
            config = {
                tag: 'div',//默认标签是DIV
                //如果具有组件外框效果，则使用frameTpl包裹renderTpl，否则直接使用initRenderTpl
                tpl: frameInfo ? me.initFramingTpl(frameInfo.table) : me.initRenderTpl()
            },
            i, frameElNames, len, suffix, frameGenId;
        //初始化样式
        me.initStyles(me.protoEl);
        me.protoEl.writeTo(config);
        me.protoEl.flush();
        //根据autoEl的配置更新config
        if (Ext.isString(autoEl)) {
            config.tag = autoEl;
        } else {
            Ext.apply(config, autoEl);
        }
        config.id = me.id;
        //何时不为true？
        if (config.tpl) {
            if (frameInfo) {
                frameElNames = me.frameElNames;
                len = frameElNames.length;
                frameGenId = me.id + '-frame1';
                me.frameGenId = 1;
                config.tplData = Ext.apply({}, {
                    $comp:      me, //把当前组件作为上下文
                    fgid:       frameGenId,
                    ui:         me.ui,
                    uiCls:      me.uiCls,
                    frameCls:   me.frameCls,
                    baseCls:    me.baseCls,
                    frameWidth: frameInfo.maxWidth,
                    top:        !!frameInfo.top,
                    left:       !!frameInfo.left,
                    right:      !!frameInfo.right,
                    bottom:     !!frameInfo.bottom,
                    renderData: me.initRenderData()
                }, me.getFramePositions(frameInfo));
                //设置外框子元素与组件的关联（作为成员变量）
                for (i = 0; i < len; i++) {
                    suffix = frameElNames[i];
                    me.addChildEls({ name: 'frame' + suffix, id: frameGenId + suffix });
                }
                //对于面板，必须具有frameBody子元素
                me.addChildEls({
                    name: 'frameBody',
                    id: frameGenId + 'MC'
                });
            } else {
                config.tplData = me.initRenderData();
            }
        }
        return config;
    },
    //生命周期模板方法：渲染之后
    afterRender : function() {
        var me = this,
            data = {},
            protoEl = me.protoEl,
            target = me.getTargetEl(),
            item;
        //首先，递归的调用子组件的afterRender()
        me.finishRenderChildren();
        //为目标元素(el或者frameBody)添加样式
        if (me.styleHtmlContent) {
            target.addCls(me.styleHtmlCls);
        }
        //把protoEl的样式信息（包括style和class）写到对象data
        protoEl.writeTo(data);
        //添加、删除样式
        item = data.removed;
        if (item) {
            target.removeCls(item);
        }
        item = data.cls;
        if (item.length) {
            target.addCls(item);
        }
        item = data.style;
        if (data.style) {
            target.setStyle(item);
        }
        //protoEl没有利用价值了
        me.protoEl = null;
        //如果当前是最外层组件或容器，立即更新布局
        if (!me.ownerCt) {
            me.updateLayout();
        }
    },
    //第一次布局后执行
    afterFirstLayout : function(width, height) {
        var me = this,
            hasX = Ext.isDefined(me.x),
            hasY = Ext.isDefined(me.y),
            pos, xy;
        //设置组件的位置
        if (me.floating && (!hasX || !hasY)) {
            if (me.floatParent) {
                pos = me.floatParent.getTargetEl().getViewRegion();
                xy = me.el.getAlignToXY(me.floatParent.getTargetEl(), 'c-c');
                pos.left = xy[0] - pos.left;
                pos.top =  xy[1] - pos.top;
            } else {
                xy = me.el.getAlignToXY(me.container, 'c-c');
                pos = me.container.translatePoints(xy[0], xy[1]);
            }
            me.x = hasX ? me.x : pos.left;
            me.y = hasY ? me.y : pos.top;
            hasX = hasY = true;
        }
 
        if (hasX || hasY) {
            me.setPosition(me.x, me.y);
        }
        //调用模板方法并发布事件
        me.onBoxReady(width, height);
        if (me.hasListeners.boxready) {
            me.fireEvent('boxready', me, width, height);
        }
    },
    //第一次布局后的模板方法，缺省适配
    onBoxReady: Ext.emptyFn,
    //根据renderSelectors、childEls的配置，设置组件对其内部元素的引用
    applyRenderSelectors: function() {
        var me = this,
            selectors = me.renderSelectors,
            el = me.el,
            dom = el.dom,
            selector;
 
        me.applyChildEls(el);
        if (selectors) {
            for (selector in selectors) {
                if (selectors.hasOwnProperty(selector) && selectors[selector]) {
                    me[selector] = Ext.get(Ext.DomQuery.selectNode(selectors[selector], dom));
                }
            }
        }
    },
    //生命周期模板方法：渲染之前
    beforeRender: function () {
        var me = this,
            target = me.getTargetEl(),
            layout = me.getComponentLayout();
        //如果当前组件是诸如Window、Tip之类alwaysFramed的组件，那么设置frame为true
        me.frame = me.frame || me.alwaysFramed;
        //初始化组件布局管理器
        if (!layout.initialized) {
            layout.initLayout();
        }
        //设置targetEl的overflow样式，如果目前targetEl尚不存在，则在finishRender后会设置
        if (target) {
            target.setStyle(me.getOverflowStyle());
            me.overflowStyleSet = true;
        }
        //设置主题样式
        me.setUI(me.ui);
        if (me.disabled) {
            //静默的禁用组件
            me.disable(true);
        }
    },
    doApplyRenderTpl: function(out, values) {
        //注意，该方法的this指向frameTpl
        var me = values.$comp,
            tpl;
        if (!me.rendered) {
            //初始化renderTpl
            tpl = me.initRenderTpl();
            //把renderTpl的填充结果添加到输出中
            tpl.applyOut(values.renderData, out);
        }
    },
    //初始化renderTpl
    initRenderTpl: function() {
        var tpl = this.getTpl('renderTpl');//得到renderTpl作为模板
        if (tpl && !tpl.renderContent) {
            this.setupRenderTpl(tpl);
        }
        return tpl;
    },
    //把renderTpl的renderBody、renderContent设值为doRenderContent函数
    setupRenderTpl: function (renderTpl) {
        renderTpl.renderBody = renderTpl.renderContent = this.doRenderContent;
    },
    doRenderContent: function (out, renderData) {
        //注意，该方法的this指向frameTpl
        var me = renderData.$comp;
        if (me.html) {
            //如果指定了html配置，把它输出到out
            Ext.DomHelper.generateMarkup(me.html, out);
            delete me.html;//删除配置
        }
        if (me.tpl) {
            //如果指定了tpl，将其填充结果输出到out
            if (!me.tpl.isTemplate) {
                me.tpl = new Ext.XTemplate(me.tpl);
            }
            if (me.data) {
                me.tpl.applyOut(me.data, out);
                delete me.data;
            }
        }
    },
    //执行自动渲染
    doAutoRender: function() {
        var me = this;
        if (!me.rendered) {
            if (me.floating) { //浮动组件渲染到body元素
                me.render(document.body);
            } else { //如果配置了渲染目标元素，则渲染到目标；否则渲染到body
                me.render(Ext.isBoolean(me.autoRender) ? Ext.getBody() : me.autoRender);
            }
        }
    },
    
    doRenderFramingDockedItems: function (out, renderData, after) {
        //注意，该方法作为frameTpl的成员函数调用，this指向frameTpl
        var me = renderData.$comp;
        //大部分组件没有停靠子组件，所以检查其是否具有doRenderDockedItems()函数
        if (!me.rendered && me.doRenderDockedItems) {
            renderData.renderData.$skipDockedItems = true;
            //调用渲染停靠子组件的函数
            me.doRenderDockedItems.call(this, out, renderData, after);
        }
    },
    //完成该组件的渲染，所有子组件的onRender、afterRender会被调用，所有组件布局、容器布局的计算都会完成
    finishRender: function(containerIdx) {
        var me = this,
            tpl, data, contentEl, el, pre, hide;
        //如果尚未渲染，执行渲染（插入DOM）
        if (!me.el || me.$pid) {
            if (me.container) {
                el = me.container.getById(me.id, true);
            } else {
                el = Ext.getDom(me.id);
            }
            if (!me.el) {
                me.wrapPrimaryEl(el);
            } else {
                delete me.$pid;
                if (!me.el.dom) {
                    me.wrapPrimaryEl(me.el);
                }
                el.parentNode.insertBefore(me.el.dom, el);
                Ext.removeNode(el); //
            }
        } else if (!me.rendering) {
            tpl = me.initRenderTpl();
            if (tpl) {
                data = me.initRenderData();
                tpl.insertFirst(me.getTargetEl(), data);
            }
        }
        //否则，目前正在渲染
        if (!me.container) {
            me.container = Ext.get(me.el.dom.parentNode);
        }
        if (me.ctCls) {
            me.container.addCls(me.ctCls);
        }
        //调用onRender模板方法
        me.onRender(me.container, containerIdx);
        if (!me.overflowStyleSet) {
            me.getTargetEl().setStyle(me.getOverflowStyle());
        }
        me.el.setVisibilityMode(Ext.Element[me.hideMode.toUpperCase()]);
        if (me.overCls) {
            me.el.hover(me.addOverCls, me.removeOverCls, me);
        }
        //发布render事件
        if (me.hasListeners.render) {
            me.fireEvent('render', me);
        }
        if (me.contentEl) {
            pre = Ext.baseCSSPrefix;
            hide = pre + 'hide-';
            contentEl = Ext.get(me.contentEl);
            contentEl.removeCls([pre+'hidden', hide+'display', hide+'offsets', hide+'nosize']);
            me.getTargetEl().appendChild(contentEl.dom);
        }
        //调用afterRender模板方法，在这里会完成所有子组件的渲染
        me.afterRender();
        if (me.hasListeners.afterrender) {
            me.fireEvent('afterrender', me);
        }
        //初始化事件
        me.initEvents();
        //如果配置为隐藏，则隐藏组件
        if (me.hidden) {
            me.el.hide();
        }
    },
    //渲染子代，这里的默认实现是处理组件布局
    //对于容器类组件，还要处理容器布局
    finishRenderChildren: function () {
        var layout = this.getComponentLayout(); //得到组件布局
        layout.finishRender(); //由布局完成所有子代的渲染
    },
 
    //使用TABLE或者DIV模式获得外框的模板
    initFramingTpl: function(table) {
        var tpl = table ? this.getTpl('frameTableTpl') : this.getTpl('frameTpl');
 
        if (tpl && !tpl.applyRenderTpl) {
            this.setupFramingTpl(tpl);
        }
 
        return tpl;
    },
    //为外框模板添加一些成员函数
    setupFramingTpl: function(frameTpl) {
        frameTpl.applyRenderTpl = this.doApplyRenderTpl;
        frameTpl.renderDockedItems = this.doRenderFramingDockedItems;
    },
    //在配置的renderData基础上加上额外的属性
    initRenderData: function() {
        var me = this;
        return Ext.apply({
            $comp: me,
            id: me.id,
            ui: me.ui,
            uiCls: me.uiCls,
            baseCls: me.baseCls,
            componentCls: me.componentCls,
            frame: me.frame
        }, me.renderData);
    },
    //生命周期模板方法
    onRender: function(parentNode, containerIdx) {
        var me = this,
            x = me.x,
            y = me.y,
            lastBox, width, height,
            el = me.el,
            body = Ext.getBody().dom;
        if (Ext.scopeResetCSS && !me.ownerCt) {
            if (el.dom === body) {
                el.parent().addCls(Ext.resetCls);
            }
            else {
                // Floaters rendered into the body can all be bumped into the common reset element
                if (me.floating && me.el.dom.parentNode === body) {
                    Ext.resetElement.appendChild(me.el);
                }
                else {
                    me.resetEl = el.wrap(Ext.resetElementSpec, false, Ext.supports.CSS3LinearGradient ? undefined : '*');
                }
            }
        }
        me.applyRenderSelectors(); //处理子元素的引用，包括renderSelectors、childEls
        //设置组件状态为已渲染
        delete me.rendering;
        me.rendered = true;
        //记住最初的尺寸
        lastBox = null;
        if (x !== undefined) {
            lastBox = lastBox || {};
            lastBox.x = x;
        }
        if (y !== undefined) {
            lastBox = lastBox || {};
            lastBox.y = y;
        }
        if (!me.getFrameInfo() && Ext.isBorderBox) {
            width = me.width;
            height = me.height;
 
            if (typeof width == 'number') {
                lastBox = lastBox || {};
                lastBox.width = width;
            }
            if (typeof height == 'number') {
                lastBox = lastBox || {};
                lastBox.height = height;
            }
        }
        me.lastBox = me.el.lastBox = lastBox;
    },
    //确保组件被附加到document.body内部，而不是detachedBody
    ensureAttachedToBody: function (runLayout) {
        var comp = this,
            body;
 
        while (comp.ownerCt) {
            comp = comp.ownerCt;
        }
 
        if (comp.container.isDetachedBody) {
            comp.container = body = Ext.resetElement;
            body.appendChild(comp.el.dom);
            if (runLayout) {
                comp.updateLayout();
            }
            if (typeof comp.x == 'number' || typeof comp.y == 'number') {
                comp.setPosition(comp.x, comp.y);
            }
        }
    },
    wrapPrimaryEl: function (dom) {
        this.el = Ext.get(dom, true);
    },
    //初始化圆角外框
    initFrame : function() {
        if (Ext.supports.CSS3BorderRadius || !this.frame) {
            return;
        }
 
        var me = this,
            frameInfo = me.getFrameInfo(),
            frameWidth, frameTpl, frameGenId,
            i,
            frameElNames = me.frameElNames,
            len = frameElNames.length,
            suffix;
 
        if (frameInfo) {
            frameWidth = frameInfo.maxWidth;
            frameTpl = me.getFrameTpl(frameInfo.table);
            me.frameGenId = frameGenId = (me.frameGenId || 0) + 1;
            frameGenId = me.id + '-frame' + frameGenId;
            frameTpl.insertFirst(me.el, Ext.apply({
                $comp:      me,
                fgid:       frameGenId,
                ui:         me.ui,
                uiCls:      me.uiCls,
                frameCls:   me.frameCls,
                baseCls:    me.baseCls,
                frameWidth: frameWidth,
                top:        !!frameInfo.top,
                left:       !!frameInfo.left,
                right:      !!frameInfo.right,
                bottom:     !!frameInfo.bottom
            }, me.getFramePositions(frameInfo)));
 
            me.frameBody = me.el.down('.' + me.frameCls + '-mc');
            me.removeChildEls(function (c) {
                return c.id && me.frameIdRegex.test(c.id);
            });
            for (i = 0; i < len; i++) {
                suffix = frameElNames[i];
                me['frame' + suffix] = me.el.getById(frameGenId + suffix);
            }
        }
    },
    //更新圆角外框
    updateFrame: function() {
        if (Ext.supports.CSS3BorderRadius || !this.frame) {
            return;
        }
        var me = this,
            wasTable = this.frameSize && this.frameSize.table,
            oldFrameTL = this.frameTL,
            oldFrameBL = this.frameBL,
            oldFrameML = this.frameML,
            oldFrameMC = this.frameMC,
            newMCClassName;
        this.initFrame();
        if (oldFrameMC) {
            if (me.frame) {
                newMCClassName = this.frameMC.dom.className;
                oldFrameMC.insertAfter(this.frameMC);
                this.frameMC.remove();
                this.frameBody = this.frameMC = oldFrameMC;
                oldFrameMC.dom.className = newMCClassName;
                if (wasTable) {
                    me.el.query('> table')[1].remove();
                }
                else {
                    if (oldFrameTL) {
                        oldFrameTL.remove();
                    }
                    if (oldFrameBL) {
                        oldFrameBL.remove();
                    }
                    if (oldFrameML) {
                        oldFrameML.remove();
                    }
                }
            }
        }
        else if (me.frame) {
            this.applyRenderSelectors();
        }
    },
    //得到组件圆角外框的信息
    getFrameInfo: function() {
        //如果浏览器支持CSS3圆角边框，或者组件不使用外框，则返回，不去读取CSS样式
        if (Ext.supports.CSS3BorderRadius || !this.frame) {
            return false;
        }
        var me = this,
            frameInfoCache = me.frameInfoCache,
            el = me.el || me.protoEl,
            cls = el.dom ? el.dom.className : el.classList.join(' '),
            frameInfo = frameInfoCache[cls],//缓存的外框信息
            styleEl, left, top, info;
        //如果找不到缓存的外框信息        
        if (frameInfo == null) {
            //创建一个在屏幕可见范围外的承载样式的元素
            styleEl = Ext.fly(me.getStyleProxy(cls), 'frame-style-el');
            //设置背景图片偏移
            left = styleEl.getStyle('background-position-x');
            top = styleEl.getStyle('background-position-y');
            if (!left && !top) {
                info = styleEl.getStyle('background-position').split(' ');
                left = info[0];
                top = info[1];
            }
            //计算样式
            frameInfo = me.calculateFrame(left, top);
 
            if (frameInfo) {
                //确保不使用背景图片
                el.setStyle('background-image', 'none');
            }
            //加入缓存
            frameInfoCache[cls] = frameInfo;
        }
        me.frame = !!frameInfo;
        me.frameSize = frameInfo;
        return frameInfo;
    },
    //返回一个在屏幕可视范围外的基于cls样式的DIV
    getStyleProxy: function(cls) {
        var result = this.styleProxyEl || (Ext.AbstractComponent.prototype.styleProxyEl = Ext.resetElement.createChild({
                style: {
                    position: 'absolute',
                    top: '-10000px'
                }
            }, null, true));
 
        result.className = cls;
        return result;
    },
    //计算组件外框样式
    calculateFrame: function(left, top){
        if (!(parseInt(left, 10) >= 1000000 && parseInt(top, 10) >= 1000000)) {
            return false;
        }
        var max = Math.max,
            tl = parseInt(left.substr(3, 2), 10),
            tr = parseInt(left.substr(5, 2), 10),
            br = parseInt(top.substr(3, 2), 10),
            bl = parseInt(top.substr(5, 2), 10),
            frameInfo = {
                table: left.substr(0, 3) == '110',
                vertical: top.substr(0, 3) == '110',
                top:    max(tl, tr),
                right:  max(tr, br),
                bottom: max(bl, br),
                left:   max(tl, bl)
            };
        frameInfo.maxWidth = max(frameInfo.top, frameInfo.right, frameInfo.bottom, frameInfo.left);
        frameInfo.width = frameInfo.left + frameInfo.right;
        frameInfo.height = frameInfo.top + frameInfo.bottom;
        return frameInfo;
    },
    //获取圆角外框的位置信息
    getFramePositions: function(frameInfo) {
        var me = this,
            frameWidth = frameInfo.maxWidth,
            dock = me.dock,
            positions, tc, bc, ml, mr;
        if (frameInfo.vertical) {
            tc = '0 -' + (frameWidth * 0) + 'px';
            bc = '0 -' + (frameWidth * 1) + 'px';
 
            if (dock && dock == "right") {
                tc = 'right -' + (frameWidth * 0) + 'px';
                bc = 'right -' + (frameWidth * 1) + 'px';
            }
            positions = {
                tl: '0 -' + (frameWidth * 0) + 'px',
                tr: '0 -' + (frameWidth * 1) + 'px',
                bl: '0 -' + (frameWidth * 2) + 'px',
                br: '0 -' + (frameWidth * 3) + 'px',
                ml: '-' + (frameWidth * 1) + 'px 0',
                mr: 'right 0',
                tc: tc,
                bc: bc
            };
        } else {
            ml = '-' + (frameWidth * 0) + 'px 0';
            mr = 'right 0';
            if (dock && dock == "bottom") {
                ml = 'left bottom';
                mr = 'right bottom';
            }
            positions = {
                tl: '0 -' + (frameWidth * 2) + 'px',
                tr: 'right -' + (frameWidth * 3) + 'px',
                bl: '0 -' + (frameWidth * 4) + 'px',
                br: 'right -' + (frameWidth * 5) + 'px',
                ml: ml,
                mr: mr,
                tc: '0 -' + (frameWidth * 0) + 'px',
                bc: '0 -' + (frameWidth * 1) + 'px'
            };
        }
        return positions;
    },
    //获取圆角外框的XTemplate
    getFrameTpl : function(table) {
        return this.getTpl(table ? 'frameTableTpl' : 'frameTpl');
    },
    frameInfoCache: {}
});

私有类Ext.AbstractComponent为Sencha的RIA应用框架（例如Sencha Touch、ExtJS）提供了共享的功能，是ExtJS组件机制的基础。它提供了以下方面的功能：

1. 规定了ExtJS组件的生命周期模型
2. 提供了若干供扩展的模板方法，可以扩展ExtJS组件生命周期的各阶段，或者阻止默认生命周期行为的发生
3. 规定了组件HTML内容的、基于模板的渲染机制
4. 提供了各种设置组件UI样式的方法，包括CSS样式类、补白、边距、边框、可见性等
5. 提供了组件布局机制
6. 混入了：
   1. Ext.util.Renderable，保护组件渲染阶段的核心逻辑
   2. Ext.util.Observable，实现了观察者模式，是ExtJS事件机制的基础

AbstractComponent类包含以下成员：

Ext.create('Ext.Component', {
    id: "widget",
    autoEl: {
        tag: 'h3',
        html: '<span>Content</span>'
    }
});
/* 输出内容 */
<h3 id="widget">
    <span>Content</span>
</h3>

Ext.create('Ext.Component', {
    id: "widget",
    html: '<span>My Content</span>'
});
/* 输出内容 */
<div id="widget">
    <span>Content</span>
</div> 

Ext.create('Ext.Component', {
    renderTpl: [
        '<h1 id="{id}-title">{title}</h1>'
    ],
    renderData: {
        title: "Error"
    },
    childEls: ["title"],
    listeners: {
        afterrender: function(cmp){
            //在渲染完毕后，{id}-title元素自动作为当前组件的实例变量
            cmp.title.setStyle({color: "red"});
        }
    }
});

constructor: function ( config ) {
    var me = this;
    me.data = config;
    me.callParent( config );
}

var widget = Ext.create('Ext.Component', {
    id: "widget",
    tpl: '<span>Hello {name}</span>',
    data: {name: 'Alex'}
});
/* 输出内容 */
<div id="widget">
    <span>Hello Alex</span>
</div>

# 警告：update导致子元素被清空并重建，不是Angular那种风格
widget.update({name: 'Alex Wong'});

<span>Hello Alex Wong</span>

Ext.create( 'Ext.Component', {
    renderTpl : [
        '<h1 class="title">{title}</h1>', '<p>{desc}</p>'
    ],
    renderData : {
        title : "Error",
        desc : "Something went wrong"
    },
    renderSelectors : {
        titleEl : 'h1.title', //CSS选择器
        descEl : 'p'
    },
    listeners : {
        afterrender : function( cmp )
        {
            //在渲染完毕后，h1.title元素自动作为当前组件的实例变量
            cmp.titleEl.setStyle( {
                color : "red"
            } );
        }
    }
} );

Ext.AbstractComponent的源代码分析如下：

Ext.define('Ext.AbstractComponent', {
    statics: {
        AUTO_ID: 1000,
        pendingLayouts: null,
        layoutSuspendCount: 0,
        cancelLayout: function(comp, isDestroying) {
            //context为布局上下文，Ext.layout.Context的实例
            var context = this.runningLayoutContext || this.pendingLayouts;
            if (context) {
                context.cancelComponent(comp, false, isDestroying);
            }
        },
        flushLayouts: function () {
            var me = this,
                context = me.pendingLayouts;
            //invalidQueue是布局失效的顶层布局组件的队列，队列里的组件不会存在具有父子/前后代关系的组件
            if (context && context.invalidQueue.length) {
                me.pendingLayouts = null;
                me.runningLayoutContext = context; //正在执行的布局上下文
                //覆盖上下文的刷新布局方法
                Ext.override(context, {
                    runComplete: function () {
                        //在通过runComplete调用finishedLayout()前必须清空布局队列
                        //因为finishedLayout()会调用afterComponentLayout，而可能导致重新进入doLayout或doComponentLayout
                        me.runningLayoutContext = null;
                        return this.callParent(); 
                    }
                });
                //执行布局计算，此方法只能在布局上下文上调用一次
                context.run();
            }
        },
        //递减暂停布局计数器，如果为0，则刷新布局
        resumeLayouts: function (flush) {
            if (this.layoutSuspendCount && ! --this.layoutSuspendCount) {
                if (flush) {
                    this.flushLayouts();
                }
            }
        },
        //递增暂停布局计数器
        suspendLayouts: function () {
            ++this.layoutSuspendCount;
        },
        //更新组件的布局
        updateLayout: function (comp, defer) {
            var me = this,
                running = me.runningLayoutContext,
                pending;
            //在running或者pending布局的下一次周期中排队
            if (running) {
                running.queueInvalidate(comp);
            } else {
                pending = me.pendingLayouts || (me.pendingLayouts = new Ext.layout.Context());
                pending.queueInvalidate(comp);
                if (!defer && !me.layoutSuspendCount && !comp.isLayoutSuspended()) {
                    me.flushLayouts();
                }
            }
        }
    },
    isComponent: true,
    getAutoId: function() {
        this.autoGenId = true;
        return ++Ext.AbstractComponent.AUTO_ID;
    },
    deferLayouts: false,
    autoGenId: false,
    //默认的渲染模板
    renderTpl: '{%this.renderContent(out,values)%}',
    frameSize: { left: 0, top: 0, right: 0, bottom: 0, width: 0, height: 0 },
    tplWriteMode: 'overwrite',
    baseCls: Ext.baseCSSPrefix + 'component',
    disabledCls: Ext.baseCSSPrefix + 'item-disabled',
    ui: 'default',
    uiCls: [],
    hidden: false,
    disabled: false,
    draggable: false,
    floating: false,
    hideMode: 'display',
    styleHtmlContent: false,
    styleHtmlCls: Ext.baseCSSPrefix + 'html',
    autoShow: false,
    autoRender: false,
    // @private
    allowDomMove: true,
    rendered: false,
    componentLayoutCounter: 0,
    shrinkWrap: 2,
    weight: 0,
    maskOnDisable: true,
    _isLayoutRoot: false,
    //组件构造器，规定了组件的生命周期
    constructor : function(config) {
        var me = this,
            i, len, xhooks;
        //配置项作为属性，应用到当前对象
        if (config) {
            Ext.apply(me, config);
            //xhooks用于动态的覆盖一个实例的成员，而不是类的
            xhooks = me.xhooks;
            if (xhooks) {
                delete me.xhooks;
                Ext.override(me, xhooks);
            }
        } else {
            config = {};
        }
        //初始配置
        me.initialConfig = config;
        //构造混入
        me.mixins.elementCt.constructor.call(me);
        me.addEvents(
            'beforeactivate',
            'activate',
            'beforedeactivate',
            'deactivate',
            'added',
            'disable',
            'enable',
            'beforeshow',
            'show',
            'beforehide',
            'hide',
            'removed',
            'beforerender',
            'render',
            'afterrender',
            'boxready',
            'beforedestroy',
            'destroy',
            'resize',
            'move',
            'focus',
            'blur'
        );
        //触发以生成ID
        me.getId();
        //生成protoEl属性，Ext.util.ProtoElement用于在渲染前管理Element的属性，例如class和style
        me.setupProtoEl();
        if (me.cls) {
            me.initialCls = me.cls;
            me.protoEl.addCls(me.cls);
        }
        if (me.style) {
            me.initialStyle = me.style;
            me.protoEl.setStyle(me.style);
        }
        //受管的监听器列表
        me.mons = [];
        me.renderData = me.renderData || {};
        me.renderSelectors = me.renderSelectors || {};
        //如果配置了插件，则在此执行所有插件的构造
        if (me.plugins) {
            me.plugins = me.constructPlugins();
        }
        if (!me.hasListeners) {
            me.hasListeners = new me.HasListeners();
        }
        //生命周期模板方法：初始化组件
        me.initComponent();
        //在组件管理器中注册自己
        Ext.ComponentManager.register(me);
        //构造混入类
        me.mixins.observable.constructor.call(me);
        me.mixins.state.constructor.call(me, config);
        //resize作为状态事件，resize将导致组件状态被保存
        this.addStateEvents('resize');
        //如果配置了插件，则在此依次初始化插件
        if (me.plugins) {
            for (i = 0, len = me.plugins.length; i < len; i++) {
                me.plugins[i] = me.initPlugin(me.plugins[i]);
            }
        }
        //初始化用于远程加载组件内容的加载器
        me.loader = me.getLoader();

        //生命周期的第二阶段：渲染
        //容器中的子组件，其渲染阶段被父容器控制
        //如果配置了renderTo，那么立即执行渲染
        if (me.renderTo) {
            me.render(me.renderTo);
        }
        //如果配置了autoShow，并且不处于容器内，那么立即执行展示
        if (me.autoShow && !me.isContained) {
            me.show();
        }
        if (Ext.isDefined(me.disabledClass)) {
            if (Ext.isDefined(Ext.global.console)) {
                Ext.global.console.warn('Ext.Component: disabledClass has been deprecated. Please use disabledCls.');
            }
            me.disabledCls = me.disabledClass;
            delete me.disabledClass;
        }
    },

    initComponent: function () {
        //再一次调用了constructPlugins()，可以让子类在自己的initComponent()里面添加新的插件配置
        this.plugins = this.constructPlugins();
        //设置组件的初始大小
        this.setSize(this.width, this.height);
    },
    //获取组件的状态，例如大小、位置等信息，子类可以扩展以添加任何定制的、需要持久化的信息
    getState: function() {
        var me = this,
            state = null,
            sizeModel = me.getSizeModel();

        if (sizeModel.width.configured) {
            state = me.addPropertyToState(state, 'width');
        }
        if (sizeModel.height.configured) {
            state = me.addPropertyToState(state, 'height');
        }
        return state;
    },
    //把某个属性添加到状态中
    addPropertyToState: function (state, propName, value) {
        var me = this,
            len = arguments.length;
        if (len == 3 || me.hasOwnProperty(propName)) {
            if (len < 3) {
                value = me[propName];
            }
            if (value !== me.initialConfig[propName]) {
                (state || (state = {}))[propName] = value;
            }
        }
        return state;
    },
    //如何展示组件，缺省适配
    show: Ext.emptyFn,
    //生命周期模板方法：隐藏组件时
    //缺省实现：更新布局
    onHide: function() {
        this.updateLayout({ isRoot: false });
    },
    //生命周期模板方法：显示组件时
    //缺省实现：更新布局
    onShow : function() {
        this.updateLayout({ isRoot: false });
    },
    //构造一个插件，如果已经构造，简单的返回查询对象
    constructPlugin: function(plugin) {
        
        if (plugin.ptype && typeof plugin.init != 'function') {
            plugin.cmp = this;
            plugin = Ext.PluginManager.create(plugin);
        }
        else if (typeof plugin == 'string') {
            plugin = Ext.PluginManager.create({
                ptype: plugin,
                cmp: this
            });
        }
        return plugin;
    },
    //构造所有配置的插件
    constructPlugins: function() {
        var me = this,
            plugins,
            result = [],
            i, len;

        if (me.plugins) {
            plugins = Ext.isArray(me.plugins) ? me.plugins : [ me.plugins ];
            for (i = 0, len = plugins.length; i < len; i++) {
                result[i] = me.constructPlugin(plugins[i]);
            }
            return result;
        }
    },
    // @private
    //初始化插件，就是调用插件的init方法并入参当前组件
    initPlugin : function(plugin) {
        plugin.init(this);

        return plugin;
    },
    updateAria: Ext.emptyFn,
    //使用当前组件作为参数组件的浮动管理器
    registerFloatingItem: function(cmp) {
        var me = this;
        if (!me.floatingDescendants) {
            me.floatingDescendants = new Ext.ZIndexManager(me);
        }
        me.floatingDescendants.register(cmp);
    },
    unregisterFloatingItem: function(cmp) {
        var me = this;
        if (me.floatingDescendants) {
            me.floatingDescendants.unregister(cmp);
        }
    },
    //布局暂停计数器
    layoutSuspendCount: 0,
    //暂停当前组件的布局
    suspendLayouts: function () {
        var me = this;
        if (!me.rendered) { //如果当前组件尚未渲染，不做任何处理
            return;
        }
        if (++me.layoutSuspendCount == 1) {
            me.suspendLayout = true;
        }
    },
    //恢复当前组件的布局
    resumeLayouts: function (flushOptions) {
        var me = this;
        if (!me.rendered) { //如果当前组件尚未渲染，不做任何处理
            return;
        }
        if (! --me.layoutSuspendCount) {
            //如果计数器为0，那么需要更新当前组件的布局
            me.suspendLayout = false;
            if (flushOptions && !me.isLayoutSuspended()) {
                me.updateLayout(flushOptions);
            }
        }
    },
    //初始化事件的私有方法
    initEvents : function() {
        var me = this,
            afterRenderEvents = me.afterRenderEvents,
            el, //注意这个闭包变量 ➀ 
            property,
            //为元素添加受管的监听器
            fn = function(listeners){
                //回调函数立即使用闭包变量的实时值 ➃
                me.mon(el, listeners);
            };
        //渲染后事件映射：{元素属性:[监听器1,监听器2]}
        if (afterRenderEvents) {
            for (property in afterRenderEvents) {
                if (afterRenderEvents.hasOwnProperty(property)) {
                    el = me[property]; //闭包变量的值改变 ➁
                    if (el && el.on) {
                        //执行回调函数 ➂
                        Ext.each(afterRenderEvents[property], fn);
                    }
                }
            }
        }
        me.addFocusListener();
    },
    //添加焦点监听器
    addFocusListener: function() {
        var me = this,
            focusEl = me.getFocusEl(),//得到当前组件的焦点元素
            needsTabIndex;
        //不仅仅是表单，所有容器均可能是支持获取焦点，例如面板、工具栏、窗口
        //通常，作为焦点元素的DIV元素无法接收焦点，但如果调用了FocusManager，则其非缺省的导航处理器（navigation handlers ）
        //将明确的使面板、容器或者FieldSet获取焦点
        
        //如果当前组件具有焦点元素，可能需要为其添加focus、blur事件：
        if (focusEl) {
            // getFocusEl()方法可能返回一个组件，如果作为容器的this希望把焦点管理代理给它的子代组件 
            // Window组件可以通过配置defaultFocus为它的一个按钮来实现这种代理
            if (focusEl.isComponent) {
                return focusEl.addFocusListener(); //代理
            }
            //如果焦点元素本身就是可聚焦的(focusable)，那么总是需要添加focus监听器处理组件的聚焦
            //如果焦点元素是不可聚集的，除非启用了FocusManager，否则不需要添加focus监听器
            needsTabIndex = focusEl.needsTabIndex();
            if (!me.focusListenerAdded && (!needsTabIndex || Ext.FocusManager.enabled)) {
                if (needsTabIndex) {
                    focusEl.dom.tabIndex = -1;
                }
                focusEl.on({
                    focus: me.onFocus,
                    blur: me.onBlur,
                    scope: me
                });
                me.focusListenerAdded = true;
            }
        }
    },
    //获取当前组件关联的焦点元素，缺省适配
    getFocusEl: Ext.emptyFn,
    //是否可聚焦
    isFocusable: function(c) {
        var me = this,
            focusEl;
        if ((me.focusable !== false) && (focusEl = me.getFocusEl()) && me.rendered && !me.destroying && !me.isDestroyed && !me.disabled && me.isVisible(true)) {
            if (focusEl.isComponent) {
                return focusEl.isFocusable();
            }

            return focusEl && focusEl.dom && focusEl.isVisible();
        }
    },
    //聚焦前模板方法
    preFocus: Ext.emptyFn,
    //聚焦时模板方法
    onFocus: function(e) {
        var me = this,
            focusCls = me.focusCls,
            focusEl = me.getFocusEl();
        if (!me.disabled) {
            me.preFocus(e);
            if (focusCls && focusEl) {
                focusEl.addCls(me.addClsWithUI(focusCls, true));//添加聚焦CSS样式
            }
            if (!me.hasFocus) {
                me.hasFocus = true;
                me.fireEvent('focus', me, e); //发布聚焦事件
            }
        }
    },
    //失焦前模板方法
    beforeBlur : Ext.emptyFn,
    //失焦时模板方法
    onBlur : function(e) {
        var me = this,
            focusCls = me.focusCls,
            focusEl = me.getFocusEl();

        if (me.destroying) {
            return;
        }

        me.beforeBlur(e);
        if (focusCls && focusEl) {
            focusEl.removeCls(me.removeClsWithUI(focusCls, true));//移除聚焦CSS样式
        }
        if (me.validateOnBlur) {
            me.validate();    //执行验证
        }
        me.hasFocus = false;
        me.fireEvent('blur', me, e); //发布失焦事件
        me.postBlur(e);
    },
    //失焦后模板方法
    postBlur : Ext.emptyFn,
    getId : function() {
        return this.id || (this.id = 'ext-comp-' + (this.getAutoId()));
    },
    //得到当前组件的itemId，如果没有，则返回id
    getItemId : function() {
        return this.itemId || this.id;
    },
    //得到当前组件的封装（顶级）元素
    getEl : function() {
        return this.el;
    },
    //用于确定html、contentEl、items等HTML插入到哪边
    getTargetEl: function() {
        return this.frameBody || this.el;//如果具有frameBody，则frameBody作为targetEl，否则使用顶级元素
    },

    /**
     * 更新当前组件的内容区域（即targetEl）
     * @param {String/Object} htmlOrData 如果组件配置了tpl模板，则使用该参数作为上下文填充模板，否则作为HTML更新内如区域
     * @param {Boolean} [loadScripts=false] 仅当使用html配置时合法
     * @param {Function} [callback] 仅当使用html配置时合法，加载脚本完毕后的回调
     */
    update : function(htmlOrData, loadScripts, cb) {
        var me = this;

        if (me.tpl && !Ext.isString(htmlOrData)) {
            me.data = htmlOrData;
            if (me.rendered) {
                //填充模板，并覆盖targetEl的innerHTML
                me.tpl[me.tplWriteMode](me.getTargetEl(), htmlOrData || {});
            }
        } else {
            me.html = Ext.isObject(htmlOrData) ? Ext.DomHelper.markup(htmlOrData) : htmlOrData;
            if (me.rendered) {
                //更新元素的innerHTML
                me.getTargetEl().update(me.html, loadScripts, cb);
            }
        }
        if (me.rendered) {
            //更新组件的布局
            me.updateLayout();
        }
    },
    //模板方法：第一次使用初始大小渲染后
    onBoxReady: function(){
        var me = this;
        if (me.disableOnBoxReady) {
            me.onDisable();
        } else if (me.enableOnBoxReady) {
            me.onEnable();
        }
        //初始化：可改变大小
        if (me.resizable) {
            me.initResizable(me.resizable);
        }
        //初始化：可拖拽。必须在可改变大小之后
        if (me.draggable) {
            me.initDraggable();
        }
    },
    //启用组件
    enable: function(silent) {
        var me = this;
        delete me.disableOnBoxReady;
        me.removeCls(me.disabledCls);
        if (me.rendered) {
            me.onEnable();
        } else {
            me.enableOnBoxReady = true;
        }
        me.disabled = false;
        delete me.resetDisable;
        //silent用于阻止事件触发
        if (silent !== true) {
            me.fireEvent('enable', me);
        }
        return me;
    },
    //禁用组件
    disable: function(silent) {
        var me = this;
        delete me.enableOnBoxReady;
        me.addCls(me.disabledCls);
        if (me.rendered) {
            me.onDisable();
        } else {
            me.disableOnBoxReady = true;
        }
        me.disabled = true;
        //silent用于阻止事件触发
        if (silent !== true) {
            delete me.resetDisable;
            me.fireEvent('disable', me);
        }

        return me;
    },
    //模板方法：在启用后执行
    //缺省实现：去除遮罩
    onEnable: function() {
        if (this.maskOnDisable) {
            this.el.dom.disabled = false;
            this.unmask();
        }
    },
    //模板方法：在禁用后执行
    onDisable : function() {
        var me = this,
            focusCls = me.focusCls,
            focusEl = me.getFocusEl();
        //清除聚焦
        if (focusCls && focusEl) {
            focusEl.removeCls(me.removeClsWithUI(focusCls, true));
        }
        //添加遮罩
        if (me.maskOnDisable) {
            me.el.dom.disabled = true;
            me.mask();
        }
    },
    //添加遮罩
    mask: function() {
        var box = this.lastBox,
            target = this.getMaskTarget(),
            args = [];
        if (box) {
            args[2] = box.height;
        }
        target.mask.apply(target, args);
    },
    //清除遮罩
    unmask: function() {
        this.getMaskTarget().unmask();
    },
    //遮罩的目标元素
    getMaskTarget: function(){
        return this.el;
    },
    //添加监听器
    addListener : function(element, listeners, scope, options) {
        var me = this,
            fn,
            option;
        if (Ext.isString(element) && (Ext.isObject(listeners) || options && options.element)) {
            if (options.element) {
                fn = listeners;

                listeners = {};
                listeners[element] = fn;
                element = options.element;
                if (scope) {
                    listeners.scope = scope;
                }
                for (option in options) {
                    if (options.hasOwnProperty(option)) {
                        if (me.eventOptionsRe.test(option)) {
                            listeners[option] = options[option];
                        }
                    }
                }
            }
            if (me[element] && me[element].on) {
                me.mon(me[element], listeners);
            } else {
                me.afterRenderEvents = me.afterRenderEvents || {};
                if (!me.afterRenderEvents[element]) {
                    me.afterRenderEvents[element] = [];
                }
                me.afterRenderEvents[element].push(listeners);
            }
        }
        return me.mixins.observable.addListener.apply(me, arguments);
    },
    //移除受管的事件监听器
    removeManagedListenerItem: function(isClear, managedListener, item, ename, fn, scope){
        var me = this,
            element = managedListener.options ? managedListener.options.element : null;

        if (element) {
            element = me[element];
            if (element && element.un) {
                if (isClear || (managedListener.item === item && managedListener.ename === ename && (!fn || managedListener.fn === fn) && (!scope || managedListener.scope === scope))) {
                    element.un(managedListener.ename, managedListener.fn, managedListener.scope);
                    if (!isClear) {
                        Ext.Array.remove(me.managedListeners, managedListener);
                    }
                }
            }
        } else {
            return me.mixins.observable.removeManagedListenerItem.apply(me, arguments);
        }
    },
    //模板方法：被添加到容器后
    //缺省实现：发布added事件
    onAdded : function(container, pos) {
        var me = this;
        me.ownerCt = container;
        if (me.hasListeners.added) {
            me.fireEvent('added', me, container, pos);
        }
    },
    //模板方法：被从容器中移除后
    //缺省实现：发布removed事件
    onRemoved : function(destroying) {
        var me = this;
        if (me.hasListeners.removed) {
            me.fireEvent('removed', me, me.ownerCt);
        }
        delete me.ownerCt;     //删除父容器属性
        delete me.ownerLayout; //删除父布局属性
    },
    //生命周期模板方法：在销毁前的动作
    //返回false可以取消销毁
    beforeDestroy : Ext.emptyFn,
    //模板方法，当修改了组件大小后
    onResize : Ext.emptyFn,
    //设置组件大小
    setSize : function(width, height) {
        var me = this;
        if (width && typeof width == 'object') {
            height = width.height;
            width  = width.width;
        }
        if (typeof width == 'number') {
            me.width = Ext.Number.constrain(width, me.minWidth, me.maxWidth);
        } else if (width === null) {
            delete me.width;
        }
        if (typeof height == 'number') {
            me.height = Ext.Number.constrain(height, me.minHeight, me.maxHeight);
        } else if (height === null) {
            delete me.height;
        }
        //如果尚未渲染，仅仅设置属性即可，否则：
        if (me.rendered && me.isVisible()) {
            //如果改变了当前组件的大小，那么就不能作为布局的根，因为对父容器会产生影响
            //更新布局
            me.updateLayout({
                isRoot: false
            });
        }
        return me;
    },
    //判断当前组件是否布局的根    
    isLayoutRoot: function() {
        var me = this,
            ownerLayout = me.ownerLayout;
        //对于浮动组件，或者明确设置了_isLayoutRoot的组件，返回true
        if (!ownerLayout || me._isLayoutRoot || me.floating) {
            return true;
        }
        //让父布局判断当前组件是否布局根
        return ownerLayout.isItemLayoutRoot(me);
    },
    //判断布局是否被暂停
    //只要当前组件或者其任意布局祖代的布局被暂停，则返回true
    isLayoutSuspended: function () {
        var comp = this,
            ownerLayout;
        while (comp) {
            if (comp.layoutSuspendCount || comp.suspendLayout) {
                return true;
            }

            ownerLayout = comp.ownerLayout;
            if (!ownerLayout) {
                break;
            }
            comp = ownerLayout.owner;
        }

        return false;
    },
    //更新当前组件的布局
    updateLayout: function (options) {
        var me = this,
            defer,
            isRoot = options && options.isRoot;

        if (!me.rendered || me.layoutSuspendCount || me.suspendLayout) {
            return;
        }
        //对于隐藏组件，取消布局
        if (me.hidden) {
            Ext.AbstractComponent.cancelLayout(me);
        } else if (typeof isRoot != 'boolean') {
            isRoot = me.isLayoutRoot();
        }
        // 如果当前组件不是布局根，且父布局关心当前组件的尺寸变化，那么父布局会统一处理
        if (isRoot || !me.ownerLayout || !me.ownerLayout.onContentChange(me)) {
            //否则，自行处理
            if (!me.isLayoutSuspended()) {
                defer = (options && options.hasOwnProperty('defer')) ? options.defer : me.deferLayouts;
                Ext.AbstractComponent.updateLayout(me, defer); //调用静态函数执行布局
            }
        }
    },
    //执行组件布局，该方法开放调用，任何时候，改变组件内容均需要考虑调用
    doComponentLayout : function() {
        this.updateLayout();
        return this;
    },
    //重设布局对象
    setComponentLayout : function(layout) {
        var currentLayout = this.componentLayout;//当前布局是componentLayout属性
        if (currentLayout && currentLayout.isLayout && currentLayout != layout) {
            currentLayout.setOwner(null); //取消当前布局对象的关联
        }
        this.componentLayout = layout;
        layout.setOwner(this); //注意布局对象是被组件独占的
    },
    //获取当前的组件布局，如果不存在，则创建之
    getComponentLayout : function() {
        var me = this;
        if (!me.componentLayout || !me.componentLayout.isLayout) {
            me.setComponentLayout(Ext.layout.Layout.create(me.componentLayout, 'autocomponent'));
        }
        return me.componentLayout;
    },
    //组件布局后调用的模板方法
    //缺省实现
    afterComponentLayout: function(width, height, oldWidth, oldHeight) {
        var me = this,
            floaters, len, i, floater;
        if (++me.componentLayoutCounter === 1) {
            me.afterFirstLayout(width, height);//调用第一次组件布局的模板方法
        }
        //如果浮动子组件没有显示，立即显示
        if (me.floatingItems) {
            floaters = me.floatingItems.items;
            len = floaters.length;
            for (i = 0; i < len; i++) {
                floater = floaters[i];
                if (!floater.rendered && floater.autoShow) {
                    floater.show();
                }
            }
        }
        //如果大小发生改变，发布resize事件
        if (me.hasListeners.resize && (width !== oldWidth || height !== oldHeight)) {
            me.fireEvent('resize', me, width, height, oldWidth, oldHeight);
        }
    },
    //布局前执行的模板方法，返回false禁止布局
    beforeComponentLayout: function(width, height) {
        return true;
    },
    //设置组件的位置
    setPosition : function(x, y, animate) {
        var me = this,
            pos = me.beforeSetPosition.apply(me, arguments);//设置位置前模板方法
        if (pos && me.rendered) {
            pos = me.convertPosition(pos);
            if (pos.left !== me.el.getLeft() || pos.top !== me.el.getTop()) {
                if (animate) { //可选的动画
                    me.stopAnimation();
                    me.animate(Ext.apply({
                        duration: 1000,
                        listeners: {
                            afteranimate: Ext.Function.bind(me.afterSetPosition, me, [pos.left, pos.top])
                        },
                        to: pos
                    }, animate));
                } else {
                    if (pos.left !== undefined && pos.top !== undefined) {
                        me.el.setLeftTop(pos.left, pos.top);
                    } else if (pos.left !== undefined) {
                        me.el.setLeft(pos.left);
                    } else if (pos.top !==undefined) {
                        me.el.setTop(pos.top);
                    }
                    me.afterSetPosition(pos.left, pos.top);
                }
            }
        }
        return me;
    },
    //设置位置前模板
    beforeSetPosition: function (x, y, animate) {
        var pos, x0;
        if (!x || Ext.isNumber(x)) {
            pos = { x: x, y : y, anim: animate };
        } else if (Ext.isNumber(x0 = x[0])) {
            pos = { x : x0, y : x[1], anim: y };
        } else {
            pos = { x: x.x, y: x.y, anim: y };
        }
        pos.hasX = Ext.isNumber(pos.x);
        pos.hasY = Ext.isNumber(pos.y);
        this.x = pos.x;
        this.y = pos.y;
        return (pos.hasX || pos.hasY) ? pos : null;
    },
    //设置位置后模板
    //缺省实现：如果支持，触发move事件
    afterSetPosition: function(x, y) {
        var me = this;
        me.onPosition(x, y);
        if (me.hasListeners.move) {
            me.fireEvent('move', me, x, y);
        }
    },
    //组件位置变化后执行的模板方法
    onPosition: Ext.emptyFn,
    //设置宽高，就是在el元素上进行操作
    setWidth : function(width) {
        return this.setSize(width);
    },
    setHeight : function(height) {
        return this.setSize(undefined, height);
    },
    getSize : function() {
        return this.el.getSize();
    },
    getWidth : function() {
        return this.el.getWidth();
    },
    getHeight : function() {
        return this.el.getHeight();
    },
    //设置当前组件在父容器的停靠位置
    setDocked : function(dock, layoutParent) {
        var me = this;

        me.dock = dock;
        if (layoutParent && me.ownerCt && me.rendered) {
            me.ownerCt.updateLayout();//导致更新父容器的布局
        }
        return me;
    },
    //生命周期模板方法：销毁后执行
    //缺省实现
    onDestroy : function() {
        var me = this;
        if (me.monitorResize && Ext.EventManager.resizeEvent) {
            Ext.EventManager.resizeEvent.removeListener(me.setSize, me);
        }
        //销毁组件布局、遮罩、浮动后代
        Ext.destroy(
            me.componentLayout,
            me.loadMask,
            me.floatingDescendants
        );
    },
    //销毁组件
    destroy : function() {
        var me = this,
            selectors = me.renderSelectors,
            selector,
            el;
        if (!me.isDestroyed) {
            //如果beforedestroy事件处理返回false，则不销毁
            if (!me.hasListeners.beforedestroy || me.fireEvent('beforedestroy', me) !== false) {
                me.destroying = true;
                me.beforeDestroy();//销毁前模板
                //对于浮动组件
                if (me.floating) {
                    delete me.floatParent;//清除浮动父组件引用
                    //从ZIndexManager移除自己
                    if (me.zIndexManager) {
                        me.zIndexManager.unregister(me);
                    }
                } else if (me.ownerCt && me.ownerCt.remove) {
                    me.ownerCt.remove(me, false);
                }
                me.onDestroy();//销毁后模板
                Ext.destroy(me.plugins); //尝试销毁所有插件
                //发布销毁事件
                if (me.hasListeners.destroy) {
                    me.fireEvent('destroy', me);
                }
                //接触组件注册
                Ext.ComponentManager.unregister(me);
                //销毁组件状态
                me.mixins.state.destroy.call(me);
                //清除组件监听器
                me.clearListeners();
                //确保在移除所有事件监听器后，清除所有对DOM元素的引用，避免内存泄漏
                if (me.rendered) {//如果尚未渲染，任何DOM结构都未创建，无需处理
                    if (!me.preserveElOnDestroy) {
                        me.el.remove(); //删除组件的顶级元素
                    }
                    me.mixins.elementCt.destroy.call(me); //删除所有childEls
                    if (selectors) {//如果配置了renderSelectors
                        for (selector in selectors) {
                            if (selectors.hasOwnProperty(selector)) {
                                el = me[selector];
                                //对于所有作为成员变量的元素，需要解除关系
                                if (el) {
                                    delete me[selector];
                                    el.remove();
                                }
                            }
                        }
                    }
                    delete me.el; //删除顶级元素
                    delete me.frameBody; //删除组件体
                    delete me.rendered;
                }
                me.destroying = false;
                me.isDestroyed = true;
            }
        }
    }
}, /*当组件类被创建后，执行的回调，this指向新创建的类*/function() {
    var AbstractComponent = this;
    //方法别名
    AbstractComponent.createAlias({
        on: 'addListener',
        prev: 'previousSibling',
        next: 'nextSibling'
    });
    //静态方法快捷方式
    Ext.resumeLayouts = function (flush) {
        AbstractComponent.resumeLayouts(flush);
    };
    Ext.suspendLayouts = function () {
        AbstractComponent.suspendLayouts();
    };

    Ext.batchLayouts = function(fn, scope) {
        AbstractComponent.suspendLayouts();
        fn.call(scope);
        AbstractComponent.resumeLayouts(true);
    };
});

该类是ExtJS的所有组件的基类，保护：

1. 基本的隐藏/显示逻辑
2. 基本的启用/禁用逻辑
3. 组件尺寸控制行为

在ExtJS中，每个组件类都具有一个称为xtype的别名，可以用于组件的延迟创建。Component类提供了一下成员：

Ext.create( 'Ext.Component', {
    constrain : true,
    floating : true,
    style : {
        backgroundColor : '#fff',
        border : '1px solid black'
    },
    html : '',
    draggable : {
        delegate : 'h1' //只有按在该元素上，组件才可以拖拽
    }
} ).show();

Ext.define('DynamicButtonText', {
    extend: 'Ext.button.Button',
    initComponent: function() {
        //准备动态按钮
        this.text = new Date();
        this.renderTo = Ext.getBody();
        //调用父类构造器
        this.callParent();
    }
});
Ext.onReady(function() {
    Ext.create('DynamicButtonText');
});

Ext.Component的代码分析如下：

Ext.define('Ext.Component', {
    alias: ['widget.component', 'widget.box'],
    extend: 'Ext.AbstractComponent',
    statics: {
        DIRECTION_TOP: 'top',
        DIRECTION_RIGHT: 'right',
        DIRECTION_BOTTOM: 'bottom',
        DIRECTION_LEFT: 'left',
        VERTICAL_DIRECTION_Re: /^(?:top|bottom)$/,
        INVALID_ID_CHARS_Re: /[\.,\s]/g
    },
    resizeHandles: 'all',
    floating: false,
    toFrontOnShow: true,
    hideMode: 'display',
    bubbleEvents: [],
    monPropRe: /^(?:scope|delay|buffer|single|stopEvent|preventDefault|stopPropagation|normalized|args|delegate)$/,
    
    constructor: function(config) {
        var me = this;
        config = config || {};
        if (config.initialConfig) {
            if (config.isAction) {
                //从Ext.Action初始化
                me.baseAction = config;
            }
            config = config.initialConfig;
        }
        else if (config.tagName || config.dom || Ext.isString(config)) {
            config = {
                applyTo: config,
                id: config.id || config
            };
        }
        me.callParent([config]);//调用覆盖版本
        if (me.baseAction){
            me.baseAction.addComponent(me);
        }
    },
    initComponent: function() {
        var me = this;
        me.callParent();
        if (me.listeners) {
            me.on(me.listeners);//添加监听器
            me.listeners = null;//移除配置项
        }
        me.enableBubble(me.bubbleEvents); //启用事件冒泡
        me.mons = [];
    },
    afterRender: function() {
        var me = this;
        me.callParent();
        //设置页面位置
        if (!(me.x && me.y) && (me.pageX || me.pageY)) {
            me.setPagePosition(me.pageX, me.pageY);
        }
    },
    beforeRender: function () {
        var me = this,
            floating = me.floating,
            cls;
        if (floating) {
            //处理浮动组件
            me.addCls(Ext.baseCSSPrefix + 'layer');
            cls = floating.cls;
            if (cls) {
                me.addCls(cls);
            }
        }
        return me.callParent(); //调用覆盖版本
    },
    //布局后模板
    afterComponentLayout: function(){
        this.callParent(arguments);
        if (this.floating) {
            //处理浮动组件
            this.onAfterFloatLayout();
        }
    },
    //构造浮动混入
    makeFloating : function (dom) {
        this.mixins.floating.constructor.call(this, dom);
    },
    wrapPrimaryEl: function (dom) {
        if (this.floating) {
            this.makeFloating(dom);
        } else {
            this.callParent(arguments);
        }
    },
    //初始化尺寸调整器
    initResizable: function(resizable) {
        var me = this;
        resizable = Ext.apply({
            target: me,
            dynamic: false,
            constrainTo: me.constrainTo || (me.floatParent ? me.floatParent.getTargetEl() : null),
            handles: me.resizeHandles
        }, resizable);
        resizable.target = me;
        me.resizer = new Ext.resizer.Resizer(resizable);
    },
    getDragEl: function() {
        return this.el; //被拖拽的元素
    },
    //初始化拖拽
    initDraggable: function() {
        var me = this,
            //如果拖拽目标不是封装元素本身，则从resizer.el创建一个简单组件作为拖拽目标
            dragTarget = (me.resizer && me.resizer.el !== me.el) ? me.resizerComponent = new Ext.Component({
                el: me.resizer.el,
                rendered: true,
                container: me.container
            }) : me,
            ddConfig = Ext.applyIf({
                el: dragTarget.getDragEl(),
                //拖拽限制范围
                constrainTo: me.constrain ? (me.constrainTo || (me.floatParent ? me.floatParent.getTargetEl() : me.el.getScopeParent())) : undefined
            }, me.draggable);
        if (me.constrain || me.constrainDelegate) {
            ddConfig.constrain = me.constrain;
            ddConfig.constrainDelegate = me.constrainDelegate;
        }
        //设置dd，即组件拖拽器（处理任何组件的drag行为的对象）
        me.dd = new Ext.util.ComponentDragger(dragTarget, ddConfig);
    },
    //滚动组件的targetEl
    scrollBy: function(deltaX, deltaY, animate) {
        var el;
        if ((el = this.getTargetEl()) && el.dom) {
            el.scrollBy.apply(el, arguments);
        }
    },
    //设置组件位置前的模板
    beforeSetPosition: function () {
        var me = this,
            pos = me.callParent(arguments),
            adj;

        if (pos) {
            adj = me.adjustPosition(pos.x, pos.y);
            pos.x = adj.x;
            pos.y = adj.y;
        }
        return pos || null;
    },
    //设置组件位置后的模板
    afterSetPosition: function(ax, ay) {
        this.onPosition(ax, ay);
        this.fireEvent('move', this, ax, ay);
    },
    //在指定位置显示组件
    showAt: function(x, y, animate) {
        var me = this;

        if (!me.rendered && (me.autoRender || me.floating)) {
            me.doAutoRender(); //如果尚未渲染，执行渲染
            me.hidden = true; //设置hidden状态，以便后续发布beforeshow、show事件
        }
        if (me.floating) {
            //对于浮动组件，设置位置
            me.setPosition(x, y, animate);
        } else {
            //否则，设置Page位置
            me.setPagePosition(x, y, animate);
        }
        me.show();
    },
    setPagePosition: function(x, y, animate) {
        var me = this,
            p,
            floatParentBox;

        if (Ext.isArray(x)) {
            y = x[1];
            x = x[0];
        }
        me.pageX = x;
        me.pageY = y;

        if (me.floating) {
            if (me.isContainedFloater()) {
                //在容器中注册的浮动组件，必须把x,y设置为相对于容器的值
                floatParentBox = me.floatParent.getTargetEl().getViewRegion();
                if (Ext.isNumber(x) && Ext.isNumber(floatParentBox.left)) {
                    x -= floatParentBox.left;
                }
                if (Ext.isNumber(y) && Ext.isNumber(floatParentBox.top)) {
                    y -= floatParentBox.top;
                }
            } else {
                p = me.el.translatePoints(x, y); //将文档坐标转换为页面坐标
                x = p.left;
                y = p.top;
            }

            me.setPosition(x, y, animate);
        } else {
            p = me.el.translatePoints(x, y);    //将文档坐标转换为页面坐标
            me.setPosition(p.left, p.top, animate);
        }
        return me;
    },
    //得到组件的位置
    getPosition: function(local) {
        var me = this,
            el = me.el,
            xy,
            isContainedFloater = me.isContainedFloater(),
            floatParentBox;

        //对于非浮动组件，本地位置就是相对于el的offsetParent的位置偏移量
        if ((local === true) && !isContainedFloater) {
            return [el.getLocalX(), el.getLocalY()];
        }
        xy = me.el.getXY();
        //对于浮动组件，本地位置就是相对于容器的targetEl的位置偏移量
        if ((local === true) && isContainedFloater) {
            floatParentBox = me.floatParent.getTargetEl().getViewRegion();
            xy[0] -= floatParentBox.left;
            xy[1] -= floatParentBox.top;
        }
        return xy;
    },
    //显示组件
    show: function(animateTarget, cb, scope) {
        var me = this,
            rendered = me.rendered;

        if (rendered && me.isVisible()) {
            if (me.toFrontOnShow && me.floating) {
                //如果已渲染并且是可见的，带到最前面
                me.toFront();
            }
        } else {
            //触发beforeshow，如果返回false，什么都不做
            if (me.fireEvent('beforeshow', me) !== false) {
                me.hidden = false;
                if (!rendered && (me.autoRender || me.floating)) {
                    //如果尚未渲染，执行渲染
                    me.doAutoRender();
                    rendered = me.rendered;
                }
                if (rendered) {
                    //如果渲染成功
                    me.beforeShow();  //beforeShow模板
                    me.onShow.apply(me, arguments);//onShow模板
                    me.afterShow.apply(me, arguments);//afterShow模板
                }
            } else {
                me.onShowVeto();
            }
        }
        return me;
    },
    onShowVeto: Ext.emptyFn,
    //生命周期模板方法：显示前，渲染后
    beforeShow: Ext.emptyFn,
    //生命周期模板方法：显示时
    onShow: function() {
        var me = this;
        me.el.show(); //底层HTML元素的显示
        me.callParent(arguments);
        if (me.floating) {
            //处理浮动组件的尺寸
            if (me.maximized) {
                me.fitContainer();
            }
            else if (me.constrain) {
                me.doConstrain();
            }
        }
    },
    //生命周期模板方法：显示后
    afterShow: function(animateTarget, cb, scope) {
        var me = this,
            fromBox,
            toBox,
            ghostPanel;
        animateTarget = animateTarget || me.animateTarget;
        if (!me.ghost) {
            animateTarget = null;
        }
        if (animateTarget) {
            //处理动画
            animateTarget = animateTarget.el ? animateTarget.el : Ext.get(animateTarget);
            toBox = me.el.getBox();
            fromBox = animateTarget.getBox();
            me.el.addCls(Ext.baseCSSPrefix + 'hide-offsets');
            ghostPanel = me.ghost();
            ghostPanel.el.stopAnimation();
            ghostPanel.el.setX(-10000);
            ghostPanel.el.animate({
                from: fromBox,
                to: toBox,
                listeners: {
                    afteranimate: function() {
                        delete ghostPanel.componentLayout.lastComponentSize;
                        me.unghost();
                        me.el.removeCls(Ext.baseCSSPrefix + 'hide-offsets');
                        //动画完毕后，继续调用下一模板
                        me.onShowComplete(cb, scope);
                    }
                }
            });
        }
        else {
            //直接调用下一模板
            me.onShowComplete(cb, scope);
        }
    },
    //生命周期模板方法：显示（包括动画效果）完成
    onShowComplete: function(cb, scope) {
        var me = this;
        if (me.floating) {
            me.toFront();
            me.onFloatShow();
        }
        Ext.callback(cb, scope || me);
        me.fireEvent('show', me);  //发布show事件
        delete me.hiddenByLayout;
    },
    //隐藏组件
    hide: function() {
        var me = this;
        me.showOnParentShow = false;
        //触发beforehide事件，如果false什么都不做
        if (!(me.rendered && !me.isVisible()) && me.fireEvent('beforehide', me) !== false) {
            me.hidden = true;
            if (me.rendered) {
                //如果已经渲染过，则调用onHide模板
                me.onHide.apply(me, arguments);
            }
        }
        return me;
    },
    //生命周期模板方法：隐藏
    onHide: function(animateTarget, cb, scope) {
        var me = this,
            ghostPanel,
            toBox;
        animateTarget = animateTarget || me.animateTarget;
        if (!me.ghost) {
            animateTarget = null;
        }
        if (animateTarget) {
            //处理动画
            animateTarget = animateTarget.el ? animateTarget.el : Ext.get(animateTarget);
            ghostPanel = me.ghost();
            ghostPanel.el.stopAnimation();
            toBox = animateTarget.getBox();
            toBox.width += 'px';
            toBox.height += 'px';
            ghostPanel.el.animate({
                to: toBox,
                listeners: {
                    afteranimate: function() {
                        delete ghostPanel.componentLayout.lastComponentSize;
                        ghostPanel.el.hide();
                        me.afterHide(cb, scope);//动画完毕后，继续调用下一模板
                    }
                }
            });
        }
        me.el.hide(); //隐藏组件的元素
        if (!animateTarget) {
            me.afterHide(cb, scope);//直接调用下一模板
        }
    },
    //声明周期模板方法：隐藏后
    afterHide: function(cb, scope) {
        var me = this;
        delete me.hiddenByLayout;
        Ext.AbstractComponent.prototype.onHide.call(this);
        Ext.callback(cb, scope || me);
        me.fireEvent('hide', me); //发布hide事件
    },
    //声明周期模板方法：销毁时
    onDestroy: function() {
        var me = this;
        if (me.rendered) {
            //如果已经渲染，则销毁组件附加的对象
            Ext.destroy(
                me.proxy,
                me.proxyWrap,
                me.resizer,
                me.resizerComponent
            );
        }
        delete me.focusTask; //删除聚焦任务
        me.callParent();
    },
    //处理组件聚焦
    focus: function(selectText, delay) {
        var me = this,
            focusEl,
            focusElDom,
            containerScrollTop;
        if (delay) {
            //延迟聚焦
            if (!me.focusTask) {
                me.focusTask = new Ext.util.DelayedTask(me.focus);
            }
            me.focusTask.delay(Ext.isNumber(delay) ? delay : 10, null, me, [selectText, false]);
            return me;
        }
        if (me.rendered && !me.isDestroyed && me.isVisible(true) && (focusEl = me.getFocusEl())) {
            if (focusEl.isComponent) {
                //聚焦行为代理给子代组件
                return focusEl.focus(selectText, delay);
            }
            if ((focusElDom = focusEl.dom)) {
                if (focusEl.needsTabIndex()) {
                    focusElDom.tabIndex = -1; //设置tabIndex
                }
                if (me.floating) {
                    containerScrollTop = me.container.dom.scrollTop;
                }
                //直接使用原生HTML聚焦
                focusEl.focus();
                if (selectText === true) {
                    focusElDom.select();
                }
            }
            if (me.floating) {
                //对于浮动组件，聚集意味着位于最前
                me.toFront(true);
                if (containerScrollTop !== undefined) {
                    me.container.dom.scrollTop = containerScrollTop;
                }
            }
        }
        return me;
    },
    //取消延迟的聚焦
    cancelFocus: function() {
        var task = this.focusTask;
        if (task) {
            task.cancel();
        }
    },
    //失焦处理
    blur: function() {
        var focusEl;
        if (this.rendered && (focusEl = this.getFocusEl())) {
            focusEl.blur();
        }
        return this;
    },
    //当大小改变时执行的模板方法
    onResize: Ext.emptyFn,
    //获取事件传播的目标
    getBubbleTarget: function() {
        return this.ownerCt || this.floatParent;
    },
    //得到“内容目标”
    getContentTarget: function() {
        return this.el;
    },
    //克隆组件
    cloneConfig: function(overrides) {
        overrides = overrides || {};
        var id = overrides.id || Ext.id(),
            cfg = Ext.applyIf(overrides, this.initialConfig),//获取当前组件的初始配置
            self;

        cfg.id = id;

        self = Ext.getClass(this); //获取当前组件的类型
        return new self(cfg); //调用构造器
    },
    //向上传播的执行一函数
    bubble: function(fn, scope, args) {
        var p = this;
        while (p) {
            if (fn.apply(scope || p, args || [p]) === false) {
                break;
            }
            p = p.getBubbleTarget();
        }
        return this;
    }
});

The post ExtJS 4的组件机制 appeared first on 绿色记忆.

ExtJS使用以Observable混入类为核心的观察者模式，提供了统一的事件发布、监听编程接口，把浏览器的原生事件统一抽象为EventObject。

ExtJS事件分成元素事件和组件事件两类：

1. 元素事件：在浏览器事件机制的基础上扩展而来的，匹配不同浏览器行为的差异性，提供统一的编程接口
2. 组件事件： 高层次的事件机制，组件事件可能由元素事件触发，也可能与之无关

除非指定监听器为延迟执行，ExtJS的事件监听器都是同步化执行的（即：fireEvent之后立即调用listener函数，而不是由浏览器“异步”的处理）

事件机制是用来处理无法预知何时会发生的动作的机制，比如用户单击网页链接，程序并不知道该动作何时发生，但当其发生之后应该跳转至其他页面或执行某种处理。网页中的每个HTML标签展现时都会生成DOM元素，当用户单击鼠标时，该鼠标事件就会通过操作系统事件机制传递到浏览器，接下来浏览器根据自身事件机制来判断用户单击了哪个元素， 并执行该元素已经注册的事件处理函数，然后判断其是否需要冒泡给父元素进行相关处理。 

该混入类为发布事件提供了统一的接口，子类应当具有一个events属性来包含其支持的事件，此外listeners属性则表示已经注册的监听器，Observable并不限制使用于元素或者组件，下面是该混入的简单用法示例：

Ext.define( 'Employee', {
    mixins : {
        observable : 'Ext.util.Observable'
    },
    constructor : function( config )
    {
        //构造该混入
        this.mixins.observable.constructor.call( this, config );
        //添加支持的事件
        this.addEvents( 'fired', 'quit' );
    }
} );
var xdz = new Employee( {
    name : employeeName,
    listeners : {
        fired : function()
        {
            //默认情况下this执行触发事件的对象，即xdz
            console.log( this.name + " was fired." );
        }
    }
} );

 Observable提供了以下成员：

new Ext.panel.Panel({
    listeners: {
        click: {
            element: 'el', //绑定组件封装元素的click事件
            fn: function(){ console.log('click el'); }
        },
        dblclick: {
            element: 'body',//绑定面板体元素的dblclick事件
            fn: function(){ console.log('dblclick body'); }
        }
    }
});

gp.on({
    cellClick: {fn: 'onCellClick', scope: this, single: true},
    mouseover: {fn: 'onMouseOver', scope: panel}
});

this.relayEvents(this.getStore(), ['load']);

Ext.util.Observable.observe(Ext.data.Connection);
//集中处理事件
Ext.data.Connection.on('beforerequest', function(con, options) {
    console.log('Ajax request made to ' + options.url);
});

就像Ext.Element封装了DOM节点一样，单例EventObject封装了浏览器原生的事件对象，屏蔽了跨浏览器的不一致性，EventObject的简单用法如下：

function clickHandler( e, t )
{
    e.preventDefault(); //阻止默认行为
    var target = e.getTarget(); //事件源
}
//添加元素的事件监听器
var myDiv = Ext.get( "myDiv" );
myDiv.on( "click", clickHandler );
Ext.EventManager.on( "myDiv", 'click', clickHandler );

提供了以下成员：

//处理任何子元素的事件
Ext.getBody().on('click', function(e){
    if(e.within('some-el')){
        console.log('Clicked on a child of some-el!');
    }
});
//处理元素本身，不处理任何子元素的事件
Ext.getBody().on('click', function(e,t){
    if((t.id == 'some-el') && !e.within(t, true)){
        console.log('Clicked directly on some-el!');
    }
});

The post ExtJS 4的事件系统 appeared first on 绿色记忆.

ExtJS 4引入MVC架构，可以用来创建ExtJS应用程序，与经典的Ext.onReady回调方式很不相同。

在开发ExtJS应用时，往往习惯于把所有JavaScript代码编写在单个文件中，生产环境下的应用通常都比较复杂，可能包括了面板、表单、表格、布局、模型、存储等多种组件的组合。大量的组件代码导致JS文件急剧膨胀，难以维护，因此很有必要根据职责的不同把代码划分到不同的文件中，提高代码的可重用性。

在ExtJS 4以前的版本下，如何组织代码由开发人员自行决定，而MVC则是ExtJS 4提供的模式化选择。在ExtJS看来，MVC代表：

1. Model：包含一系列字段、及其数据的集合，由Model类表示，亦可使用Store类来加载、保存数据
2. View：可以是某种视觉组件，例如Grid、Tree、Form
3. Controllers：包含了一些动作逻辑，例如用户点击按钮时需要执行的操作

在这里我们先创建一个老式的ExtJS应用，并在后面尝试将其迁移到MVC架构下，以阐述ExtJS MVC的用法。

该应用包含一个GRID和一个详情面板，JavaScript代码全部放在app.js中：

Ext.onReady( function()
{
    Ext.define( 'Book', {
        extend : 'Ext.data.Model',
        fields : [
            'id', 'title', 'pages', 'numChapters', 'topic', 'publisher', 'isbn', 'isbn13'
        ]
    } );
    var store = Ext.create( 'Ext.data.Store', {
        model : 'Book',
        proxy : {
            type : 'ajax',
            url : 'data/books.json'
        }
    } );
    var grid = Ext.create( 'Ext.grid.Panel', {
        store : store,
        title : 'Books',
        columns : [
            {
                text : "Title",
                width : 120,
                dataIndex : 'title',
                sortable : true
            }, {
                text : "Pages",
                flex : 1,
                dataIndex : 'pages',
                sortable : true
            }, {
                text : "Topic",
                width : 115,
                dataIndex : 'topic',
                sortable : true
            }, {
                text : "Publisher",
                width : 100,
                dataIndex : 'publisher',
                sortable : true
            }
        ],
        viewConfig : {
            forceFit : true
        },
        region : 'center'
    } );
    var details = Ext.create( 'Ext.panel.Panel', {
        id : 'bookDetail',
        bodyPadding : 7,
        bodyStyle : "background: #ffffff;",
        html : 'Please select a book to see additional details.',
        height : 150,
        split : true,
        region : 'south'
    } );
    var bookTplMarkup = [
        '<b>Title:</b> {title}<br/>',
        '<b>Pages:</b> {pages}<br/>',
        '<b>No Chapters:</b> {numChapters}<br/>',
        '<b>Topic:</b> {topic}<br/>',
        '<b>Publisher:</b> {publisher}<br/>',
        '<b>ISBN:</b> {isbn}<br/>',
        '<b>ISBN 13:</b> {isbn13}<br/>'
    ];
    var bookTpl = Ext.create( 'Ext.Template', bookTplMarkup );
    grid.getSelectionModel().on( 'selectionchange', function( sm, selectedRecord )
    {
        if ( selectedRecord.length )
        {
            var detailPanel = Ext.getCmp( 'bookDetail' );
            bookTpl.overwrite( detailPanel.body, selectedRecord[0].data );
        }
    } );
    Ext.create( 'Ext.container.Viewport', {
        frame : true,
        layout : 'border',
        items : [
            grid, details
        ]
    } );
    store.load();
} );

 HTML代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MVC Architecture</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
</body>
</html>

在这里我们使用MVC重新实现上一段中的应用。下图描述了JavaScript代码的目录结构：

 我们可以看到，所有的JavaScript代码被分配在app文件夹中，它们的职责划分如下：

1. app.js：包装整个应用程序，通常我们使用单页面方式来开发MVC应用
2. controller：控制器类存放目录
3. model：模型类存放目录
4. store：存储类存放目录
5. view：视图类存放目录
6. data：由于本示例不合服务器交互，该目录存放JSON数据

为了使用动态加载，以下ExtJS SDK文件需要被引入到extjs目录下：

1. ext-debug.js或者ext.js：用于ExtJS自举
2. resources目录：包含样式定义文件
3. src目录：包含ExtJS所有组件的源代码

修改后的HTML代码如下：

<head>
<title>MVC Architecture</title>
<link rel="stylesheet" type="text/css" href="exts/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/ext-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
</body>
</html>

 app.js为MVC骨架，内容如下：

Ext.require( 'Ext.container.Viewport' );
Ext.application( {
    name : 'App',   //可选的应用的名称，也在全局创建了变量App，会作为所有模型、视图、存储、控制器的名字空间
    appFolder : 'app', //应用程序组件存放位置
    controllers: ['Books'], //声明该应用使用的控制器
    launch : function() //应用创建后自动执行的动作，必须覆写
    {
        Ext.create( 'Ext.container.Viewport', { 
            //所有组件均放置于该Viewport中
        } );
    }
} );

//注意类名于目录结构限定的名字空间一致
Ext.define( 'App.controller.Books', {
    extend : 'Ext.app.Controller',
    init : function()
    {
        //在App的launch之前执行
    }
} );

控制器类继承自Ext.app.Controller，控制器负责与Store、View通信，并在特定事件发生时执行对应的Action。 

控制器的init方法在App.launch方法之前执行，可以在这里编写所有需要在创建Viewport前执行的代码，例如：

1. 实现与视图交互的逻辑，主要是相关的事件监听
2. 加载数据
3. 其它业务逻辑

修改上面编写的控制器为：

Ext.define( 'App.controller.Books', {
    extend : 'Ext.app.Controller',
    init : function()
    {
        this.control( {
            //对于viewport的直接子panel，监听其render事件
            'viewport > panel' : {
                render : this.onPanelRendered
            }
        } );
    },
    onPanelRendered : function()
    {
    }
} );

使用control方法可以注册对视图组件生命周期的监听器，在这里，我们监听Viewport子面板的render事件。 

模型类：

//注意类名于目录结构限定的名字空间一致
Ext.define( 'App.model.Book', {
    extend : 'Ext.data.Model',
    fields : [
        'id', 'title', 'pages', 'numChapters', 'topic', 'publisher', 'isbn', 'isbn13'
    ]
} );

存储类：

Ext.define( 'App.store.Book', {
    extend : 'Ext.data.Store',
    model : 'App.model.Book',
    proxy : {
        type : 'ajax',
        url : 'data/books.json'
    }
} );

Ext.define( 'App.view.book.Grid', {
    extend : 'Ext.grid.Panel',
    alias : 'widget.bookList',
    title : 'Books',
    initComponent : function()
    {
        this.store = 'Book';
        this.columns = [
            {
                text : "Title",
                width : 120,
                dataIndex : 'title',
                sortable : true
            }, {
                text : "Pages",
                flex : 1,
                dataIndex : 'pages',
                sortable : true
            }, {
                text : "Topic",
                width : 115,
                dataIndex : 'topic',
                sortable : true
            }, {
                text : "Publisher",
                width : 100,
                dataIndex : 'publisher',
                sortable : true
            }
        ];
        this.viewConfig = {
            forceFit : true
        };
        this.callParent( arguments );
    }
} );

Ext.define( 'App.view.book.DetailPanel', {
    extend : 'Ext.Panel',
    alias : 'widget.detailPanel',  //xtype别名
    bookTplMarkup : [  //作为实例变量来定义，而不是全局变量
        '<b>Title:</b> {title}<br/>',
        '<b>Pages:</b> {pages}<br/>',
        '<b>No Chapters:</b> {numChapters}<br/>',
        '<b>Topic:</b> {topic}<br/>',
        '<b>Publisher:</b> {publisher}<br/>',
        '<b>ISBN:</b> {isbn}<br/>',
        '<b>ISBN 13:</b> {isbn13}<br/>'
    ],
    startingMarkup : 'Please select a book to see additional details.',
    bodyPadding : 7,
    initComponent : function()
    {
        this.tpl = Ext.create( 'Ext.Template', this.bookTplMarkup );
        this.html = this.startingMarkup;
        this.bodyStyle = {
            background : '#ffffff'
        };
        this.callParent( arguments );
    },
    updateDetail : function( data )  //供控制器调用，更新此视图组件
    {
        this.tpl.overwrite( this.body, data );
    }
} );

 同时，修改应用骨架、控制器类为最终版本：

Ext.require( 'Ext.container.Viewport' );
Ext.application( {
    name : 'App',
    appFolder : 'app',
    controllers : [ 'Books'],
    launch : function()
    {
        Ext.create( 'Ext.container.Viewport', {
            layout : 'fit',
            items : [
                {
                    xtype : 'panel',
                    title : 'Books',
                    items : [
                        {
                            xtype : 'booklist'
                        }, {
                            xtype : 'detailPanel'
                        }
                    ]
                }
            ]
        } );
    }
} );

Ext.define( 'App.controller.Books', {
    extend : 'Ext.app.Controller',
    stores : [ 'Book' ],  //不需要声明完整的名称，ExtJS会自动在当前App的名字空间、约定目录下寻找
    models : [ 'Book' ],
    views : [ 'book.Grid', 'book.DetailPanel' ],  //控制器可以控制的视图的列表
    refs : [ //该配置用于外部引用控制器内的视图对象，使用Ext.ComponentQuery查询来获取视图
        {
            //变量名，可以直接使用Getter获取
            ref : 'panel',
            //组件选择符
            selector : 'detailPanel'
        }
    ],
    init : function()
    {
        this.getBookStore().load();  //getBookStore是自动生成的方法，等价于this.getStore('Book').load();
        this.control( {
            //控制ViewPort下的bookList（表格）的dataview组件
            'viewport > bookList dataview' : {
                itemclick : this.bindGridToPanel
            }
        } );
    },
    bindGridToPanel : function( grid, record )
    {
        //直接使用Getter获取详情面板，并调用其方法更新视图
        this.getPanel().updateDetail( record.data );
    }
} ); 

声明在stores、views、models配置项中的对象，可以使用控制器类自动生成getter方法访问，这些方法包括两类：

1. 其中一类是形如getName[Store|View|Model]()的方法，其中Name是配置项中声明的组件的名称。
2. 另外一些带单个形参的getModel、getStore、getView方法，使用时通过参数传递组件的名称：

1. 创建Model、Store、View类（扩展已有UI组件）
2. 在View类中不会执行任何操作（事件句柄），View只是提供方法，让控制器调用后改变视图
3. 在Controller中列出其需要使用的Model、Store、View
4. 注意Controller自动生成很多getter方法
5. 为了方便的在Controller中获取View的引用，可以使用ref配置项
6. 使用control函数声明针对View、Components的事件监听
7. 注意Controller的init在App的launch之前执行

如果为Model声明关联（associations），则必须使用关联目标的全名：

Ext.define( 'App.model.Author', {
    extend : 'Ext.data.Model',
    fields : [
        {
            name : 'id',
            type : 'int'
        }, {
            name : 'name',
            type : 'string'
        }
    ],
    hasMany : {
        model : 'App.model.Book',   //如果仅仅写'Book'会出错
        foreignKey : 'authorId',
        name : 'books'
    },
    proxy : {
        type : 'ajax',
        url : 'data/authors/1.json',
        reader : {
            type : 'json',
            root : 'authors'
        }
    }
} );

Sencha SDK tools是ExtJS官方提供的开发套件，它可以生成JSB3（(JSBuilder file format)）格式的JavaScript依赖关系，并且依此生成最小化的运行时JavaScript文件，便于部署。

使用如下的命令可以生成JSB依赖文件：

sencha create jsb -a index.html -p app.js
rem 亦可指向服务器上的HTML文件
sencha create jsb -a http://localhost:8080/ext-theme/index.html -p app.jsb3

上述命令会生成一个app.jsb3文件，其内容如下：

{
    "projectName" : "Project Name",
    "licenseText" : "Copyright(c) 2011 Company Name",
    "builds" : [
        {
            "name" : "All Classes",
            "target" : "all-classes.js",
            "options" : {
                "debug" : true
            },
            "files" : [
                {
                    "path" : "extjs/src/util/",
                    "name" : "Observable.js"
                }, {
                    "path" : "extjs/src/data/",
                    "name" : "Association.js"
                }, {
                    "path" : "extjs/src/data/",
                    "name" : "Operation.js"
                }
            ]
        }, {
            "name" : "Application - Production",
            "target" : "app-all.js",
            "compress" : true,
            "files" : [
                {
                    "path" : "",
                    "name" : "app.js"
                }
            ]
        }
    ],
    "resources" : []
}

然后，执行命令：

sencha build -p app.jsb3 -d

会生成两个文件：

1. all-classes.js：包含应用程序用到的所有ExtJS类，未压缩，易于DEBUG
2. app-all.js：包含应用程序用到的所有ExtJS类、app.js，压缩版本

我们可以修改HTML，引用生成的JavaScript文件：

<html>
<head>
    <title>MVC Architecture</title>
    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
    <script type="text/javascript" src="extjs/ext.js"></script>
    <script type="text/javascript" src="app-all.js"></script>
</head>
<body>
</body>
</html>

The post ExtJS 4的MVC框架 appeared first on 绿色记忆.

在ExtJS 3中自定义主题相当复杂，可能需要探测每一个HTML元素，找到对应的CSS代码并修改，很多ExtJS 3组件使用了图片，可能需要手工修改这些图片才能满足新主题的配色需要。

ExtJS 4使用一些CSS3的特性来便利化主题定制，它是用了Sass、Compass，这些相关的工具可以在themes目录下找到。

到http://rubyinstaller.org/下载合适的版本并安装，也可以到ftp://ftp.ruby-lang.org/pub/ruby/binaries/mswin32/可以下载特定的Windows二进制版本。本文安装的是1.9.3版本，完成完毕后要设置好环境变量。

命令行输入：

gem install sass -v 3.2.5
gem install compass -v 0.12.2

rem 查看版本
compass -v
sass -v

创建一个Maven工程，名为ext-theme，把下载的ext-4.1.1-gpl重命名为extjs，放置到src/maven/webapp（以下称webapp）下，复制extjs/examples/themes/themes.js到webapp，并在同一目录新建一个HTML文档，内容如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Ext JS 4 Themes</title>
<!-- 下面是我们即将创建的自定义主题的样式表文件 -->
<link rel="stylesheet" type="text/css" href="resources/css/my-ext-theme.css" />
<script type="text/javascript" src="extjs/bootstrap.js"></script>
<script type="text/javascript" src="themes.js"></script>
</head>
<body>
</body>
</html>

复制webapp/extjs/resources/themes/templates/resources到webapp下，复制webapp/extjs/resources/themes/images到webapp/resources下。最终的目录结构如下图：

新建一个scss文件，内容如下：

$include-default: false;    /*创建一个紧凑的CSS，不包括全部的组件*/

/*添加自定义变量*/
$base-color: #ffaabb;    /*基础色调：粉红*/

@import 'compass';             /*需要导入的库和文件*/
@import 'ext4/default/all';    /*导入该目录下所有SCSS文件*/

/*需要包括的组件的列表*/
@include extjs-boundlist;
@include extjs-button;
@include extjs-btn-group;
@include extjs-datepicker;
@include extjs-colorpicker;
@include extjs-menu;
@include extjs-grid;
@include extjs-form;
    @include extjs-form-field;
    @include extjs-form-fieldset;
    @include extjs-form-file;
    @include extjs-form-checkboxfield;
    @include extjs-form-checkboxgroup;
    @include extjs-form-triggerfield;
    @include extjs-form-htmleditor;
@include extjs-panel;
@include extjs-qtip;
@include extjs-slider;
@include extjs-progress;
@include extjs-toolbar;
@include extjs-window;
@include extjs-messagebox;
@include extjs-tabbar;
@include extjs-tab;
@include extjs-tree;
@include extjs-drawcomponent;
@include extjs-viewport;

/*如果设置为true，那么图片的路径改为相对，即从ext-theme/resources/images里面寻找*/
$relative-image-path-for-uis: true;

 进入my-ext-theme.scss所在目录，执行以下命令即可生成CSS文件，原有文件自动被覆盖：

cd D:\JavaEE\projects\eclipse\4.3.2\ext-theme\src\main\webapp\resources\sass
compass compile

刷新浏览器，可以看到页面上的ExtJS组件均是粉红色调了。 

在目录ext-theme/extjs/resources/themes/stylesheets/ext4/default/variables中，包含若干scss文件，定义了所有可用的变量。例如_panel.scss中包含以下变量：

// ===============================
// ========= BASE PANEL ==========
// ===============================
/*从变量名称上很容易看出其与CSS属性的对应关系：$panel-border-radius 对应了 border-radius*/
$panel-border-radius: null !default;
$panel-border-width: 1px !default;
$panel-base-color: adjust-color($base-color, $hue: 0deg, $saturation: 0.542%, $lightness: 7.843%) !default; //#DFE8F6
$panel-border-color: adjust-color($base-color, $hue: 0deg, $saturation: 7.644%, $lightness: -8.627%) !default;

如果需要修改这些变量的值，只需要在my-ext-theme.scss中进行覆盖：

$panel-border-radius: 3px;      //圆角边框
$panel-header-font-size: 14px;  //放大字体

重新执行compass compile命令，即可看到修改后的样式。

如果需要单独修改某个组件的外观，而让其它组件保留默认的样式，例如，在某些特殊场景下使用红色的Window，其它情况下使用默认的蓝色风格。ExtJS 4的某些组件支持Sass混入，可以满足这一需求。

在my-ext-theme.scss中添加以下代码：

@include extjs-window-ui(
    'custom',
    $ui-border-radius: 10px,
    $ui-border-color: darken($base-color, 40%),
    $ui-inner-border-color:darken($base-color, 30%),
    $ui-header-color: darken($base-color, 60%),
    $ui-body-border-color: darken($base-color, 30%),
    $ui-body-background-color: $window-body-background-color,
    $ui-body-color: darken($base-color, 30%),
    $ui-background-color: $base-color
);

上面的代码为Window组件定义了新的外观，可以采用如下的方式引用之：

Ext.createWidget( 'window', {
    ui : 'custom',  /*使用外观*/
    renderTo : 'customUIWindow',
    width : 150,
    height : 150,
    title : 'Window',
    bodyPadding : 5,
    html : 'Some text here',
    collapsible : false,
    closable : false
} ).show();

遗留浏览器不支持某些CSS3的特性，ExtJS使用图片为这些浏览器模拟圆角边框、渐变背景等特效。Slice Tool可以用来创建这些图片，它是Sencha SDK Tools的一部分。下载并安装SDK后，执行以下命令：

cd D:\JavaEE\projects\eclipse\4.3.2\ext-theme\src\main\webapp
rem -d ExtJS 4的根目录
rem -c 通过Sass/Compass创建的CSS文件的路径，将根据此CSS生成图片
rem -o 输出图片的目录
rem -v 详细输出各图片被创建的过程
sencha slice theme -d extjs -c resources/css/my-ext-theme.css -o resources/images –v

命令执行成功后，会输出Done字样。 

Slice Tool不能处理某些图标，这些图标需要手工使用Photoshop之类的工具处理。

The post 定制ExtJS 4主题 appeared first on 绿色记忆.

在ExtJS中，布局决定组件的位置如何分布、尺寸如何确定。ExtJS 4对整个布局体系进行了改造，布局引擎被重新编写，提高了性能。

ExtJS 4把布局分为两类：

1. 容器布局（Container Layout）：组织一个组件的HTML元素。包括Border Layout、Hbox Layout、Vbox Layout、Fit Layout等
2. 组件布局（Component Layout）：决定容器中子组件的大小、位置。包括Dock Layout、Toolbar Layout、Field Layout、TriggerField Layout等

在ExtJS 4中Auto Layout替换了ExtJS 3中的ContainerLayout，作为默认的容器布局类，如果容器没有指定布局，则自动使用Auto Layout。

Form Layout已经不再支持，并且由组件布局Field Layout（组件布局）代替。

容器布局的类层次如下图：

该布局的特点：

1. 依据声明的顺序，子组件自上而下的排列
2. 子组件需要显式声明宽高度
3. 改变容器的大小后，子组件不跟随改变大小（即使子组件指定百分比）
4. 如果容器的尺寸不够，子组件可能重叠在一起

代码示例：

var w = Ext.create( 'Ext.window.Window', {
    title : 'Auto Layout',
    width : 200,
    height : 320,
    layout : 'auto',
    defaults : {
        bodyStyle : 'padding:15px'
    },
    items : [
        { title : 'Panel 1', html : 'Panel 1', height : 60, width : 100 }, 
        { title : 'Panel 2', html : 'Panel 2', height : 80, width : 60 }, 
        { title : 'Panel 3', html : 'Panel 3', height : 65, width : 100 }, 
        { title : 'Panel 4', html : 'Panel 4', height : 70, width : '90%'}
    ]
} );
w.show();

 效果图：

该布局的特点：

1. 依据声明的顺序，子组件自上而下的排列
2. 子组件依据自身指定的锚定规则（anchor配置项）来确定尺寸、位置
3. 父容器大小变化后，子组件的大小自动变化

代码示例：

var w = Ext.create( 'Ext.window.Window', {
    title : 'Auto Layout',
    width : 250,
    height : 300,
    layout :'anchor',
    defaults : {
        bodyStyle : 'padding:15px'
    },
    items : [
        //正数表示宽高度占有容器的百分比
        { title : 'Panel 1', html: '100% 30%', anchor : '100% 30%'}, 
        { title : 'Panel 2', html: '80% 25%',  anchor : '80% 25%'}, 
        //负数表示宽高度 = 容器宽高度 - abs(负数)
        { title : 'Panel 3', html: '-70 20%',  anchor : '-70 20%' }, 
        //如果指定x、y，则可以指定其相对于前一个兄弟组件的位置偏移
        { title : 'Panel 4', html: '-30 25%',  anchor : '-30 25%', x : 0, y :0}
    ]
} );
w.show();

效果图：

该布局的特点：

1. 该布局继承自Anchor Layout，具有其特点
2. 子组件根据x、y设置，相对于父容器的body左上角进行绝对定位

代码示例：

var w = Ext.create( 'Ext.window.Window', {
    title : 'Absolute Layout',
    width : 250,
    height : 300,
    layout :'absolute',
    defaults : {
        bodyStyle : 'padding:15px'
    },
    items : [
        { title : 'Panel 1', html: 'x: 10; y: 10 - anchor: 80% 80%', anchor:'80% 80%', x: 10, y: 10}
    ]
} );
w.show();

效果图：

该布局的特点：

1. 子组件水平的分布在容器内
2. 通过flex配置项，可以指定子组件如何划分水平方向的空白区域
3. 通过pack配置项，可以指定子组件如何在水平方向连续分布，支持值：start、center、end
4. 通过align配置项，可以决定子组件在垂直方向如何对齐（或伸展），支持值：stretch、stretchmax、top、middle

代码示例：

//例一：
var w = Ext.create( 'Ext.window.Window', {
    title : 'Hbox Layout',
    width : 500,
    height : 250,
    layout :{
        type : 'hbox',
        /**
         * 对齐方式，决定了纵向的高度与位置：
         * stretch ：自动伸展填满容器
         * stretchmax ：自动伸展，使所有子组件与最大高度子组件同高
         * top ：顶端对齐子组件（默认）
         * middle ：中部对齐子组件
         */
        align : 'middle'
    },
   
    items : [
        //flex用于设置子组件占有容器可用宽度（除去固定宽度组件占用的部分）的比例
        { title : 'Panel 1', html : 'flex:1', flex : 2, height : 100},
        { title : 'Panel 2', html : 'flex:2', flex : 1, height : 80},
        //该组件为固定宽度
        { title : 'Panel 3', html : 'width:100', width : 100, height : '50%'} 
    ]
} );
w.show();
//例二：
var w = Ext.create( 'Ext.window.Window', {
    title : 'Hbox Layout',
    width : 500,
    height : 250,
    layout :{
        type : 'hbox',
        /**
         * pack在任何一个子组件指定了flex时没有意义
         * start ：靠左对齐
         * center ：中间对齐
         * end ：靠右对齐
         */
        pack : 'end',
        align : 'middle',
        //为所有子组件外围添加的补白
        padding : '0 50 0 50'
    },
   
    items : [
        { title : 'Panel 1', html : 'flex:1<br>height : 100', height : 100},
        { title : 'Panel 2', html : 'flex:2<br>height : 80', height : 80},
        { title : 'Panel 3', html : 'width:100<br>height : 150', width : 100, height : 150} 
    ]
} );
w.show();

例一的效果图：

例二的效果图：

该布局的特点与Hbox非常类似，只是在排列方向上不同：

1. 子组件垂直的分布在容器内
2. 通过flex配置项，可以指定子组件如何划分水平方向的空白区域
3. 通过pack配置项，可以指定子组件如何在垂直方向连续分布，支持值：start、center、end
4. 通过align配置项，可以决定子组件在水平方向如何对齐（或伸展），支持值：stretch、stretchmax、left、center

代码示例：

var w = Ext.create( 'Ext.window.Window', {
    title : 'Vbox Layout',
    width : 250,
    height : 500,
    layout :{
        type : 'vbox',
        pack : 'end',
        align : 'center'
    },
   
    items : [
        { title : 'Panel 1', html : 'width:100,height:100',width:100, height : 100},
        { title : 'Panel 2', html : 'width:150,height:150',width:150, height : 150},
        { title : 'Panel 3', html : 'width:120,height:120', width : 120, height : 120} 
    ]
} );
w.show();

效果图：

该布局是Vbox布局的子类，其特点为：

1. 每次只显示一个子组件
2. 可以展开某个处于收缩状态的子组件

代码示例：

var w = Ext.create( 'Ext.window.Window', {
    title : 'Accordion Layout',
    width : 200,
    height : 400,
    layout : 'accordion',
    items : [
        { title : 'Panel 1', html : 'Panel 1', height : 100},
        { title : 'Panel 2', html : 'Panel 2', height : 100},
        { title : 'Panel 3', html : 'Panel 3', height : 100} 
    ]
} );
w.show();

效果图：

该布局的特点：

1. 把组件渲染到HTML的table元素内部
2. 可以指定某个子组件跨越的行、列数

代码示例：

var table = Ext.create( 'Ext.window.Window', {
        title : 'Table Layout',
        width : 400,
        height : 300,
        layout : {
            type : 'table',
            columns : 3,  //表格包含的列数
            tableAttrs : {  //应用到生成的table元素的属性
                style : {
                    width : '90%',
                    height : '100%'
                }
            }
        },
        defaults : {
            bodyStyle : 'padding:10px'
        },
        items : [
            {
                html : 'Cell 1',
                rowspan : 3    //跨越3行
            }, {
                html : 'Cell 2'
            }, {
                html : 'Cell 3'
            }, {
                html : 'Cell 4'
            }, {
                html : 'Cell 5'
            }, {
                html : 'Cell 6',
                colspan : 2   //跨越2列
            }, {
                html : 'Cell 7'
            }, {
                html : 'Cell 8'
            }, {
                html : 'Cell 9'
            }
        ]
    } );
    table.show();

效果图：

该布局的特点：

1. 子组件水平分布
2. 容器管理子组件的宽度，可以通过columnWidth来指定宽度
3. 通常用于GridPanel的列的布局

代码示例：

var w = Ext.create( 'Ext.window.Window', {
    title : 'Accordion Layout',
    width : 400,
    height : 100,
    layout : 'column',
    items : [
        { title : 'Panel 1', html : '.25', columnWidth: .25},
        { title : 'Panel 2', html : '.25', columnWidth: .25},
        { title : 'Panel 3', html : '1/2', columnWidth: 1/2} 
    ]
} );
w.show();

效果图：

该布局的特点：

1. 容器只能有唯一的子组件
2. 该组件充满容器的全部可用空间

代码示例：

var w = Ext.create( 'Ext.window.Window', {
    title : 'Fit Layout',
    width : 300,
    height : 350,
    layout : 'fit',
    items : [
        { title : 'Panel 1', html : 'Fit'} 
    ]
} );
w.show();

效果图：

该布局是Fit Layout的子类型，特点为：

1. 与Fit Layout类似，每次只能显示一个子组件
2. 可以配置多个子组件
3. 可以切换子组件的显示

代码示例：

function navHandler( btn )
{
    var activeItem = card.layout.activeItem; //获取当前激活的子组件
    var active = card.items.indexOf( activeItem );
    if ( btn.id == 'nextButton' ) active += 1;
    else if ( btn.id == 'prevButton' ) active -= 1;
    card.layout.setActiveItem( active ); //通过序号激活子组件
    var prev = card.dockedItems.items[1].items.items[0];
    var next = card.dockedItems.items[1].items.items[2];
    if ( active == 0 ) prev.setDisabled( true );
    else if ( active == 1 )
    {
        prev.setDisabled( false );
        next.setDisabled( false );
    }
    else if ( active == 2 ) next.setDisabled( true );
};
var card = Ext.create( 'Ext.window.Window', {
    title : 'Card Layout',
    width : 350,
    height : 200,
    layout : 'card',
    activeItem : 0,
    defaults : {
        border : false
    },
    bbar : [
        {
            id : 'prevButton',
            text : 'Preivous Step',
            handler : navHandler,
            disabled : true
        }, '->', //该记号用于占满多余的空间
        {
            id : 'nextButton',
            text : 'Next Step',
            handler : navHandler
        }
    ],
    items : [
        {
            html : 'Step 1 of 3'
        }, {
            html : 'Step 2 of 3'
        }, {
            html : 'Step 3 of 3'
        }
    ]
} );
card.show();

效果图：

该布局的特点：

把容器划分为东西南北中五个区域：

1. 最多有五个子组件，最少一个子组件，中间区域必不可少
2. 每个子组件需要指定其占据的区域（region）
3. 除了中间区域，其他区域可以收缩
4. 南北区域可以指定高度，东西区域可以指定宽度，剩余的区域由中间占有

该布局的示意图如下：

代码示例：

var border = Ext.create( 'Ext.window.Window', {
    width : 700,
    height : 500,
    title : 'Border Layout',
    layout : 'border',
    defaults : {
        xtype : 'panel'
    },
    items : [
        {
            title : 'North Region is resizable',
            region : 'north', //子组件占据的区域
            height : 100,  //南北区域可以指定高度
            split : true
        }, {
            title : 'South Region is resizable',
            region : 'south',
            height : 100,
            split : true
        }, {
            title : 'West Region is collapsible',
            region : 'west',
            width : 200,  //东西区域可以指定宽度
            collapsible : true,
            layout : 'fit'
        }, {
            title : 'East Region is collapsible',
            region : 'east',
            width : 200,
            collapsible : true,
            layout : 'fit'
        }, {
            //剩余空间全部归中间区域
            title : 'Center Region',
            region : 'center',
            layout : 'fit'
        }
    ]
} );

效果图：

与容器布局不同，组件布局关注组件内部结构（而不是容器的子组件）组成的大小、位置。

Dock Layout主要用于提高面板头（Header）、工具栏（Toolbar）的灵活性。

考虑以下包含了若干工具栏配置的面板：

Ext.create( 'Ext.panel.Panel', {
    collapsible : true,
    width : 400,
    renderTo : Ext.getBody(),
    title : 'Ext 4 Panel - Header',
    html : 'Panel body HTML',  //面板体的HTML内容
    //顶部工具栏
    tbar : Ext.create( 'Ext.toolbar.Toolbar', {
        items : [
            {
                type : 'button',
                text : 'Button - Top Toolbar'
            }
        ]
    } ),
    //顶部工具栏
    bbar : Ext.create( 'Ext.toolbar.Toolbar', {
        items : [
            {
                type : 'button',
                text : 'Button - Bottom Toolbar'
            }
        ]
    } ),
    //脚注工具栏
    fbar : Ext.create( 'Ext.toolbar.Toolbar', {
        items : [
            {
                type : 'button',
                text : 'Button - Footer Toolbar'
            }
        ]
    } )
} );

其UI效果图如下：

从生成的HTML元素的角度来看，该面板包含一个外部包装元素（outer wrapper element）,该包装元素包含面板头、面板体包装元素两个部分，后者由顶栏、面板体元素、底栏、脚注栏几个部分组成，如下图 所示：

可以看到，在默认情况下，顶部工具栏、面板头、面板体、底部工具栏等的相对位置关系是固定的，ExtJS 3中，无法改变这种位置关系，ExtJS 4则包含若干改进，便于用户在多个位置摆放工具栏：

1. 面板头被抽象为组件（Ext.panel.Header），允许设置其位置为top、bottom、left、right
2. 可以使用dockedItems来配置各工具栏，从而将其放在任何方向

使用上述改进来配置面板头、工具栏，代码如下：

Ext.create( 'Ext.panel.Panel', {
    collapsible : true,
    width : 400,
    height : 400,
    border : true,
    renderTo : Ext.getBody(),
    title : 'Ext 4 Panel - Header',
    headerPosition : 'right', //面板头的位置，改在右边
    html : 'Panel Body HTML',
    dockedItems : [
        {
            xtype : 'toolbar',
            dock : 'left',  //该工具栏放在左边
            items : [
                {
                    xtype : 'button',
                    text : 'Left Toolbar'
                }
            ]
        }, {
            xtype : 'toolbar',
            dock : 'bottom',
            items : [
                {
                    xtype : 'button',
                    text : 'Bottom Toolbar'
                }
            ]
        }, {
            xtype : 'toolbar',
            dock : 'bottom',
            items : [
                {
                    xtype : 'component',
                    flex : 1
                }, {
                    xtype : 'button',
                    text : 'Footer Toolbar'
                }
            ]
        }
    ]
} );

 效果图：

出于对ExtJS 3兼容性的考虑，ExtJS 4仍然支持tbar、bbar、fbar，并且新增了rbar、lbar两个类似的配置项。

面板头工具（Header Tools）在ExtJS 4中也作为组件看待，ExtJS会在面板头部显示一系列的图标，其行为需要用户自行定义：

Ext.create( 'Ext.panel.Panel', {
    width : 500,
    renderTo : Ext.getBody(),
    html : 'Panel',
    title : 'Tools - Header',
    tools : [
        {
            type : 'close',
            handler : function()
            {}//定义按钮的行为
        }, {
            type : 'collapse'
        }, {
            type : 'down'
        }, {
            type : 'expand'
        }, {
            type : 'gear'
        }, {
            type : 'help'
        }, {
            type : 'left'
        }, {
            type : 'maximize'
        }, {
            type : 'minimize'
        }, {
            type : 'minus'
        }, {
            type : 'next'
        }, {
            type : 'pin'
        }, {
            type : 'plus'
        }, {
            type : 'prev'
        }, {
            type : 'print'
        }, {
            type : 'refresh'
        }, {
            type : 'restore'
        }, {
            type : 'right'
        }, {
            type : 'save'
        }, {
            type : 'search'
        }, {
            type : 'toggle'
        }, {
            type : 'unpin'
        }, {
            type : 'up'
        }
    ]
} );

效果图如下：

在ExtJS 4中，FormLayout不再被支持，组织表单字段布局的职责由新引入的FieldLayout承担。ExtJS 4的表单布局具有以下特性：

1. 表单容器默认使用Anchor Layout
2. 不再需要为字段指定绝对值宽度，而可以使用anchor指定百分比或者负数
3. 表单中的单个字段（Ext.form.field.Field）的输入框、错误信息由字段布局（Field Layout）确定。在显示错误信息时，ExtJS自动收缩表单字段，以腾出空间。因此，用户不需要考虑如何为错误信息预留空间

下面是一个ExtJS 4表单的例子：

//通过设置ExtJS类的原型对象的属性，可以影响所有以后创建的实例
Ext.form.Field.prototype.msgTarget = 'side';
Ext.create( 'Ext.form.Panel', {
    frame : true,
    title : 'Form',
    margin : 5,
    bodyStyle : 'padding:5px 5px 0',
    width : 350,
    renderTo : Ext.getBody(),
    fieldDefaults : {
        msgTarget : 'side',
        labelWidth : 75
    },
    defaultType : 'textfield',
    //可以指定任何布局方式
    layout : {
        type : 'vbox',
        align : 'stretch'
    },
    defaults : {
        //与ExtJS 3不同，不需要指定字段宽度，而可以使用anchor指定宽度（支持百分比、负数）
        anchor : '100%'
    },
    items : [
        {
            fieldLabel : 'First Name',
            name : 'first'
        }, {
            fieldLabel : 'Last Name',
            name : 'last'
        }
    ]
} );

与Field Layout类似，该布局机制可以为Trigger字段的错误信息自动预留空间。

The post 浅析ExtJS 4布局组件 appeared first on 绿色记忆.