ExtJs4基础

JSON结构

• JSON有数组和对象两种结构：
  • 对象结构：用大括号作为开始和结尾{}，中间可以用0个或多个，（逗号）分隔的”key/value“列表组成，关键字和值之间用：（冒号）分隔。
    {
    key1:value1,
    key2:value2,
    …
    }
    其中关键字是字符串，值可以是字符串、数值、true、false、null对象或数组。
  • 数组结构:用中括号开始和结尾[]。中间有0个或多个，（逗号）分隔的值列表组成。
    [value1,value2]
    值可以是字符串、数值、true、false、null、对象或数组。

Java中使用Gson操作JSON

• Gson中的JsonObject和JsonArray对象。
• JsonObject生成一个JSON对象；JsonArray生成一个JSON数组。

Ext JS的基本语法是使用树状的配置对象来定义界面

{
     
	config_options1:value1,
	congig_potions2:value2,
	...
	config_optionsn:valuen,
	layout:{
     },
	items:[
		{
     },//配置对象
		{
     }
		...
	],
	listeners:{
     
		// 定义事件
		click:function(){
     },
		dblclick:function(){
     }
		...
	}
}

config_options1…n ：是API文档中的配置项。
layout : 可以是对象或字符。表示当前容器内使用什么布局来填充子控件。字符：使用控件别名；对象：可以自定义特殊要求。
items : 是一个数组，可以在里面定义当前控件的子控件。
xtype:指定该位置使用什么组件。默认组件可以去掉xtype，panel是viewport内默认组件。定义xtype使用组件别名，在API文档的组件说明文档的顶部或Component对象的说明中找到组件的xtype值。

Viewport

一个专门的容器用于可视应用领域（浏览器窗口）.
Viewport渲染自身到网页的documet body区域，并自动将自己调整到适合浏览器窗口的大小，在窗口大小发生改变时自动适应大小。
一个页面中只能创建一个Viewport。
任何的Container容器都可以作为一个Viewport 的子组件，开发者使用一个Viewport作为父容器配置布局layout，并管理他们的大小和位置.
Viewports一般使用border layout布局, 如果开发者需要的布局很简单,可以指定一个简单布局。
例如, 只是简单的把单个子项，填补整个父容器的空间, 只要使用 fit layout布局.
几个子项在一个父容器中，要显示全尺寸显示其中一个“激活”的子项,使用 card layout布局.
所有的内部布局可以通过Panel添加到Viewport,或者通过配置items,或者通过添加 add 方法添加panels，这些子组件本身可能
就存在自身的布局方式.
The Viewport本身不提供滚动条,所以如果内部的子面板要实现滚动条，需要配置autoScroll属性.

使用new关键字创建对象

new classname([config]) config为可选参数，为类的配置对象，类型为JSON对象。
例：
new Ext.Viewport({
     
	layout:'fit',
	items:[{
     
		xtype:"panel",
		title:"欢迎",
		html:"
Hello Word
"
	}]
});

使用Ext.create方法创建对象

Ext.create(classname,[config]); 
classname为类的全名、别名、备用名。
config可选参数，为类的配置对象，类型为对象{
     }。
例：
Ext.create('Ext.Viewport',{
     
	layout:'fit',
	items:[{
     
		xtype:"panel",
		title:"欢迎",
		html:"
Hello Word 2018
"
	}]
});

Ext.widget

Ext.widget的作用是使用别名来创建对象，和Ext.create语法一样，只是classname使用的是对象的别名。Ext.createWidget是
Ext.widget的另一种使用方法。
Ext.createWidget = Ext.widget;

使用命名空间来组织相关类和其他类型

使用命名空间来组织相关类和其他类型，js中可以定义一个全局对象的方式来实现，MyApp = {}; 注意不要用var语句去定义全局对象。

在Ext JS中可以使用Ext.namespace方法创建命名空间。
Ext.namespace(namespace1,namespace2,...,namespacen)
namespace1...n都是字符串数据，是命名空间的名字。
例：
Ext.namespace("MyApp","MyApp.data","MyApp.user");
Ext.ns("MyApp","MyApp.data","MyApp.user");
Ext.ns只是Ext.namespace的简单写法。
Ext.namespace创建的命名空间是保存在global对象里的。
不建议使用全局变量，使用Ext已定义的命名空间"Ext.app",如果是扩展或插件则使用"Ext.ux"

