Extjs4与Extjs3的区别

布局

1.ComponentLayout 布局

在响应调整大小的请求时，复杂组件运用ComponentLayout来完成内部元素的定型。比如FieldLayout管理组件中的标签和输入元素的尺寸和位置。

2.FormLayout

在EXT JS4中不再使用FormLayout。

3.BorderLayout

EXT JS4中的BorderLayout完全兼容EXT JS3。

面板标题垂直定向，所以东、西区域被替换成旋转90度的垂直的标题。定位器标题可以使用布局中的getPlaceholder方法。定位器直到组件首次收缩时才会被渲染。面板可以使用所有Ext.panel中的的方法。面板作为一个容器的子类,也继承各种容器的方法。

另一个小的区别是是EXT JS4不再支持cmargins配置。这让它更容易产生一个在收缩和扩展方面都很好的布局。

组件

任何组件的子类现在可以被设置为可浮动的，使用floating:true的配置即可。浮动的组件可以被设置为可拖放的或可调整大小的。浮动的组件也可以作为子元素添加到任意一个容器，在这种情况下，他们将不参与容器的布局，但会浮在容器之上。

所有浮动的组件都用z-index，它由ZIndexManager来管理，继承来自EXT JS3的WindowGroup类。默认情况下，通过调用show方法渲染在页面中浮动的组件(比如窗口)，是由Ext.WindowManager来管 理的。所有浮动的组件有toFront和toBack方法来调用 ZIndexManager。

被添加到特定容器中的浮动组件在被渲染时要获得ZIndexManager引用。通常,这将由一个 Ext.WindowManager来提供。他们首先从要求z-index管理的容器中寻找一个祖先容器。但如果浮动组件的浮动容器（如一个窗口）的后代 的话，那么这个窗口将创造出它自己的ZIndexManager实例，窗口中所有浮动组件都将由这个窗口的z-index来管理。

这是一个巨大的改进，在先前的其他版本的EXT中，浮动组件的复杂安排可能很快导致不同组件之间的z-index冲突。现在，例如，下拉列表框的下拉功能永远是能在窗口上正确的管理。

表单

1.Layout

在EXT JS3 中，FormPanel使用FormLayout类来定位字段的标签、输入框、误差指标等。在EXT JS4中，FormLayout被彻底移除完，它使用标准的布局,来统筹安排。这使得它现在可以在任何表单中使用任何一种标准布局，也使得创建定制表单布 局比EXT JS3更简单。EXT JS4中，FormPanel的默认的容器布局是anchor。

2.FieldContainer 　　　

　EXT JS4从layouts引入了一个新的管理类:Ext.form.FieldContainer。这是一个标准的Ext.Container，它允许添加 标签和错误讯息，采用的配置与Ext.form.Labelable所支持关于标识和位置误差的配置相同。当字段输入占用实际的空间时，容器的子元素将局 限于同一空间中。这样就可以很容易地将任意组件群添加到表单中，并排列起来。

3.Field as Mixin

EXT中一个长期存在的困难是增加一个没有字段的组件到一个有类似字段性能的表单（如图层、验证、值的管理等）。在EXT JS3中，简单地继承字段行为的唯一的方法是 成为Ext.form.Field的直接子类。但是在现实中，许多组件必须成为字段类外的其他类的子类。因为EXT JS不支持真正的多重继承，如果将字段的代码直接嵌入自定义类中，结果通常是复制。至少可以说，这种发放是不理想的。

EXT JS4支持混合类型作为其更新的类体制的一部分，它不再是一个问题。字段可以被用作其他组件的混合类型，使它很轻易为几乎任何形式的服务提供的完整字段的 API支持。如果默认的字段行为需要定制(例如，通常重载getValue和setValue)，你可以很轻易地根据需要重载方法。

4.Validation

