Sencha Touch 2.1 更新

October 24, 2012 | Jamie Avins

<a href="http://www.sencha.com/blog/whats-new-in-sencha-touch-2.1/">http://www.sencha.com/blog/whats-new-in-sencha-touch-2.1/</a>

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.

在 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.

（……圖表接觸較少，而且篇幅，暫且不譯……）

舊版實作 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 &gt; .x-dock-horizontal &gt; .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 &gt; .x-dock-horizontal &gt; .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.

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.

Sencha Touch 2.1 GA 将于十一月發出（——譯注：已正式釋出）。請關注我們的部落格有關的報道。

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