使用Ext.define定义新类

Ext.define(classname,properties,callback);
classname:要定义的新类的类名；
properties:新类的配置对象，对象里包含了类的属性集对象；
callback：回调函数，当类创建完后执行该对象。
常用属性集对象：
extend ：要继承的类的名称，subclass继承自superclass。
alertnateClassName:类的备用名称,在使用Ext.create方法创建对象时可以使用myclass创建subclass实例。
alias:类的别名，用法参考alertnateClassName属性。
requires:需要用到的类名数组，在动态加载时会根据该属性去下载类。
constructor:构造属性，一般用来初始化类的配置项和调用其父类的方法。
	Ext.define("subclass",{
     
		extend："superclass",
		alternateClassName:"myclass",
		requires:["Ext.EventManager","Ext.util.MixedCollection"],
		constructor:function(config){
     
			this.initConfig(config);
			...
			this.callParent("methodName");
			return this;
		},
		...
	});
mixins:为类添加特殊的功能.为subclass混合Ext.util.Observable和Ext.util.Animate功能。(多重继承)
	Ext.define("subclass",{
     
		mixins:{
     
			ob:"Ext.util.Observable",
			fx:"Ext.util.Animate"
		},
		constructor:function(config){
     
			var me = this;
			me.initConfig(config);
			me.mixins.ob.constructor.call(me);
			...
			return me;
		},
		fx:function(){
     
			var me = this;
			...
			return me.mixins.fx.animate.apply(me,arguments);
		},
		...
	});
config:定义类的配置项，创建时会自动为config里的每个属性添加set和get方法。
	Ext.define("subclass",{
     
		config:{
     
			width:100,
			height:100
		},
		extend："superclass",
		alternateClassName:"myclass",
		requires:["Ext.EventManager","Ext.util.MixedCollection"],
		constructor:function(config){
     
			this.initConfig(config); //该方法执行后就会为config属性创建setXxx和getXxx方法以及applyXxx和resetXxx方法，当属性值发生修改时，会触发applyXxx方法，因而可以重写applyXxx方法以实现所需功能，创建实例后直接使用set和get方法读写属性的值。
			...
			this.callParent("methodName");
			return this;
		},
		...
	});
	var mysubclass=new subclass();
	mysubclass.setWidth(200);
	mysubclass.getHeight();
statics:定义静态方法。
	Ext.define("subclass",{
     
		statics:{
     
			method:function(args){
     
				return new this(args);
			}
		}
		constructor:function(config){
     
			this.initConfig(config); 
			...
			this.callParent("methodName");
			return this;
		},
		...
	});
	var mysubclass= subclass.method("class");
[注]没有extend属性，定义的类默认会从Ext.Base继承。
	
mixins:属性定义的混合功能调用方法：一、直接调用（同名方法存在覆盖问题）；二、使用call的方法调用（强烈建议使用）。

Ext JS框架的命名空间是Ext,为Ext JS框架提供了一个唯一的一个全局对象。

Ext的定义包含Ext.js和Ext-more.js两个文件，重要的有四个方法：apply、applyIf、override和extend。
	apply：将所有配置兑现的成员复制到对象。
	applyIf：在对象的属性值为undefined的时候才进行复制。
	override
	extend

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

isEmpty:检测值是否为空
Ext.isEmpty(v,allowEmptyString)	
v：要检查的值；allowEmptyString：默认值为false，表示不允许空字符串。

Ext.isObject（v）；检测值是否为js对象。

Ext.isIterable（v）；检查值是否可迭代的。

Ext.isFunction(v);检查值是否为函数。

还有：isArray、isNumber和isNumeric检查是否为数字，前者检查类型后者检查值、isDate、isElement...

Ext.iterate(object,fn,scope)对数组或对象进行迭代。object是要迭代的对象；fn是要进行迭代操作的函数；scope是
作用域；该方法没有返回值。

Ext.clone(item);item是要复制的数组、对象，DOM节点或日期；返回值为克隆后的。

Ext.id([el,prefix]);产生id值。el是可选参数，要添加id的元素，值可为元素id值、HTMLElement对象或Element对象；prefix也是可
选参数，自定义id的前缀字符串。

Ext.getBody();返回当前document对象的body元素。是一个Element对象。

Ext.getHead();返回当前document对象的head元素。是一个Element对象。