当用户在输入数据，创建表单时，一个共同愿望是给用户字段验证的反馈尽可能及时。采用EXT JS3可以实现，但是比较笨拙，要求监控FormPanel选项。这样在性能上不理想。因为它每秒就要调用几次整个表单性能验证。

在EXT JS4中，我们重写表单验证，使得及时反馈更具操作性。它的实现，主要是实施了一项新的事件流：

   # 输入字段监听一系列浏览器的事件。当用户做出任何变化，包括打字、剪切、粘贴、将文本拖到字段中时，我们就能够通过任何可能的方法，立即探测出来。我们处理这些事件，将结合起来，当观测到字段的值改变的时候触发改变事件。

  #每一个字段在它的值发生变化时验证自身。当其有效性变化（由有效变无效，或由无效变有效）时，它触发一个新验证改变事件。

  #当任何由字段触发的验证改变事件导致整个表单的有效性变化时，BasicForm触发自己的验证改变事件。

这个新事件流允许立即反馈给用户有关表单的验证信息。因为它是基于事件而不是轮询，性能优异。因此，它是默认的行为，尽管它可以很容易被禁用。

在一些情况下，轮询或许依旧有用。当字段被编辑（如剪切、粘贴）时，有些浏览器(特别是Opera和旧版的Safari)并不总是触发事件。处理这些边缘 的情况下，你可以用新的在FormPane上的pollForChanges配置为字段值的变化l建立间隔轮询，这引发了与上面相同的事件流。然而轮询在 性能上还不是很好，它比EXT JS3的轮询缺少集中性，因为它每一次只检查值的变化，而不是强制验证（价值分析、数据转换、数据和模式匹配）。

当检测到字段的值变化时，各个字段的验证被触发(假定validateOnChange配置是有效的)。用来检测值变化的浏览器事件是通过checkChangeEvents配置来定义的，并将以下列为默认情况：

  # IE浏览器中的变化
  #所有其他的浏览器的改变、输入、文本输入、按键、拖放

这一系列事件成功地检测出各种支持的浏览器中几乎所有用户做出的改变。

EXT JS3通过按钮属性支持将按钮上的formBind属性添加到表单，使其能在表单的有效性改变时自动启用、禁用。在EXT JS4中，这被扩展了。这样formBind可以被指定在FormPanel中任何组件上。

5.FieldDefaults 　　　

　EXT JS3中FormLayout中的一个快捷的特点是允许开发者使用FormPanel中hideLabels,labelAlign等配置属性从一个单一 的配置中配置布局表单内各个字段。由于EXTJS4为表单容器使用了标准的布局，它就不便于为各个领域或容器一次又一次地指定字段布局属性。因此 FormPanel有一个fieldDefaults配置对象，指定了各个领域默认配置的值。

6.BasicForm 　　　　

尽管在EXT JS3中BasicForm最经常限于FormPanel的内部使用，它已经在EXT JS4中重构使它更灵活、更容易。它不再需要相关的容器为所有字段提供一个 元素，当添加和移除字段时，不需要它的容器来手动通知 BasicForm。因此，它已经从FormPanel中彻底的解脱，可能被用来管理任何容器内的表单字段。

网格

1.智能渲染

2.规范化布局

3.特征支持

4.滚动条

5.编辑改进

6.数据视图

面板

1.停驻支持

dockedItems配置属性
dock属性：用来指定停驻在哪个边界上。

2.标题改进

标题可以用headerPosition配置成'top'，'right'， 'bottom' 或 'left'。

3.调整大小

任何组件都可以通过new  Ext.resizer.Resizer或它关联的组件来调整大小。resizable:true

4.拖拽组件

通过new Ext.util.ComponentDragger，任何组件都可以拖拽。draggable:true

5.Splitter

通过Ext.resizer.Splitter组件来管理他们邻近的兄弟姐妹的大小。

http://blog.sina.com.cn/s/blog_7772df1f01018omk.html

http://stevenschwenke.de/migratingFromExtJS3ToExtJS4