【翻譯】熱門支援技巧

作者：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版本更新檔來防止之前遇到的問題。修補程式現在已經可以在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：不再需要autoMaxminze（Sencha 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月的資料點。

要了解更多關于字段觸發的資訊，可以閱讀這裡：https://fiddle.sencha.com/#fiddle/mu

Greg Barry：通過Sencha Touch按鈕的靈敏度來建立響應式應用程式（Sencha Touch）

由于裝置的分辨率越來越大和越來越好，一些使用者可能會碰到Sencha Touch按鈕靈敏度的問題。不用擔心，在Sencha Touch 2.2.0中，引入了一個名為moveDistance的新事件識别配置項。moveDistance會從touchstart事件開始，檢測像素的最大距離來決定是否觸碰操作。對于大的裝置，預設值是8像素，可能有點太低，是以一些觸碰可以不予理會。要調整這種靈敏度，隻需要在應用程式中添加以下代碼：

Ext.application({
	name : 'MyApp',
	eventPublishers : {
    	touchGesture : {
        	recognizers : {
            	tap : {
                    xclass   	: 'Ext.event.recognizer.Tap',
                    moveDistance : 20 //This was adjusted from the default 8
            	}
        	}
    	}
	}
});      

要了解更多有關moveDistance的資訊可閱讀這裡。

Seth Lemmons：使用串聯-更快的檔案傳輸 (Sencha Cmd)

很多時候，開發人員會使用Sencha Cmd來建立并生成Ext JS或Sencha Touch應用程式，這樣，就隻需要在首頁中連結Cmd生成的JavaScript檔案all-classes.s檔案。但是，是否考慮将所選擇的檔案串聯起來進行壓縮以實作更快的檔案傳輸嗎？

對于使用選擇檔案建立簡單的檔案（不是應用程式中使用requires配置項所依賴的類），可以使用fs和concat指令。

例如，要串聯JavaScript檔案A和B，可以使用以下指令：

sencha fs concat -to=concatenated.js -from=file-a.js,/file-b.js      

或者，如果希望壓縮輸出，可以這樣：

sencha fs concat -to=concatenated.js -from=file-a.js,file-b.js and minify -yui -from=concatenated.js -to=minified.js      

* -yui 或 -closure 是可用的壓縮選項

通過以下這騙文章可以了更多有關該功能的資訊：http://docs.sencha.com/extjs/4.2.1/#!/guide/command_advanced

Greg Barry：壓縮實戰（Sencha Cmd和Ext JS）

有時候可能需要建立未經壓縮的的産品生成。很幸運，這是非常簡單的事情。

打開production.properties配置，位于這裡：

.sencha/app/production.properties      

找到後，就可以編輯壓縮設定。

如果要禁用YUI壓縮，可以修改為：

build.compression.yui=1      

要禁用CSS壓縮，可以這樣修改：

build.css.compress=true