Ext.getDoc();返回当前document对象。是一个Element对象。

Ext.destory(obj1，obj2，... objn);obj1...n是要删除的对象。

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

Ext.addBehaviors(o);若document对象已经准备好，则可为匹配选择符的元素绑定事件。

Ext.getScrollBarWidth([force]);force强制重新计算滚动条的宽度，返回滚动条的宽度。

Ext.destoryMembers(o,name1,name2,...namen);o要删除其成员对象。

Ext.copyTo(dest,source,names[usePrototypeKeys])；从一个对象属性名称复制到另一个对象。


Ext.is平台检测工具，检测当前应用运行在什么平台上。
Ext.supports当前运行环境检测工具。

Ext JS的静态方法

Ext JS的静态方法：Ext.Data、Ext.Number、Ext.String、Ext.Error、Ext.Function和Ext.Array7个对象。

Ext.Object中的静态方法：
	Ext.Object.toQueryObjects(name,object[,recursive]);将对象转换为数组。
	Ext.Object.toQueryString(object[,recursive]);将对象转换为编码的查询字符串。
	Ext.Object.formQueryString(string[,recursive]);将查询字符串解码转换为对象。
	Ext.Object.each(object,fn[,scope]);枚举对象的回调函数。
	Ext.Object.merge(source,[,obj1,obj2...objn]);以递归的方式合并任何数量的对象，而且取消对他们的指向。
	Ext.merge
	Ext.Object.getValues
	Ext.Object.getKey
	Ext.Object.getSize
	
Ext.Function中的静态方法
	Ext.Function.flexSetter(fn)封装一个只接收两个参数的函数，封装后，函数的参数会变得灵活。
	Ext.Function.bind(fn[,scope,args,appendArgs]);绑定函数的方法，主要作用是保护作用域。
	Ext.bind
	Ext.Function.pass(fn,args[,scope]);封装一个新函数，在调用旧函数时，将预设的参数插入到新函数的参数前面作为
	旧函数的参数。该方法主要用于创建回调函数。
	Ext.Function.alias(object,methodName);为方法创建别名。
	Ext.Function.createInterceptor(origFn,newFn[,scope,returnValue]);创建一个拦截函数。作用是在调用原函数
	时，先使用拦截函数检查数据，如果拦截函数返回false，不调用原始函数，直接返回参数returnValue或null。否则，
	执行原始函数，该功能主要用于验证输入，验证通过后才修改原始值。
	Ext.Function.createDelayed(fn,delay[,scope,args,appends]);创建一个延时执行的回调函数。
	Ext.Function.defer(fn,delay[,scope,args,appends]);在指定时间后执行函数。
	Ext.defer
	Ext.Function.createSequence(origFn,newFn[,scope]);创建一个函数，在执行原始函数之后执行指定的函数。
	Ext.Function.createBuffered(fn,buffer,scope,args);创建一个缓冲函数，在指定时间内，如果函数再次被触发，则
	重新开始计时。只有在缓存期内没有再被触发时，才会执行指定的函数。该方法主要用于定义键盘事件，例如在缓冲期
	内，用户再没有输入任何字符，则可以做一些处理，如去数据库搜索数据，在下拉列表内显示。
	Ext.Function.createThrottled(fn,interval[,scope]);封装那些会被多次且迅速调用的函数，如鼠标移动事件，只有
	在上次调用时间达到指定间隔后才执行操作。
	Ext.Function.clone(fn);为指定的函数创建一个克隆函数。
	Ext.Function.interceptBefore(object,methodName,fn[,scope]);在函数的原始操作之前执行一个指定的函数。
	Ext.Function.interceptAfter(object,methodName,fn[,scope]);在函数的原始操作之后执行一个指定的函数。
	
Ext.Array中的静态方法：
	Ext.Array.each(array,fn[,scope,reverse]);枚举数组
	Ext.each
	Ext.Array.forEach(array,fn[,scope]);遍历一个数组，并使用指定函数处理数组的每一个元素。
	Ext.Array.toArray(iterable[,start,end]);将可迭代的数据转换为数组。
	Ext.toArray
	Ext.Array.pulck(array,name);根据指定的属性，获取数组内每个对象指定关键字的值。
	Ext.pluck
	Ext.Array.form(value[,newReference]);将一个值转换为数组。
	Ext.Array.sort(array[,fn]);对数组中的元素进行排序。如果要对包含中文字符串的数组进行排序，一定要定义自定义
	排序函数，不然会出现错误。
	var ar = ["张三","李四","王五","刘六"];
	Ext.Array.sort(ar,function(a,b){
     
		if(typeOf a === 'string'){
     
			return a.localeCompare(b);//
		}else{
     
			return a<b;
		}
	});
	indexOf
	contains
	map
	remove
	include
	merfe
	min
	max
	sum
	...
	
