天天看點

《Ext JS實戰》——1.5 下載下傳并配置

本節書摘來自異步社群《ext js實戰》一書中的第1章,第1.5節,作者:【美】jesus garcia著,更多章節内容可以通路雲栖社群“異步社群”公衆号檢視

盡管下載下傳ext js的過程簡單,可配置一個使用ext js的頁面卻不像在html中引用一個檔案那麼簡單。除了配置之外,還得了解目錄的層級關系,要知道都有哪些目錄以及它們的用途。

我們要做的第一件事就是得到源代碼。

下載下傳的sdk是個zip檔案,差不多有6mb大小。後面會解釋為什麼這些檔案會這麼大。現在,把這個檔案解壓到一個用于專門儲存javascript的地方。要使用ajax,需要有一個web伺服器。我在自己的計算機上一般會配置一個本地的apache,它是個免費的而且跨平台的web伺服器,不過windows的iis也行。現在看看剛剛解壓出來的内容。

1.5.1 檢查sdk的内容

如果像我一樣檢查一下解壓之後sdk檔案的大小,可能會感到非常驚訝。是的,一個差不多有30mb的javascript架構。圖1-18顯示了解壓後的内容。

《Ext JS實戰》——1.5 下載下傳并配置

看看sdk的内容,會發現許多東西。之是以有這麼多的目錄和檔案,是因為下載下傳下來的包中有多份代碼和css的拷貝。這樣做是為了開發人員可以自由地按照适合自己的方式建構或者使用ext js。表1-1說明了包含哪些目錄及其作用。

《Ext JS實戰》——1.5 下載下傳并配置

盡管釋出包中有這麼多的檔案和目錄,不過要想讓架構能夠在浏覽器中運作起來,隻要很少的一部分就夠了。現在談談該如何根據需要配置ext js。

1.5.2 第一次配置ext js

要想讓ext js能在浏覽器中運作起來,至少需要包含兩個必須的javascript檔案和至少一個css檔案:

《Ext JS實戰》——1.5 下載下傳并配置

作為一個完整的ext js配置,這裡連結了3個核心檔案。我們所做的第一件事就是連結到ext-all.css檔案,這是一個把架構中所有css集中在一起的檔案。接下來,包含了ext-base-debug.js,這個檔案是架構的基礎。最後,包含了ext-all-debug.js檔案,要用這個檔案開發。在配置第一個頁面時,一定要確定把extjs路徑替換成自己開發環境中web伺服器所要引用的架構。

如果還要想用其他的基礎架構該怎麼做呢?應該如何包含它們呢?

1.5.3 配置ext js使用其他架構

要想讓ext js能使用之前提到的那些架構,在引用這些外部基礎架構之前首先要加載一個擴充卡(adapter)。這個擴充卡會把ext-base方法映射到所選擇的外部函數庫,這是最關鍵的一步。如果想使用ext js之外的其他3種基礎架構,可以使用下面的模式。

先看prototype函數庫:

《Ext JS實戰》——1.5 下載下傳并配置

可以看出來,除增加了兩個js檔案以外,剩下的和普通的ext js設定類似。prototype和scriptaculous取代了ext-base,ext-prototype-adapter.js把外部的函數庫方法映射到ext。注意,仍然要加載ext-all-debug.js。對另外兩個例子也如此炮制。

下一個是jquery:

《Ext JS實戰》——1.5 下載下傳并配置

配置jquery和prototype類似。yui的配置也類似,差別就在于要加載不同的基礎函數庫和不同的擴充卡檔案。

最後一個是yui:

《Ext JS實戰》——1.5 下載下傳并配置

現在已經掌握了配置ext-all和其他3種基礎js函數庫的秘訣了。繼續,還是要用ext-all配置,隻不過可以自由選擇用哪個基礎函數庫。在到達代碼層面之前,還需要談談ext配置的最後一個關鍵步驟,即配置對于s.gif的引用。

明智地使用blank_image_url配置

建議在對ext js檔案的包含之後緊接着就設定這個參數,或者放在應用代碼被解析之前。等要測試ext js時,會通過一個例子告訴你在哪放置這個參數。

1.5.4 配置blank_image_url

開發人員經常忽略的一個步驟就是配置ext.bland_image_url,這會導緻應用程式中ui渲染出現問題。blank_image_url屬性所指向的是一個1×1像素的透明圖檔的位置(也叫做一個墊片),它是架構的ui部分的一個關鍵内容,是用來建立圖示的。對大部分使用者來說,這樣做是可以的,不過如果所在的地區無法通路extjs.com,這就有問題了。如果用的是ssl的話,對s.gif的請求是通過http而不是https發出的,這又是個問題,因為這會觸發浏覽器發出安全警告。為了避免這些問題,應該把ext.blank_image_url指向web伺服器本地的s.gif,如:

《Ext JS實戰》——1.5 下載下傳并配置

差不多了,了解了這麼多内容後,我們已經按耐不住要使用ext js了,那還等什麼?現在這就開始吧。

繼續閱讀