Ext JS权威指南

extjs学习地址：http://docs.sencha.com/extjs/6.0/

第1章 Ext JS 4开发入门

需要掌握html,css,javascript基础知识，有点面向对象编程知识，了解Ext Js的框架结构。

1.1 学习Ext JS必需的基础知识

1 JavaScript

ExtJs本身是一个JavaScript的框架，需要使用JavaScript来开发ExtJs。

JavaScript的框架就是通过控制HTML和CSS来实现功能。

2 HTML

需要熟悉HTML的各种标记

3 CSS

用于展示HTML元素，例如布局。

4 面向对象的知识

ExtJS框架是基于面向对象的思想创建的。

5 三层架构的知识

ExtJS在客户端使用三层架构，UI组件是表现层，Store是数据访问层，JSON是数据对象。

1.2 JSON概述

1.2.1 认识JSON

是一种Web开发的标准数据交换格式。

1.2.2 JSON的结构

对象结构以大括号开始结束，中间以逗号分隔的关键字加冒号加值列表构成。

注意：关键字必须为字符串，值可以是字符串，布尔值，对象，数组,null。

数组结构以中括号开始结束，中间以逗号分隔的值列表构成。

1.2.3 JSON的例子

1.2.4 在JavaScript中使用JSON

javaScript可以读取修改和添加JSON中的数据。

1 读取单个数据，一 使用小数点后加关键字。二在中括号中包含关键字。

2 遍历数据 使用for in 循环。通过循环读取JSON中的关键字，然后通过对象加关键字读取数据。

3 修改数据，直接给变量赋值。

4 添加数据，对象加数据等号赋值。

5 删除数据，使用delete语句，delete 对象加属性。

1.2.5 在.NET中使用JSON

1 JSON.NET 概述

一 .NET 对象转换为JSON对象  二 使用LINQ to JSON读写JSON对象

2 配置JSON.NET

3 序列化对象 JsonConvert.SerializeObject(object)方法返回序列化后的字符串。

4 LINQ to JSON 根据需要的JSON格式组织文本数据。

5 处理客户端提交的JSON数据。服务器端提取JSON字符串并转化为JSON对象然后处理。

1.2.6 在Java中使用JSON

1 Gson概述

作用是在java对象和JSON之间实现互相转换。

2 配置Gson

3 使用Gson

JsonObject 生成一个JSON对象。

JsonArray 生成一个JSON数组。

4 处理客户端提交的JSON数据。

使用JsonParser对象的Parse方法处理Json字符串为Json对象，然后处理。

1.2.7 更多有关JSON的信息

1.3 Ext JS 4概述

1 令人兴奋的Ext JS 4

2 Ext JS 3与Ext JS4的兼容问题

3 新的类系统

4动态加载

5 mixins

6 自动的配置功能，在config属性中定义的属性，系统回自动添加方法。

7 新增的数据模型，在模型中可实现验证、关联和数据处理等功能。

8 全新的绘图与图表功能

9 重新架构的Grid组件

10 新的主题特性

1.4 Ext JS的开发工具的获取、安装与配置介绍

1.4.1 Ext Designer

1.4.2 在Visual Studio中实现智能提示

1.4.3 Spket

1.4.4 在Eclipse中实现智能提示

1.5 如何获得帮助

1 在线API文档

2 Ext JS包中的示例

第2章 从"Hello World"开始

2.1 获取Ext JS4

2.2 配置使用Ext JS库

2.3 编写"Hello World“程序

2.4 关于Ext.onReady

模型加载完毕后即可进行操作。

2.5 关于Ext.BLANK_IMAGE_URL

2.6 关于字体

在ext-all.css文件修改

2.7 Ext JS4 语法

1 配置对象，包括属性，布局，子空间，事件。

2 关于xtype,指定该位置使用什么组件。

3 使用new关键字创建对象

4 使用Ext.create方法创建对象

