Ext 4 概述(七)之面板Panel & 杂项

简介:   面板Panel 支持了边界接触(Docking) Panel的改变之一便是通过面板特定的组件布局类(a panel-specific ComponentLayout)来负责管理其边界内所接触的元素项。

 

面板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本身语言不足所带来的问题。

参考资源

Ext 4 Theming (video)

Ext 4 Theming (slides)

Compass与SASS

Ext的主题样式借助了新工具来实现的,内部透过转换CompassSASS 来作为主要CSS输出工具。SASS为CSS标准的超级,加入了许多新的高级功能。

  • 内嵌选择器
  • 变量
  • 多态
  • 选择器的继承
  • 编译和压缩
  • 哪些组件需要的样式就导出,不需要的样式就不导出

Markup的不同

Ext现在支持了特定版本或浏览器的组件markup,比起Ext3跨越了一大步。

文档

  • 支持类更多的新元素(requires、mixins等)
  • 支持遗留项元素
  • 记录浏览历史
  • 内涵例子、视频等
  • 关注话题
  • 多框架和版本的支持
  • 本地搜寻
目录
相关文章
WPF项目中不支持 ResizingPanel,未在类型“ResizingPanel”中找到可附加的属性“ResizeWidth”
WPF项目中不支持 ResizingPanel,未在类型“ResizingPanel”中找到可附加的属性“ResizeWidth”
|
中间件 iOS开发
Axure实战12:创建一个GuidePage引导页示例
Axure实战12:创建一个GuidePage引导页示例
349 0
Axure实战12:创建一个GuidePage引导页示例
|
存储
Confluence 6 用户宏示例 - Formatted Panel
下面的用演示了如果还写一个用户宏,并在这个宏中创建一个格式化的面板,并且指定颜色。将会创建下面的面板: (Title)   注意:这个面板的标题为空,如果你没有给这个面板标题参数的话。
1414 0