Ext.Error中的静态方法：
	ignore属性：默认为false，显示错误报告。
	notify属性：作用于ignore相同，不会影响异常的抛出。
	Ext.Error.raise用于抛出错误
	Ext.Error.handle实现自定义错误处理，较少用到。

Ext.Class:创建类的类。
statics属性是用来定义类中的静态属性和方法的，而静态是不能被继承的；
inheritableStatics属性是用来定义类中的静态属性和方法的，而这些属性和方法是可以被子类继承的。
Ext.Loader实现动态加载。
Loader对象在Class对象中注册一个loader处理器，用来实现类的动态加载。
Ext.ClassManager管理类的类。

Ext JS包含浏览器事件和内部事件。

• 浏览器事件：主要是用户操作界面中的元素而触发的事件。鼠标单击、鼠标移动。EventManager、EventObject
• 内部事件：指组件之间、组件和浏览器之间的联动事件。Event、Observable

浏览器事件：为元素绑定事件，通常使用EventManager的on方法

Ext.EventManager.on(el,eventName,fn[,scope,options]);
	el:要绑定事件的元素，可以为元素的id，Element对象或HTMLElement对象。
	eventName：事件的名称，在一次定义多个事件时，也可以是一个对象。当eventName是事件的名称时，fn就是事件
	要触发的函数，为对象时，fn会被忽略。
Ext.EventManager.on = Ext.EventManager.addListener;on方法是addListener的别名。

绑定事件的三种形式：
	①一次只绑定一个事件
		Ext.EventManager.on("input1","focus",focus);
	②一次绑定多个事件，使用相同配置项的方式
		Ext.EventManager.on("input1",{
     
			focus:focus,
			blur:blur
		});
	③一次绑定多个事件，使用不同配置项的方式
		Ext.EventManager.on("input1",{
     
			focus:{
     fn:focus},
			blur:{
     fn:blur}
		});

使用setEvent方法将浏览器事件封装成EventObject对象后再传递给触发函数，从而实现跨平台的处理。

移除浏览器事件:
	①从元素中移除一个事件。
	Ext.EventManager.un(el,eventName,fn,scope);(简写)
	Ext.EventManager.removeListener(el,eventName,fn,scope);
	②从元素中移除所有事件。
	Ext.EventManager.removeAll(el);
	③使用递归的方式移除元素及其子节点的事件。
	Ext.EventManager.purgeElement(el[,eventName]);

内部事件：使用Event对象来记录自己的信息。Event对象提供的方法只是框架内部使用的接口，而不是外部接口，因而不要 尝试直接使用这些方法。

addListener：绑定内部事件。
removeListener：移除事件。
clearListeners：使用迭代的方式停止所有缓存或延时事件。
fire：触发事件。

Ext.util.Observable：为组件添加事件接口、绑定事件、触发事件、处理混合事件及移除事件等。
为组件绑定事件有两种方式：一种是在组件创建时，在配置对象中配置listeners属性；另一种是在组件创建后，使用on
方法绑定。


Ext.util.DelayedTask：延时任务
Ext.util.TaskRunner和Ext.TaskManager：执行一些任务
Ext.util.ClickRepeater:封装好的单击事件

Ext.util.KeyMap:为元素绑定键盘事件。
Ext.util.KeyNav：键盘导航。

选择器与DOM操作

使用Ext.query选择页面元素。
Ext.query(path[,root,type]);
当开始节点已通过Ext.get方法获得时，也可以使用以下语法：
var el = Ext.get(rootID);
el.query(path);

基本选择符

*:选择任何元素
Ext.query("*");

E:根据元素标记E选择元素
Ext.query("E");//E为元素标记，如input、div

E F：选择包含在标记E中的标记F
Ext.query("E F");

E>F：选择包含在E中的直接子元素标记F
Ext.query("E>F");