5 使用Ext.widget或Ext.createWidget创建对象 ，根据别名创建对象。

6 使用Ext.ns或Ext.namespace定义命名空间，在window对象下生成了命名空间对象。

7 使用Ext.define定义新类

2.8 本地化

在Ext JS文件包的local中存在本地化文件，在Ext.onReady中会将属性带有的语言信息转化为对应的本地化语言信息。

2.9 为本书示例准备一个模版

第3章 调试工具及技巧

3.1 使用Firebug进行调试

1 Firebug概述

基于Firefox的一个扩展，web开发调试工具。

2 Firebug的安装

3 Firebug的界面

4 控制台面板

5 HTML面板

6 CSS面板

7 脚步面板

8 DOM面板

9 网络面板

10 命令行命令介绍

3.2 在IE中调试

3.3 在Chrome中调试

3.4 调试工具的总结

3.5 调试技巧

1 使用console代替alert

2 使用debugger命令

3 显示问题的调试

4 数据加载问题

5 布局问题

6 对象或变量不存在的错误

7对象没有响应

8 诊断Ext JS 4的布局问题

9 使用JSLint检测脚本

第4章 Ext JS的基础架构

基础架构把不同的平台事件、DOM操作封装起来，实现一套模型无关，标准统一的事件模型。

本章讲述了基础架构中的平台检测方法和扩展方法及类的创建过程。

4.1 Ext JS框架的命名空间：Ext

4.1.1 概述

Ext 命名空间为Ext JS框架提供了一个全局对象，提供了一些基础定义，基本的属性和方法。

4.1.2 apply 和applyIf方法

方法apply的作用是将所有配置对象的成员复制到对象。

方法applyIf的作用是将所有配置对象的成员不包括对象已经存在的成员复制到对象。

4.1.3 不推荐的extend方法

extend方法用于系统类及用户自定义的类扩展。推荐使用define方法定义类。

4.1.4 数据及其类型检测

1 typeOf:检测变量的类型 Ext.typeOf(v);

2 isEmpty:检测值是否为空 Ext.isEmpty(v,allowEmptyString);

3 isObject:检测值是否为JavaScript的对象 Ext.isObject(v);

4 isIterable:检测值是否可迭代

5 isFunction:检测值是否为函数 Ext.isFunction(v);

6 其他的检测方法

isArray:检查值是否为数组

isDate:检查值是否为日期对象

isPrimitive:检查值是否为JavaScript基本数据类型(字符串、数字、布尔值)

isNumber与isNumeric:检测值是否为数字值。

isString:检测值是否为字符串。

isBoolean:检测值是否为布尔值。

isElement:检测值是否为元素。

isTextNode:检测值是否为文本节点。

isDefined:检测值是否已定义,非undefined.

4.1.5 其他的基础方法

1 Iterate:对数组或对象进行迭代。 Ext.iterate(object,fn,scope);

2 Clone:可以克隆数组，对象、Dom节点和日期等数据类型。 Ext.clone(item);

3 id:产生id值。Ext.id([el,prefix]);

4 getBody:返回当前document对象的body元素。 Ext.getBody();返回值为Element对象。

5 getHead:返回document对象的head元素。 Ext.getHead();

6 getDoc:返回document对象。 Ext.getDoc();

7 Destro:删除对象及其事件，从DOM中删除节点。

8 urlAppend:为url追加查询字符串。Ext.urlAppend(rul,s);

9 addBehaviors:若document对象已经准备好，则可为匹配选择符的元素绑定事件。

10 getScrollBarWidth:获取滚动条宽度。

11 destroyMembers:删除对象的成员。

12 copeTo:从一个对象复制属性名称到另一个对象。 Ext.coypTo(dest,source,names[]);

13 ExtObject.toQueryString:对url进行编码。Ext.Object.fromQueryString:对rul进行解码。

4.2 为框架顺利运行提供支持

4.2.1 平台检测工具：Ext.is

用于检测当前应用是运行在什么平台上。

