作者：Kevin Kazmierczak
Kevin Kazmierczak is a Senior Technical Architect at Universal Mind, an innovative digital solutions agency that fuses the design capabilities of an interactive firm with the the technical expertise of a systems integrator. He specializes in building frontend applications using Objective-C, HTML/JS, and Flex. Kevin holds an MBA and a BA in Computer Science from Alfred University.

介紹

Ext JS提供了大量可高度自定義的直接就可以使用的內部元件。如果元件不在框架中，也可以容易的通過擴充套件類的方式，甚至通過瀏覽Sencha市場來獲取所需要的元件。這工作可能需要花費大量的時間，有時候為了節省時間，會考慮使用沒有包含在Ext JS元件系統的第三方庫。針對這種情況，有許多解決方案，而最簡單的方法就是建立一個自定義封裝元件來處理庫，這樣就可以在應用程式中實現重用。

實現概述

封裝元件的目的是通過將第三方庫所需的邏輯封裝起來以方便配置以及與Ext JS框架實現互動。對於在應用程式中使用多少第三方庫的API，有很大的自由度。如果庫相當簡單，且希望對API的訪問進行控制，那就可以將API的每一個方法都封裝為對應的方法。這樣就可以在想要引用額外的自定義邏輯的時候隱藏對不想公開的方法或攔截方法的呼叫。另一種方式是公開一些API中的根物件，以便其他控制元件可以自由的通過物件直接呼叫任何API方法。在大多數情況下，這可能是最終的解決辦法，不過，不同的專案會有不同。

為了演示這一方式，將為Leaflet建立一個封裝元件Leaflet是一個由Universal Mind的 Vladimir Agafonki建立的開源的Javascript地相簿。在應用程式中將使用這個封裝元件來顯示一張地圖，並提供一個按鈕來將地圖移動到一個指定位置。

Leaflet可以將來自許多不同的地圖服務的地圖塊整合起來，這樣就為地圖的顯示提供了極大的靈活性。在示例中，將使用CloudMade提供的地圖塊。可以到CloudMade的網站上註冊一個免費賬號，然後就可在後續的請求（後面的示例需要使用到）中使用獲得的API金鑰。要想了解更多的與地圖塊有關的資訊，可訪問Leaflet的網站。

新增庫引用

在應用程式中，首先要做的是在HTML檔案中新增庫的引用，這樣才可以使用庫。在示例中，需要在HEAD元素內新增兩行來引用Leaflet。在Leaflet快速入門指南的Leftlet安裝文件中可獲得更多的詳細資訊。

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>

建立自定義元件

接下來要做的是從Ext.Component擴展出Leaflet的封裝元件。Ext.Component會使用一個空白的UI來搭建控制元件的骨架，不過，它提供了所有所需的框架方法以便讓它在任何佈局中都能執行得很好。

在整合第三方庫的時候，通常都需要配置和初始化它來滿足需求。對於示例，需要重寫afterRender方法來處理Leftlet的初始化。這個方法會在自定義元件渲染到DOM並準備好與使用者互動後執行。還需要新增類的別名和引用地圖的配置變數。

Ext.define('Ext.ux.LeafletMapView', {
	extend: 'Ext.Component',
	alias: 'widget.leafletmapview',
	config:{
		map: null
	},
	afterRender: function(t, eOpts){
		this.callParent(arguments);
 
		var leafletRef = window.L;
		if (leafletRef == null){
			this.update('No leaflet library loaded');
		} else {
			var map = L.map(this.getId());
			map.setView([42.3583, -71.0603], 13);
			this.setMap(map);
			L.tileLayer('http://{s}.tile.cloudmade.com/{key}/{styleId}/256/{z}/{x}/{y}.png', {
				key: 'YOUR_API_KEY',
				styleId: 997,
				maxZoom: 18
			}).addTo(map);
		}
	}
});

下面逐句來研究一下afterRender的程式碼：

var leafletRef = window.L;
if (leafletRef == null){
	this.update('No leaflet library loaded');
} else {
	....
}

在這裡嘗試在window.L名稱空間中訪問Leaflet庫。如果不能獲取到庫的引用，就使用一個資訊來更新元件的html，提示載入庫時出錯。

var map = L.map(this.getId());

這裡將傳遞Ext JS的元件id來建立Leftlet地圖物件。預設情況下，由Ext.Component建立的HTML標記是DIV，而這正是Leaflet用來初始化地圖元件所需的。在這裡使用的是在渲染控制元件時Ext框架生成的id，而不是使用硬編碼的id來引用DIV。這樣的好處就是可以在應用程式中建立多個例項。

map.setView([42.3583, -71.0603], 13);

這句將地圖的位置設定為馬薩諸塞州的波士頓的緯度和經度，地圖的縮放等級為13。有許多線上工具可以用來查詢不同地點的緯度和經度。