E~F:选择在元素E之后同层的元素F
Ext.query("E~F");

#ID:选择id属性值为ID的元素
Ext.query("#ID");

.classname:选择CSS类名为classname的元素
Ext.query("E.classname");//E为元素标记，如input、div classname为CSS类名

属性选择符

[attribute]:选择带有属性attribute的元素
Ext.query("[attribute]");
Ext.query("E.[attribute]");

[attribute=value]:选择attribute属性值为value的元素
Ext.query("[attribute=value]");
Ext.query("E.[attribute=value]");

[attribut^=value]:选择attribute属性值以value开头的元素
Ext.query("[attribute^=value]");
Ext.query("E.[attribute^=value]");

[attribut$=value]:选择attribute属性值以value结尾的元素
Ext.query("[attribute$=value]");
Ext.query("E.[attribute$=value]");

[attribut*=value]:选择attribute属性值包含value的元素
Ext.query("[attribute*=value]");
Ext.query("E.[attribute*=value]");

[attribut%=value]:选择attribute属性值能整除value的元素
Ext.query("[attribute%=value]");
Ext.query("E.[attribute%=value]");

[attribut！=value]:选择attribute属性值不等于value的元素
Ext.query("[attribute！=value]");
Ext.query("E.[attribute！=value]");

CSS属性值选择符

• 语法参考属性选择符，使用{}替代属性选择符中的[]。不要使用没有value的语法。

伪类选择符

Ext.query("E:first-child");选择元素E，且其为父节点的第一个子节点。

Ext.query("E:last-child");选择元素E，且其为父节点的最后一个子节点。

Ext.query("E:nth-child(n)");选择元素E，且其为父节点的第n（n>=1）个子节点的元素。

Ext.query("E:nth-child(odd)");选择元素E，且其为父节点的奇数子节点的元素。
Ext.query("E:odd");

Ext.query("E:nth-child(even)");选择元素E，且其为父节点的偶数子节点的元素。
Ext.query("E:even");

Ext.query("E:only-child");选择元素E，且其为父节点的唯一子节点的元素。

Ext.query("E:checked");选择元素E，且其checked属性值为true的元素。

Ext.query("E:first");选择标记为E的元素集合中的第一个元素。

Ext.query("E:last");选择标记为E的元素集合中的最后一个元素。

Ext.query("E:nth(n)");选择标记为E的元素集合中的第n个元素。

Ext.query("E:contains(str)");选择标记为E,且其innerHTML属性值包含字符串str的元素。

Ext.query("E:nodeValue(value)");选择标记为E,且其文本节点的nodeValue属性值等于value的元素。

Ext.query("E:not(S)");选择标记为E,且与简单选择符S不匹配的元素。

Ext.query("E:has(S)");选择标记为E,且包含与简单选择符S匹配的元素。

Ext.query("E:next(S)");选择标记为E,且其下一节点与简单选择符S匹配的元素。

Ext.query("E:prev(S)");选择标记为E,且其上一节点与简单选择符S匹配的元素。

Ext.query("E:any(S1|S2...|Sn)");选择标记为E,且与简单选择符S1到Sn中的任意一个能匹配的元素。

扩展选择器

• 通过DomQuery对象的matchers、operators和pseudos3个属性可以扩展选择器的功能。

获取单一元素：Ext.dom.Element

Ext.get(‘ID’).dom.innerHTML=‘内容’；
Ext.fly(‘ID’).dom.innerHTML=‘内容’；
以上两个方法返回的是Element对象，而不是HTMLElement对象。不能直接访问HTMLElement的属性，先得调用dom属性，
再调用HTMLElement的属性。
或者可以使用 Ext.getDom(‘ID’).innerHTML=‘内容’；

获取元素：var el = Ext.get(id);id不仅仅是id属性值。
建议：对元素进行一次性操作的时候，使用Ext.fly而不是Ext.get来获取元素。

Ext.getDom(id[,strict]);返回的是HTMLElement对象。

元素生成器：Ext.dom.Helper

DomHelper对象可以根据需要生成HTML代码、DOM对象或模板。

使用createHtml或markup方法生成HTML代码。

Helper对象的使用方法：
	Ext.dom.Helper.insertHtml(where,el,html);在指定元素的指定位置插入HTML代码。
	Ext.dom.Helper.append(el,o[,returnEl]);创建新的元素，并追加到指定的元素下。
	insterAfter
	insertBefor
	insertFirst
	overview
	Ext.dom.Helper.applyStyle(el,styles);设置元素的style属性。