4.2.2 当前运行环境检测工具：Ext.supports。检测浏览器是否支持Html5 和CSS3.

4.3 Ext JS的静态方法

4.3.1 概述

扩展JavaScript原有的语言功能，方便数据处理。

4.3.2 Ext.Object中的静态方法

1 toQueryObjects:将对象转化为数组。

2 toQueryString:将对象转化为编码的查询字符串。

3 fromQueryString:将查询字符串解码转化为对象。

4 Each:枚举对象的回调函数。

5 Merge:以递归方式合并任何数量的对象。

4.3.3 Ext.Function中的静态方法

1 flexSetter:封装一个只接受两个参数的函数，封装后，函数的参数会变的灵活。

2 Bind:用于绑定函数，作用是保持作用域。

3 Pass:封装新函数，主要用于创建回调函数。

4 Alias:为方法创建一个别名。

5 createInterceptor:创建一个拦截函数，调用原始函数时，先执行拦截函数，如果拦截函数返回false,不调用原始函数。

6 createDelayed:创建一个延时执行的回调函数。

7 Defer:在指定时间后执行函数。

8 createSwquence:创建一个函数，在执行原始函数之后执行指定的函数。

9 createBuffered:创建一个缓冲函数，在指定的时间内，如果函数再次被触发，则重新开始记时。

10 createThrottled:封装那些回被多次且迅速调用的函数，只有在距离上次调用时间达到指定时间间隔后才执行操作。

11 Clone:为指定的函数创建一个克隆函数。

12 interceptBefor:在函数的原始执行之前执行一个指定的操作。

13 intereptAfter:在函数的原始操作之后执行一个指定的操作。

4.3.4 Ext.Array中的静态方法

1 each:枚举数组。

2 forEach:遍历一个数组，并使用指定的函数处理数组中的每一个元素。

3 toArray:将可迭代的数据转化为数组。

4 pluck:根据指定的属性，获取数组中每个对象的指定关键字的值。

5 from:将一个值转化为数组。

6 sort:对数组中的元素进行排序。

4.3.5 Ext.Error中的静态方法

为Ext应用提供一种有用的调试方法。

4.4 深入了解类的创建及管理

4.4.1 开始创建类

使用Ext.define定义类的创建。

4.4.2 创建类的类：Ext.Class

4.4.3 所有继承类的基类:Ext.Base

4.4.4 实现动态加载:Ext.Loader

Loader对象在Class对象中注册一个loader处理器，用来实现类的动态加载。

4.4.5 管理类的类：Ext.ClassManager

4.4.6 类创建的总结

4.5 动态加载的路径设置

4.6 综合实例:页面计算器

第5章 Ext JS的事件及其应用

框架将各个浏览器不同的事件模型封装起来，为内部的组件和开发人员提供一个公共的事件接口。

本章主要讲述了Ext JS如何封装事件模型，如何提供公共接口以及如何使用这些公共接口。

5.1 概述

浏览器事件：用户通过操作页面元素触发的事件。封装事件类：EventManger EventObject.

内部事件：组件之间，组件和浏览器之间的联动等事件。Event,Obervable.

5.2 浏览器事件

5.2.1 绑定浏览器事件的过程：Ext.EventManager

要为元素绑定事件，通常使用EventManager的on方法，Ext.EventManager.on(el,eventName,fn[,scope,options]);

5.2.2 封装浏览器事件：Ext.EventObject

第6章 选择器与DOM操作

第7章 数据交互

第8章 模版与组件基础

第9章 容器、面板、布局和视图

第10章 重构后的Grid

第11章 与Grid同源的树

第12章 表单

第13章 窗口

第14章 按钮、菜单与工具条

第15章 图形与图表

第16章 其他组件及实用功能

第17章 可简化通信的Ext.Direct

第18章 动画功能

第19章 拖放功能

第20章 扩展与插件

第21章 主题开发

第22章 MVC应用架构