开发者社区> sp42> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Sencha Touch 2.1 更新

简介: October 24, 2012 | Jamie Avins http://www.sencha.com/blog/whats-new-in-sencha-touch-2.1/ 啥更新了?What’s New? Sencha Touch 2.1 将是 Sencha 移动框架的下一新版本。
+关注继续查看

啥更新了?What’s New?

Sencha Touch 2.1 将是 Sencha 移动框架的下一新版本。2.1包括了下列关键更新:性能上的极大改进、正式支持图表、高级列表 List 控件,以及通过 Sencha Mobile Packager 的增强原生支持。

Sencha Touch 2.1 is our next release of the Sencha mobile framework. The 2.1 release includes the following key upgrades: significant performance improvements, charting support, an advanced list component, and enhanced native support through the Sencha Mobile Packager.

性能改进 Improved Performance

在 Sencha Touch 2.0 中令到开发者一点不爽的地方在于,进行内嵌布局的时候遭遇极大的性能问题。后来我们发现,只要把模板割裂开来,而且尽可能提供更多的信息给浏览器知道,即可改善该问题。这点优化不会影响 API 层面,但 DOM 结构以及某些 CSS 样式类就会不同。开发者在升级 Sencha Touch 2.1 的时候请注意这个变化,具体就是某些 CSS 选择器应该更新一下。

In Sencha Touch 2.0 some of our developers experienced nested layout performance issues. Our investigations found that by isolating panels and providing more layout information to the browser, the framework and your application can perform better. This implementation did not change our API, but some small changes to the DOM structure and additional CSS class names are now used to provide this enhancement. Developers of application with custom CSS should review their selectors with this update.

改进的地方还不止一点,当组件或元素控制可视之时则再不需要遍历 DOM,那是因为使用了 CSS 的 transitionEnd 的事件来检测 painted 事件。既然我们无法在 erased 事件中做到这一点,所以我们建议避免你这样做,因为它可能会降低性能。最后,我们新增了任务队列 TaskQueue  的机制,以便优化读、写的操作尤其批量的方式下的操作,因为批量读写很容易引发 DOM 回流。

Another under the hood performance improvement is a change to the ‘painted’ event which uses the CSS transitionEnd event to detect when elements and components are visible instead of having to traverse the DOM. Since we cannot do this for the ‘erased’ event, we recommend avoiding this event where you can as it can degrade performance.

Lastly, we have added a TaskQueue mechanism which helps us batch read or write operations together and prevent interleaving of DOM Read and Write operations in between internal DOM reflows.

图表Sencha Touch Charts

(……图表接触较少,而且篇幅,暂且不译……)

高级列表组件之无限翻页Advanced List component with Infinite scrolling


旧版实现 Formerimplementation

1. 新增了一项Only 1 additional item is loaded
2. 有更新一项,前面那一项被“循环再用”The component is recycled through the list with refreshed content

数据量一大,List 组件就吃不消!Sencha Touch 2.1 新的列表就是为了克服这一致命弱点而来的!此外,除了性能问题,控制列表项比以前更容易了,你只要配置好 itemConfig 和 itemTpl 两项就可以动态转为列表项配置结构,只需配置一次。奥秘在于,我们不但重构了 DOM 的结构,而且还重新设计了数据的绑定方式: 数据源 Data Store 和 DOM 元素之间不再一一对应。于是 DOM 结构包括样式肯定有所改变:例如,要修改列表项的内/外边距,你要把这样的 CSS 选择器“.x-list-item” 改为 “.x-list-item > .x-dock-horizontal > .x-dock-body”。看看例子 TouchTweets,可以反映上述的问题,里面都没有了 DataView,直接用新的列表控件替代。另外,例子中你还能看到新版插件 PullToRefresh 和 ListPaging。