元素操作：Ext.dom.Element

• 包括的操作有：查询、DOM操作、样式操作、对齐、尺寸大小、定位、滚动操作、杂项。
• Ext.select(selector,unique,root);通过选择符获取元素集合。
• 操作元素集合：Ext.CompositeElementLite（推荐）和Ext.CompositeElement

数据交互

封装Ajax：Ext.data.Connection 
	封装Ajax的类不是Ext.Ajax，而是Connection对象。Ajax对象只是Connection对象的一个子类。
Connection对象的构造函数，定义了一个requests对象，用以保存所有请求。

使用Ajax：
	Ext.Ajax.request(options);
	options为配置项：url、params、method、callback、success、failure、scope、timeout、form、isUpload
	  headers、XMLData、jsonData、disableCaching。

跨域获取数据：Ext.data.JsonP

为Element对象提供加载功能：Ext.ElementLoader

为组件提供加载功能：Ext.ComponentLoader

代理

属于三层中的数据访问层，它会根据模型去加载和保存数据。

Proxy是代理的基类，根据数据的位置派生出ServerProxy和ClientProxy两个类。

进行批量操作：Ext.data.Batch与Ext.data.Operation

服务器代理：Ext.data.proxy.Server
	ServerProxy对象中定义的很重要的提交参数：
		pageParam、startParam、limitParam、groupParam、sortParam、filterParam、directionParam

使用Ajax处理数据的代理：Ext.data.proxy.Ajax与Ext.data.proxy.Rest
	AjaxProxy对象的作用是使用Ajax方式存取数据。
	
跨域处理数据的代理：Ext.data.proxy.JsonP

为Ext.Direct服务的代理：Ext.data.proxy.Ditect

客户端代理：Ext.data.proxy.Client

从变量中提取数据的代理：Ext.data.proxy.Memory

使用浏览器存储的代理：Ext.data.WebStorageProxy、Ext.data.SessionStorageProxy、Ext.data.proxy.LocalStorage

不同格式的数据就需要一个工具将其转换为标准的数据格式，Reader

数据的转换过程：Ext.data.reader.Xml、Ext.data.reader.Json、Ext.data.reader.Array。

Reader对象的配置项。

格式化提交数据：Ext.data.writer.Writer、Ext.data.writer.JSON和Ext.data.writer.Xml、Ext

Writer对象的配置项。

数据模型

一个数据模型实例相当于数据库的一条记录，它由字段组成。通过数据模型可以添加记录、删除记录、编辑记录和更新记录等。

数据类型及排序类型：Ext.data.Types与Ext.data.SortTypes
	SortTypes对象可指定数据按什么方式进行排序。
	
数据模型的骨架——字段：Ext.data.Field。如果数据模型没有字段，那数据模型也就不是模型了。有了字段才知道数据是
做什么用的，它会存储什么样的数据。

数据集：Ext.util.AbstractMixedCollection与Ext.util.MixedCollection

数据验证及错误处理：Ext.data.Validations与Ext.data.Errors。

模型的关系：Ext.data.Association、Ext.data.HasManyAssociation和Ext.data.BelongsToAssociation

管理数据模型：Ext.AbstractManager与Ext.ModelManager

定义数据模型：Ext.data.Model

创建一个数据模型实例，就是创建一个记录。Store对象时这些记录的集合。Store对象使用
MixedCollection对象存储这些模型实例的，可以通过MixedCollection对象的属性和方法访问
Store对象的数据。

Ext JS采用三层架构，数据与UI组件是分离的，要访问的数据在Store里，不在UI组件里。因而，要操作数据，请使用Store对象的
属性和方法。Store对象中，数据在data属性中；TreeStore对象的数据在tree属性中。

data属性指向一个MixedCollection对象实例，Reader在读取数据后，会将读取数据转换后保存在对象中，通过data属性可以访问
和操作Store中的数据。
Store的排序：Ext.util.Sorter与Ext.util.Sortable
Store的过滤：Ext.util.Filter
过滤器.表示可用于容器 MixedCollection 的过滤器. 既可以只是简单地过滤 property/value 对，也可以是一个包含
自定义逻辑的过滤函数(filter function). 过滤器总是被用于 MixedCollections 环境中, 因此当 Store 要过滤或者
搜索其记录时,会频繁地进行创建.
store的分组：Ext.util.Grouper

