布局
1.ComponentLayout 布局
在响应调整大小的请求时,复杂组件运用ComponentLayout来完成内部元素的定型。比如FieldLayout管理组件中的标签和输入元素的尺寸和位置。
2.FormLayout
在EXT JS4中不再使用FormLayout。
3.BorderLayout
EXT JS4中的BorderLayout完全兼容EXT JS3。
面板标题垂直定向,所以东、西区域被替换成旋转90度的垂直的标题。定位器标题可以使用布局中的getPlaceholder方法。定位器直到组件首次收缩时才会被渲染。面板可以使用所有Ext.panel中的的方法。面板作为一个容器的子类,也继承各种容器的方法。
另一个小的区别是是EXT JS4不再支持cmargins配置。这让它更容易产生一个在收缩和扩展方面都很好的布局。
组件
所有浮动的组件都用z-index,它由ZIndexManager来管理,继承来自EXT JS3的WindowGroup类。默认情况下,通过调用show方法渲染在页面中浮动的组件(比如窗口),是由Ext.WindowManager来管 理的。所有浮动的组件有toFront和toBack方法来调用 ZIndexManager。
表单
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选项。这样在性能上不理想。因为它每秒就要调用几次整个表单性能验证。
在一些情况下,轮询或许依旧有用。当字段被编辑(如剪切、粘贴)时,有些浏览器(特别是Opera和旧版的Safari)并不总是触发事件。处理这些边缘 的情况下,你可以用新的在FormPane上的pollForChanges配置为字段值的变化l建立间隔轮询,这引发了与上面相同的事件流。然而轮询在 性能上还不是很好,它比EXT JS3的轮询缺少集中性,因为它每一次只检查值的变化,而不是强制验证(价值分析、数据转换、数据和模式匹配)。
这一系列事件成功地检测出各种支持的浏览器中几乎所有用户做出的改变。
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:true4.拖拽组件
通过new Ext.util.ComponentDragger,任何组件都可以拖拽。draggable:true
5.Splitter
通过Ext.resizer.Splitter组件来管理他们邻近的兄弟姐妹的大小。
http://blog.sina.com.cn/s/blog_7772df1f01018omk.html
http://stevenschwenke.de/migratingFromExtJS3ToExtJS4