【翻譯】熱門支援技巧

原文：Top Support Tips

作者：Sencha Support Team

Sencha支援小組分享了他們在每月的Sencha新聞通訊中針對Sencha架構的熱門技巧。在本文，將會介紹一些新的技巧和從今年早些時候總結出的很多重要技巧。如果喜歡這些與Sencha架構有關技巧和大量的技術文章，請訂閱每月的Sencha通訊。

Greg Barry：使用Ruby 2的名為Maverick的Sencha Cmd來了

正如你所知的，Sencha Cmd一直依賴於Ruby 1.9.3或以下版本，而使用Ruby 2.0則會出現錯誤。比較古怪的地方是，使用Sass變數的Ext JS主題總被設定為“null!default”。Cmd的Sass版本使用的是舊版本，而新版本在一些變數的行為上做了些修改。Ruby 2.0的重要修改和Cmd使用的Sass版本不相容。所有這些因素造成了相容性問題，這也是為什麼一直要求舊版本Ruby的原因。

不過，在Mavericks的發布版本預設安裝的將是Ruby 2.0。我們做了一些本質的調整，讓Cmd現在可以與Ruby 2.0一起工作了。新版的Cmd將附帶一個Sass版本補丁來防止之前遇到的問題。Hotfix現在已經可以在Cmd 4.0.1 beta版中使用了。

注意：對於目前需要維護的應用程式，最好不要升級到Mavericks，直到發布GA版本的時候再嘗試。

Seth Lemmons：Ext.util.Observable.capture() (Ext JS)

如果希望監聽使用Ext.util.Observable的類的所有事件的觸發情況，可以使用靜態方法capture來實現，例如，通過以下代碼就可以監聽網格中所有的事件：

var grid = Ext.widget('gridpanel', {    renderTo: document.body,    title: 'Capture Example',    heigh: 300,    width: 500,    store: {        fields: ['foo'],        data: [{            foo: 'bar'        }]    },    columns: [{        text: 'Foo',        dataIndex: 'foo',        flex: 1    }]});Ext.util.Observable.capture(grid, function (eventName, args) {    // console.log() will not work on all browsers - modify accordingly    console.log(eventName); // log the event's name as it's fired});

方法capture會調用作為第二個參數傳遞給它的函數。傳遞給回呼函數的參數依次包括：
1、觸發的事件名稱
2、觸發事件時傳遞給事件的參數數組

方法capture不單可以讓你深入了Observable執行個體如何並在何時觸發事件，還能在回調方法中返回false來阻止事件觸發。如果一個類有before首碼的事件，這是用來阻止事件觸發的最佳做法，如果沒有，就可以使用capture這個便利的工具方法來實現。如果想瞭解更多有關Observable的capture方法，可以訪問這裡。

Greg Barry：不再需要autoMaxminzeSencha Touch）

在之前，可以設定調用Viewport功能類的autoMaxminze來實現Web視圖的全螢幕化。這樣可有效隱藏Web應用程式中的頂部或底部工具列。然而，隨著裝置的變化，該配置的功能和作用越來越少，以致不得不去阻止這種變化。事實上，該配置在Touch 2.3.0中已經得到解決，尤其是在使用iOS7的時候。這次，建議的是將autoMaximize從他們的應用程式移除。

Greg Barry：一個儲存Store）多次使用Ext JS）

當使用Ext JS建立應用程式的時候，習慣做法，會給儲存定義storeid，以便在多個組件中共用他們。然後，如果網格A和網格B共用一個儲存，當對儲存進行過濾的時候，兩個網格都會顯示過濾後的資料。有什麼辦法可以在儲存改變時，不讓所以的組件都發生變化呢？不要擔心！

在定義儲存的時候，可以使用“store.storealias”這種方式來定義儲存的別名storealias就是要定義的別名名稱）。

例如：

Ext.define('MyApp.store.MyStore', {    extend: 'Ext.data.Store',    storeId: 'MyStore',    alias: 'store.mystore',    fields: ['foo', 'bar']});

現在，當為組件綁定儲存時，可以為他們綁定不同的儲存執行個體，這樣就讓組件保持獨立：

store: {    type: 'mystore'}

要瞭解更多相關資訊，可閱讀這篇文章。

Mitchell Simoens：分割折線圖Ext JS）

Sencha Ext JS提供了豐富和功能完整的圖表包，它可外掛程式是免費的且可在IE6到最新版本的Chorme等瀏覽器上實現跨瀏覽器工作。一個常見的問題是如何在折線圖上顯示不連續的線。Ext JS要實現這個很簡單，只需要在資料中使用false就可以了。如果返回false，這個點就會被視為非資料點而不進行繪製，而該點之前與之後的點也不會進行串連，以下是一個樣本：

var store = Ext.create('Ext.data.Store', {    fields : ['month', 'foo', 'bar'],    data   : [        { month : 'January',   foo : 7,     bar : false },        { month : 'February',  foo : 8,     bar : 3     },        { month : 'March',     foo : 8,     bar : 2     },        { month : 'April',     foo : 7,     bar : 1     },        { month : 'May',       foo : false, bar : 1     },        { month : 'June',      foo : 5,     bar : 1     },        { month : 'July',      foo : 5,     bar : 1     },        { month : 'August',    foo : false, bar : 1     },        { month : 'September', foo : 7,     bar : 1     },        { month : 'October',   foo : 8,     bar : 2     },        { month : 'November',  foo : 8,     bar : 3     },        { month : 'December',  foo : 7,     bar : false }    ]});                                                                                                     Ext.create('Ext.chart.Chart', {    renderTo : Ext.getBody(),    width    : 500,    height   : 300,    animate  : true,    store    : store,    axes     : [        {            type     : 'Numeric',            position : 'left',            fields   : ['foo', 'bar'],            title    : 'Sample Values',            minimum  : 0        },        {            type     : 'Category',            position : 'bottom',            fields   : ['month'],            title    : 'Month'        }    ],    series   : [        {            type   : 'line',            axis   : 'left',            xField : 'month',            yField : 'foo'        },        {            type   : 'line',            axis   : 'left',            xField : 'month',            yField : 'bar'        }    ]});

在樣本中，將根據foo和bar的值顯示兩條線。由於在5月和8月返回了false值，所以foo線將會分成3段顯示。而bar線則與fool先不同，只顯示一條線。線bar由於1月和12月返回false值，所以不會顯示1月和12月的資料點。

要瞭解