模板

Ext JS有Template和XTemplate两个模板类。其中Template类是基础模板，提供基础功能，而XTemplate是从Template扩展出来的，具有强大功能的模板。

Ext.Template
要替换模板中数据的位置需要使用{
     }做标记，括号里可以是数字或字符串。数字表示数组中的索引；字符串，表示对象中的
属性名称。如果要格式化输出数据，要在索引或名称后加上冒号：，然后是格式化函数的名称；需要传递参数，使用（）括起来。
例：{
     text:ellipsis(10)}
格式化函数：Ext.String、Ext.Number、Ext.Date和Ext.util.Format。
超级模板：Ext.XTemplate

组件、容器、布局

组件

布局：layout 布局的作用是控制和调整组件区域的大小和位置，几乎所有组件都需要相应的布局类来控制和调整组件
区域的大小和位置。设计页面，使用布局去控制各个区域的位置和大小。
容器：container 管理容器内的组件，包括增加、插入和删除等操作。
面板：是特殊的容器，除了容器的功能外，还固定了结构，主要包括标题栏、顶部工具栏、底部工具栏、右边工具栏、
停靠工具栏和主体等7个部分。
视图：view DataView。视图就是用来显示数据的，Grid和Tree等控件都要与数据打交道，都要显示Store中的数据，它们
必然会用到视图。图标是特例，它们使用图像而不是文本来组织数据。

容器

• 主要作用是管理内部的组件。最简单的容器就是一个HTML元素，例如一个div、一个sapn等。开发中常用的是Panel、Window
  和TabPanel等特殊的容器。

布局

• 决定容器的组件以怎样的形式渲染，以及布局之间是否可以调整大小或位置。垂直布局，边框布局(5个区域，center必须)，无论容器内有一个或多个组件，都要配置布局，用来确定组件是如何放置的。

容器与布局是共生关系，在容器中都会有layout配置项，该配置项决定了容器将使用何种布局方式布置子组件。
注意：布局定义必然是在容器内的。子组件的布局定义只应用在其内部的组件，与子组件本身及其容器的布局无关。布局不由子组件的大小和位置决定其大小和位置，必然由子组件的配置项来决定子组件的大小或位置。

容器：Ext.container.AbstractContainer与Ext.container.Container
	AbstractContainer是容器类的抽象基类，Container是其派生类。在AbstractContainer对象中，只重写了initComponent方法，
没有构造函数，因而其创建会使用Component对象的构造函数。
	组件AbstractComponent对象的构造函数在初始化配置对象、添加事件、实例化插件后，才会调用AbstractContainer对象的initComponent方法。
	
	配置项：activeItem、autoDestory、bubbleEvents、defaultEvents 、defaults、items、layout、suspendLayout
	属性：items
	方法：add、cascade、child、doLayout、down、getComponent、down、getComponent、getLayout、insert、move、
		query、remove、removeAll
	事件：add、afterlayout、beforeadd、beforecardSwitch、beforemove、cardswitch、remove。
	
将body元素作为容器：Ext.container.Viewport。使用Ext.getBody方法把body元素作为el，也就是说，ViewPort的容器元素就是body。
Viewport对象的容器就是body，不能渲染到其他节点下。因此定义renderTo配置项的值为Ext.getBody是可以的。
allowDomMove=false；隐藏滚动条，表示该节点不能移动。

容器不负责显示数据。

面板：面板使用DockLayout作为其构件的布局。该布局可轻松地停靠在面板的4个边上。在面板配置项中，使用dockedItems配置项
就可轻松定义停靠的组件。
	Panel的配置项：bbar、buttonAlign、button或fbar、closable、collapsible、headerPosition、hideCollapseTool
	lbar、minButtonWidth、preventHeader、rbar、tbar、title、titleCollapse和tool。
	面板标题栏构件：Ext.panel.Header与Ext.panel.Tool
	记录和恢复面板属性：Ext.util.Memento
	