Sencha Touch 2.1 also includes a new List component.The new implementation no longer has degraded performance when using lists with a large number of items in them. In addition, lists can use components if you specify them with an itemConfig and itemTpl will be converted to an itemConfig dynamically if you specify one. This is due to the list no longer being bound one-to-one between a Data Store and the DOM elements. Due to these changes, the DOM structure was altered for List, and you may need to change some CSS selectors to add appropriate styling to your lists. Typically, you need to change the selector from '.x-list-item' to '.x-list-item > .x-dock-horizontal > .x-dock-body' for any padding or margins you may have added. We changed the TouchTweets example with the new implementation; instead of using a component based DataView, it now uses the new List. It’s a good example of using the new List component with dynamic large lists. This example also shows the updated PullToRefresh and ListPaging plugins.

原生打包器 Enhanced Native Support through the Sencha Mobile Packager

Sencha Moblie Packager 包含在新版 Sencha Cmd 中。之前的版本仅是一个 SDK 工具,这次发布新增一个 native 打包器功能。你可以在测试机中、模拟器上面跑你的 apps,Packager 都为你准备好,可试试利用 Contact 联系人的 API 获取电话簿, iOS 或 Android 亦皆无问题。你可以对 packager 导入 iOS 的 info.plist 原始数据,安卓的话通过 rawConfig 导入 AndroidManifest.xml。根据大家的反馈,例如 packager 非管理员的访问这项需求,我们就实现了,——安装的时候不再需要管理员身份。

The Sencha Mobile Packager is included in the new Sencha Cmd, previously known as the SDK tools. In this release, we have enhanced native support. You can now directly run your app on your device as well as the simulator using the native packager. We have also added read only access to the device Contact API for both iOS and Android. The packager config also lets you pass in "raw" data to the iOS info.plist and Android AndroidManifest.xml through the rawConfig key. We also heard your feedback about non-admin access to the native packager, and we have updated the setup so admin access is no longer required.


交付日期 Availability

Sencha Touch 2.1 GA 将于十一月发出(——译注:已正式发布)。请关注我们的博客有关的报道。

Sencha Touch 2.1 GA will be publically available in November. Please watch our blog for the release announcement.


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
sencha touch
引用:http://blog.csdn.net/flyerwing/article/details/5826592 Sencha Touch 是第一款基于 HTML5 的手机开发框架,提供五花八门的界面UI组件用以开发丰富特效的手机应用程序。
824 0
Sencha Touch 2.4 callParent() 用法
callParent() 用法 方法介绍 用来调用父类的同名方法,并传参,这在从一个框架类派生且要重写诸如onRender这样的方法时会经常看到。 传参方式 1.arguments Ext.define('App.
670 0
Sencha Touch 历史支持
路由、深链接以及后退按钮 Routing, Deep Linking and the Back Button Sencha Touch 2 提供完整的历史与深链接的支持,使得我们的 Web 应用拥有以下两点大的好处: 浏览器的“后退”按钮在你的应用中有效了,也就是说,虽然按下了后退键,但浏览器并不会立刻刷新,而是仍停留在当前的页面中。
663 0
sencha Touch 2.4 学习之 XTemplate模板
XTemplate模板 DEMO Ext.onReady(function() { //数据源 var data = { ...
796 0
Sencha Touch xtype对应的class
Sencha Touch 2的有效xtype   xtype Class ----------------- --------------------- actionsheet Ext.
557 0
Sencha Touch 2.0 组件:Carousels、List、TabPanel 之用法简介
Carousels 组件Carousels,翻译过来“传送带”的意思,顾名思义,仿佛屏幕背后就有一传送带,用户发出向左或向右的指令,即可命令传送带“移动”。移动设备上的屏幕就是当前显示的内容。在中间的那个“一点点”图案即为指示器,指示器可以告诉你剩余有多种张待现实的页面。
400 0
+关注
sp42
移动项目技术负责人。多年全栈经验,熟悉 Java 和 JS,CSDN 博客技术专家,著有《ExtJS 详解与实践》等书。
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载