Extjs 新特性 简介 使用extjs,sencha 团队开发一个简单的框架,可以为创建在任何类型设备上运行的应用,从手机端到平板电脑再到桌面应用,你将能够产生最佳的用户体验,编写更少的代码量,结合一个引人注目的更好的主题,extjs 拥有所有的资源能让你在任何设备上创建出惊人的用户体验。

1 extjs 和 sencha touch 的合并

 在extjs5 中,已经将 extjs 和 sencha touch 合并了,合并的过程很长,sencha 将框架中的 ext.data, Ext.app 以及更多的内容整合到 core 包中,表现被保留了,并作为 Extjs 属性的 一部分,存放在 ext 包中,在最后,将 sencha touch的表现层中不同方面的组件合并,保存一个文件中,在extjs 6 中为了区分框架中不同的组件,引入了 toolKit 项 ToolKit toolkit 是一个包,仅包含了框架中的表现层的元素,包的组件如: panels, buttons grids 等, 在 extjs6 中有两种 toolKit , 它们分别是:古典(classic)和 现代(modern),应用程序可以选择所使用的toolKit,并添加到程序中的app.json文件中: "toolkit": "classic", // or "modern"

2.通用的 Core

 在toolKits 包的下面是通用 的 Core 包,Core包将会为 data(Ext.data)和应用架构 (Ext.app)提供一个通用的api 接口,通过通用的Core ,应用可以共享代码从而来管理data 以及 viewModels 或后台进程的通信控制逻辑。

3. Sencha Touch

 如果你升级了 sencha touch, 你将立即能够从 ViewModel 和 ViewControler 的访问中获益,在 使用 modern toolkit 和通用 core 时,在extjs5下,你仍可以使用多进程系统 ,鼠标事件将无 缝的转化为事件侦听器如 touchstart,而不需要检测设备的 功能,

 4. 通用应用和智能手机  

  使用extjs6 和 sencha cmd6,你 可以使用任意一个 toolkit创建 通用的应用程序,通过这种方式你 可以创建一个能在移动设备上运行的单个应用程序,像智能手机或企 业桌面应用运行在ie8 或任意设备 或浏览器。你可以在sencha cmd 生成的 app.json 文件中删掉 toollit key 来标明哪个 toolkit 使用哪 个主题,包含一个修改的块。

"builds": {
    "classic": {
        "toolkit": "classic",
        "theme": "theme-

triton"
    },

    "modern": {
        "toolkit": "modern",
        "theme": "theme-

triton"
    }
}

 

就如你所想一样,我们为classic 和 modern toolkit 都设计了主题,但是你可以随意调整主题直到满意。如果在你的 app.json 文件中有一 个 builds 块, “sencha app build" 将会创建所有设计的 builds,并保存在一个独立的文件夹中,另外你还可以通过指向 build key 名称来创建,例如:sencha app build modern

5. Trition 主题  

  extjs 6新增 trition 主题,trition主题是个简约平面主题,该主题的最大特点是:焦点在内容在元素上而不在圆角或梯度上,同时支持字体图标,字体图标大都来自于Font Awesome ,使用Triton 主题,应用程序可以很容易的控制这些可扩展的矢量图标的尺寸、颜色。

支持字体的图标包括: panel 控件、树形节点、form 表单、按钮、复选框、单选按钮、箭头、 gride 的行图标、过滤菜单等一些可视化的元素可以使用字体图标。

6. 触发改变大小

  Trition 主题可以创建适合桌面应用程序或平板应用程序的大小,对于 classic toolkit ,相对于Neptune 和 Crisp 主题为每一个提供一个 "touch-size"的方式来说,更容易管理。对于modern toolkit, 显然取决于用户的css 布局,使尺寸能够更容易控制,在智能手机上, html元素能够自动添加一个x-big 样式类名并测量所有的项,以分配更大的区域。

7.Fashion

 fashion是sencha新增的组件,使用 '*.scss' 文件来绑定主题,fashion 就像sass 语言一样,用一些有用的扩展来支持工具,fashion 是用 javaScript 语言来实现的,只在浏览器中运行,在与 PhantomJS相比,sencha cmd 可以使用fashion ,就像创建app 监听一来来创建主题。这就意味着不再需要 Ruby 系统,这是因为 fashion 运行在浏览器中,不用再次创建样式规则了,更重要的是,我们可以根据 app 监听来扩展并重新生成主题,这在开发中会获到更多的益处。

8.报表

 extjs 在报表显示上,引入新功能,选中的单元格将会被展开,通过设置 extensible:true,这会在按钮的右侧添加一个拖叶或一个小区域块,这个允许当前选中的单元格水平展开及垂直展开  

9.可操作模式(Actionable Mode)和可访问性  

  网格还支持ARIA的“可操作模式”,该模式是原始单元格编辑模式的延伸。这将允许所有类型的单元格内容能够通过键盘获取焦点或激活。这是对于可访问性的巨大进步,这对于超级用户来说,就可以无需鼠标就能导航到网格中的任何地方。

10. LazyItems插件  

 该插件可延迟子组件的渲染,直到呈现的时候再进行渲染,从而降低子组件的实例化和初始化的执行成本。   如,在标签面板中设置deferredRender为true,未呈现的标签就不会对它的后代组件进行实例化和初始化,从而减少开销,直到标签被激活的时候才会进行渲染。

11. 屏幕阅读器支持(可访问性)  

   ARIA功能已经直接到了组件的生命周期,这意味着不再需要指定aria包来获取正确的ARIA行为了。应用程序现在支持屏幕阅读器(类似JAWS)而无需指定引用。

12. 微加载(Microloader)  

  Sencha Cmd 6现在资源方面包含了本地存储缓存,这类似于Sencha Touch的产品的微加载。尽管如此,还是有一些重要的改进: 缓存能在app.json中禁用 只有通过微加载方式加载的内容才不会被删除 只有应用程序的当前版本才可保持在本地存储

相关连接

 http://docs.sencha.com/extjs/6.0/whats_new/whats_new.html 英文版原文

 http://extjs.org.cn/node/751 extjs 中文官网

 http://www.ibm.com/developerworks/cn/web/wa-aj-extjs30/index.html  ExtJS新特性详细介绍

 https://www.sencha.com/ ExtJS 官网(英文版)

 http://docs.sencha.com/ ExtJS 官网文档

posted on 2015-11-21 21:50  wisdo  阅读(6347)  评论(0编辑  收藏  举报