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

 

面板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的主题样式借助了新工具来实现的,内部透过转换Compass
SASS
来作为主要CSS输出工具。SASS为CSS标准的超级,加入了许多新的高级功能。

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

Markup的不同

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

文档

  • 支持类更多的新元素(requires、mixins等)
  • 支持遗留项元素
  • 记录浏览历史
  • 内涵例子、视频等
  • 关注话题
  • 多框架和版本的支持
  • 本地搜寻
时间: 2024-10-02 03:48:17

Ext 4 概述(七)之面板Panel & 杂项的相关文章

Ext 4 概述(一)

For both extjs and ext core Ext 4概述 Summary: Ext4概述 Author: Brian Moeskau (译者Frank Cheung ) Published: 2011年三月二十九号 Ext Version: Ext 4.x Languages: Chinese   Ext 4有志诚成为Web程序其革命性的开发平台.框架中的每一个首要的组件几乎都作了改善,而且属于相当大幅度的改善.对于Ext3来说--4.0许多组件以及子系统都是表现得焕然一新!本指南

Ext 4 概述(五)之布局Layout、组件Component、Form

Layout 参考资源 Ext 4 Layouts (video) Ext 4 Layouts (slides ComponentLayout ComponentLayout是一种新型的布局方式,许多复杂的组件就采用这种布局(与之对应的为ContainerLayout,"ContainerLayout"--传统基于容器布局的新名字)来计算内置元素的大小尺寸,以响应resize的调用.Field字段组件的FieldLayout布局,关于labell控件和input元素控件的大小尺寸和定位

Ext 4 概述(四)之 ARIA、Data、Draw、Fx

Ext JS 参考资源 Intro to Ext 4 (video Ext 4 Architecture (video) 通用问题 适配器(Adapters) 之前的各个Ext版本中都可以透过使用适配器(adpaters)的方式转换第三方的JavaScript库为我所用.Ext4的话就没这支歌仔唱了.改朝换代后,Ext JS应用程序的底层库唯一限定为Ext Core.不过我们依然可以继续让Ext Core与别的JS库共存于一个JS运行时(实际上这就是为什么一些JavaScript对象其原型的方法

Ext 4 概述(二)之Ext Core

Ext Core 新型类系统 参考资源 Ext JS 4的倒数:动态加载和新的类机制(上) Ext JS 4的倒数:动态加载和新的类机制(下) Ext JS 4 的类机制主要围绕传统OO模型而设计,弥补了Prototype OO不足.虽然性质上仍为模拟的手段,但包含了比较完整的OO特征,并且保持对旧Ext3类机100%兼容.Ext JS 4(连同 Ext Core)提供的新功能有: 继承方面Ext.defined代替了原来Ext.extend的写法. 自动计算依赖关系及动态类加载. 多态 静态成

Ext 4 概述(六)之Grid

数据表格(Grid) 这次升级Ext 4全部重写了Grid组件.显然,诸多理由和原因迫使我们升级Grid,但Ext 4 Grid向后兼容方面真的很难顾全.为此,我们将会提供一份关于Grid在Ext3升级到Ext4的指南. 智能化渲染 旧Ext JS 3 Grid工作起来还是蛮不错的.但透过"最小公分母(least common denominator)"的方法论来确定其各种功能的话,很容易带来一点不足的就是,伴随着Grid的每一项功能,都会生成大量的HTML Markup产生.我们不得

Ext 4 概述(三)之Env命名空间 & 语言增强包 & Ext.Function

Env命名空间 提供浏览器和操作系统的相关信息,还有告诉我们现代浏览器提供了什么功能. Ext.env.Browser 该类提供了全部浏览器的元信息(名称.引擎.版本.是否 Strict 模式等等. Ext.env.FeatureDetector 这是一个在 Ex JS 3 中没有类,完全新的功能,其功能在于检测浏览器特性如何,主要针对现代 HTML5 和 CSS3 的特性,包括移动平台在内的特性列表,有: CSS 变形.动画.转换 Canvas.SVG.VML 触控能力.方向 导航 Geolo

《七周七数据库》一一第1章 概述

第1章 概述 七周七数据库当前是数据库世界的一个重要时刻.多年来,无论针对的问题是大还是小,关系模型一直是事实上的选择.我们不指望关系数据库会很快消失,但是人们正在从RDBMS的迷雾中走出来,寻找替代的方案,如无模式或可替代的数据结构,可简单复制,具有高可用性,可横向扩展,以及新的查询方法.这些选择统称为NoSQL,而NoSQL占据了本书的大部分内容. 本书将探讨七种数据库,涉及各种数据库风格.在阅读本书的过程中,你将了解每个数据库具有的各种功能和折中,如持久性与速度.绝对一致性与最终一致性等,

Ext JS 4 概述

Ext 4概述 全文详见:http://www.sencha.com/learn/Guide:Ext_4_Overview(Chinese) Ext 4有志诚成为Web程序其革命性的开发平台.框架中的每一个首要的组件几乎都作了改善,而且属于相当大幅度的改善.对于Ext3来说--4.0许多组件以及子系统都是表现得焕然一新!本指南会向您提供有关Ext3到Ext4期间变化所呈现的一方面. 如果您在阅读本文档时正好发现任何问题,请积极反馈,或来到Sencha论坛<迁移Ext3到Ext 4>的帖子还有来

EXT学习总结

ext概述:     ExtJs初期仅是对Yahoo! UI的对话框扩展,后来逐渐有了自己的特色,深受网友的喜爱. 发展至今, Ext除YUI外还支持Jquery.Prototype等的多种JS底层库,让大家自由地选择.该框架完全基于纯Html/CSS+JS技术,提供丰富的跨浏览器UI组件,灵活采用JSON/XML数据源开发,使得服务端表示层的负荷真正减轻,从而达到客户端的MVC应用! ExtJs支持多平台下的主流浏览器 Internet Explorer 6+ FireFox 1.5+ (PC