布局：基类是Layout。组件的布局：ComponentLayout；容器的布局：ContainerLayout。
	盒子布局：Ext.layout.container.Box为盒子模型提供调整大小的功能：Ext.resizer.Splitter:提供一个分隔条
	垂直布局：Ext.layout.container.VBox
	水平布局：Ext.layout.container.HBox
	手风琴布局：Ext.layout.container.Accordion
	锚固布局：Ext.layout.container.Anchor
	绝对定位布局：Ext.layout.container.Absolute
	边框布局：Ext.layout.container.Border
		边框布局将容器划分为north、west、center、east和south这5个区域，这5个区域
		由子组件的region配置项的值定义的。center区域是必须定义的，其他区域则可有可无。
		north和south区域只要定义高度就行了，它们会自动在水平方向填满整个容器。而west、
		center、east这3个区域，需要定义宽度，一般定义west和east宽度，让center自适应。
		使用split配置项会出现分隔条，如果子组件是面板，可以使用面板的折叠功能，使用配置项
		collapsible。
	自动布局：Ext.layout.container.Auto
	表格布局：Ext.layout.container.Table
	Card：此布局管理多个子组件, 每个都完全填满父容器, 而每次仅显示一个. 此布局样式多用于向导, 实现标签页布局等等. 
		CardLayout的核心方法是setActiveItem. 因为一次只能够显示一个面板, 从一个组件切换到另一个的唯一方式就是 调用setActiveItem传入目标面板(或ID或索引). 布局本身并不提供任何用户交互界面来处理这种切换, 必须由开发人员来实现.

标签面板：Ext.tab.Panel、Ext.tab.Bar、Ext.tab.Tab

根据Grid用途，用视图来显示数据，有视图就要有选择模型和Store。	
TablePanel：包括的构件：视图、选择模型、Store、滚动条和列标题。不负责显示数据。
	GridPanel、TreePanel
TableView：主要作用：以表格的形式显示数据。数据显示错误，很大部分是视图出现了问题，而视图的数据是从Store中来的。
	GridView、TreeView

Grid

一个最简单的Grid需要定义Store和列标题。
列的配置项对Grid来说是必须的。columns内的列定义，是Column对象的配置对象，它
负责列标题的显示及相关列的操作。
	columns:[
		 {
     text:'编号',dataIndex:'id',flex:1},
		 {
     text:'姓名',dataIndex:'name',flex:1}
	]
	dataIndex：指明该列将显示Store中的哪个字段，必须配置。
	text：其值会作为列的标题，如果不想显示标题，则不可设置。
	align：数据的对齐格式。left、center、right
	列的宽度：flex或width
	固定列：fixed
	排序功能：sortable
	隐藏列：hidden与hideable
	禁用列菜单：menuDisabled
	改变列的位置：draggable
	tdCls：设置单元格的样式
自定义单元格的显示格式：
	使用配置项renderer；
		配置项renderer的值可以是一个函数或对象的方法。
	
	使用列对象。

树:

• 树是一个只有一列且没有标题栏的Grid。
• 最简单的树为其定义配置项root就行了。

表单

FormPanel：是放置表单的容器，没有管理表单的功能。
实现表单管理功能的是BasisForm对象。在FormPanel的初始化过程中会创建BasisForm对象
并调用其initItems方法。
BasisForm中方法：
	findField：查找字段
	getValues：返回所有字段的值
	setValues：设置字段的值
	doAction：处理表单的操作

表单的操作主要有提交和加载两个。Ext.form.action.Action
以FormAction为基类，派生出LoadAction和SubmitAction两个基类，这两个类默认都以Ajax
作为数据交换的方式。
为了使用Direct方法提交和加载数据，扩展出了DirectLoadAction和DirectSubmitAction两个类。
为了实现标准的表单提交方式，又扩展出了StandardSubmitAction类。

字段：主要由BaseField、FormField和Labelable这3个对象构成。
常用的验证函数：Ext.form.field.VTypes。主要用于字段的配置项vtype，作用是验证字段
的输入是否有效。
	常用的验证函数：
		alpha：值只能是字母；
		alphanum：值只能是字母和数字；
		email：值要符合电子邮箱的格式；
		url：值要符合互联网地址格式。
	
	使用Label：标签
	Text字段：
		字段的验证方式有三种：①使用vtype配置项；②使用regex、regexText、maskRe；
		③重写validator方法。
	TextArea字段：可以通过cols和rows两个属性来控制元素的高度和宽度。

窗口

Ext.window.Window:窗口是一个浮动的，可调整大小及可拖动的面板。

按钮

Ext.button.Button