面板Panel
支持了边界接触(Docking)
Panel的改变之一便是通过面板特定的组件布局类(a panel-specific
ComponentLayout)来负责管理其边界内所接触的元素项。面板body元素会铺张至任何空白的位置。任何组件都可以通过设置目标面板的dockedItems配置项属性来相接触,而且对方面板的dock属性也要与之设置好才行。如此一来,Ext3中困难重重的水平界工具条现今已大幅改进其灵活性,在Ext4中轻而易举地实现上述功能。
头部Header的改进
头部Header 现今为容器子类的第一类公民,从而获得子组件管理与布局的特性。你可以设定headerPosition的配置为
'top'、'right'、'bottom'或'left'的其中之一来决定和ader所依靠的位置(new docking support)。
Tool工具按钮(即像关闭、最小化此类的按钮)虽然在Ext3中都有,不过现在是属于Component的子类了,显得更灵活。
Resizer
Ext很早就有调节大小的控件,但只为DOM元素服务。现在Ext
4任意组件也可以透过Ext.resizer.Resizer达成调节大小的一方面功能。这对浮动的组件比较有用,或者说没在Ext容器体系以外渲染组件的时候,将会派上用场。
只要设置组件resizable:true的配置项,那么将会分配多个调节手柄到组件的边界上。默认用一个代理元素来产生调节大小的效果,mouse
up之后就会真正让组件的大小进行变化。具体的调节行为可以通过修改配置项对象resizable,——这个对象便是Resizer类的参数对象。
ComponentDragger
Ext一向支持多种方式的拖放支持,不过尚在DOM元素的级别。Ext
4改进后,新引入的Ext.util.ComponentDragger提升到组件级别,使得组件的拖动更简单。ComponentDragger对浮动组件比较有用,对非容器模型的UI控件也是有的。
只要设置组件的配置项draggable:true,这个组件就可以通过鼠标来拖动了。Windows本身就是可拖动的。拖动期间,被拖动的dragger实际是一个空白的“幽灵”,鼠标松开后,面板或窗体移动到目的地位置,然后这个“幽灵”也会消失。指定draggable的配置项可以修改dragger行为,该配置对象同样适用于ComponentDragger的配置对象。
分割栏 Splitter
箱子布局HBox和VBox都可以包含Ext.resizer.Splitter组件,用于调整箱子之间的尺寸。最小和最大的尺寸都可以支持的。默认下,对箱子布局其中一个flex项进行调整大小的话,就会把原来的flex的值变为精确的像素值,flex值将会删除。如果不想这种情况出现,可以配置maintainFlex:true就可以保持flex值,哪怕在调整大小操作之后。但这只适用于分割栏划分两块中的其中
一块。
TabPanel
与其他众多Ext的组件一样,组成一个TabPanel的主要部分,已被分解并成为Ext4组件之第一公民。Tab本身在Ext3只是若干DOM元素,现在Ext4中却是重新认识Tab为一个”按钮“,容纳这些Tab的容器则就是一个容器。各方面显示,4.x的TabPanel比起Ext3提升的灵活性是显著的。
以上的做法,就是从包含内容的子面包中分离出来这些tabs,形成不同的小组件。正因为这样的分离,我们现在可以允许了tab面板中显示标题titile、工具按钮等在旧Ext3中无法想象的功能特性。
工具条 Toolbar
Toolbar现在为容器之第一公民了,加入新组件或自定义Toolbar布局的话,比起Ext3来得更加容易。
主题(Theming)
承蒙厚爱,Ext之主题一向被认为出彩的地方,看起来很好,可修改起来却不容易。虽然Ext
3通过分离结构以及可视化样式表改善了主题制定任务,但是尚不足够,仍有冗余、繁杂的浏览器私有特性以及一个关键,便是CSS本身语言不足所带来的问题。
参考资源
Compass与SASS
Ext的主题样式借助了新工具来实现的,内部透过转换Compass
和SASS
来作为主要CSS输出工具。SASS为CSS标准的超级,加入了许多新的高级功能。
- 内嵌选择器
- 变量
- 多态
- 选择器的继承
- 编译和压缩
- 哪些组件需要的样式就导出,不需要的样式就不导出
Markup的不同
Ext现在支持了特定版本或浏览器的组件markup,比起Ext3跨越了一大步。
文档
- 支持类更多的新元素(requires、mixins等)
- 支持遗留项元素
- 记录浏览历史
- 内涵例子、视频等
- 关注话题
- 多框架和版本的支持
- 本地搜寻