this.setMap(map);

將地圖引用設定給map變數，這樣就可在後續程式碼中使用它來訪問地圖。

L.tileLayer('http://{s}.tile.cloudmade.com/{key}/{styleId}/256/{z}/{x}/{y}.png', {
	key: 'YOUR_API_KEY',
	styleId: 997,
	maxZoom: 18
}).addTo(map);

這句程式碼將設定Leaflet使用CloudMade的地圖塊。假設你已經建立了一個賬號並註冊了你的應用程式，你就可以將得到一個API金鑰放到YOUR_API_KEY中。不用去擔心那個混亂的網址，當移動地圖的時候，Leaflet會動態去載入地圖塊。如果需要了解更多的資訊，建議檢視Leaflet的API文件。

到目前為止，已經建立好基本的地圖控制元件了，可以在應用程式中使用了。不過，實際上這還沒有完全實現。如果就這樣去使用它，會發現它並不是所期望的效果。地圖的尺寸並沒有填滿布局。Leaflet需要隨時呼叫名為invalidateSize()的方法來調整地圖的尺寸，並讓它渲染成這個尺寸。這個問題在封裝元件中很容易解決。可以重寫onResize方法來實現，這樣，佈局的尺寸變化就可以隨時呼叫地圖的invalidateSize方法。

新增以下程式碼到控制元件：

onResize: function(w, h, oW, oH){
	this.callParent(arguments);
	var map = this.getMap();
	if (map){
		map.invalidateSize();
	}
}

這樣，佈局的改變且有一個有效的地圖引用就可以隨時進行呼叫。如果調整了尺寸，就會告訴Leaflet去執行invalidateSize方法。

現在，就可以在佈局中使用元件了，而且會看到地圖將在提供的佈局尺寸內顯示。如果佈局因瀏覽器調整尺寸或滑塊而改變，將會看到地圖應用了新的尺寸。在自定義的封裝元件中，通過了幾行程式碼就可以讓第三方庫Leaflet在Ext JS佈局系統執行得很好。

使用示例

下面建立一個簡單的Ext JS應用程式來使用這個新的封裝元件。

Ext.Loader.setConfig({
	enabled: true,
	paths:{
		'Ext.ux':'ux'
	}
});
 
Ext.require(['Ext.ux.LeafletMapView']);
 
Ext.onReady(function() {
	Ext.create('Ext.container.Viewport', {
		layout: 'vbox',
		items: [
			{
				xtype: 'leafletmapview',
				flex: 1,
				width: '100%'
			}
		]
	})
});

這裡建立了一個viewport來使用整個瀏覽器的尺寸並將地圖渲染到整個檢視。這樣，將會看到一個波士頓地區的大地圖以及一些簡單的縮放控制。

接下來要做的是處理地圖與外部控制元件的互動。下面將新增一個按鈕，當單擊它的時候，將地圖縮放到一個位置。根據Leaflet文件，這需要呼叫map物件的setView方法，並緯度和經度的座標陣列以及縮放等級傳遞給它。所要做的，就是公開封裝元件在afterRender方法中建立的map物件，然後在按鈕中訪問物件並呼叫它的方法。

在viewport的items陣列中地圖元件的上面新增以下程式碼：

{
	xtype: 'button',
	text: 'Show Buffalo',
	listeners:{
		click: function(){
			var map = Ext.ComponentQuery.query("viewport leafletmapview")[0];
			map.getMap().setView([42.8864, -78.8786], 13);
		}
	}
}

以上程式碼將顯示一個按鈕；當單擊它的時候，程式碼將嘗試去獲得地圖物件的引用，並更新檢視到新的位置。在Ext JS應用程式中，有許多方式來引用元件，包括控制器的refs、Ext.ComponentQuery()等等。對於當前示例來說，最方便的是使用元件查詢來找到在viewport中的地圖元件。一旦獲得引用，就可以呼叫getMap方法來獲得Leaflet的地圖例項並直接呼叫任何Leaflet的APi方法。

從這裡開始，就可以根據自己的需要來實現元件。可以針對所有的安裝引數新增配置屬性，這樣就可以使用Ext JS的配置引數代替第三方庫的約定來自定義元件的每一個例項。還可以新增新屬性來切換庫功能。例如，可以新增一個屬性來啟用Leaflet的定位功能，這樣就可通過瀏覽器的Geolocation API來找到你的位置。可以在我的GitHub庫找到更完整的示例。

小結

所有的庫都會有不同，且會出現更多的挑戰，不過，這個概念將有助於在Ext JS或Sencha Touch應用程式中整合他們。在Sencha市場或GitHUB已經有許多封裝元件，因此可能不需要建立你自己的封裝元件。如果找不到所需要的庫，那就要建立自己的封裝元件，並將它分享到Sencha開發社群。