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