翻譯 Ext JS最新技巧 2016 3 4

原文：

top support tips

ext js的grid是乙個便於在布局中顯示資訊的偉大工具。有些使用者可能會希望將這些資訊列印為會議資料或宣傳材料，而且會希望在列印的時候，能新增水印以便進行版權保護、保密或作為品牌的一種方式。

這個很容易實現，只要在ext js的grid中為它指定乙個樣式就行了，而這只需要一些簡單的css技巧。

實現這種效果的關鍵是修改單元格的樣式，並在grid中插入不透明且不會遮蓋grid內容的背景。

要做到這一點，首先是建立乙個新的樣式類，例如，樣式類的名稱為「watermark」，並將它應用到grid的cls配置項：

cls: 『watermark』1

現在可以開始定義css來建立水印效果了。

預設情況下，grid的單元格的背景是白顏色，第一步要做的就是修改單元格的背景，讓它是透明的。要實現這個，要先定義乙個包含「watermark」類的css選擇權，以便讓grid的單元格透明：

.watermark .x-grid-item 123

.watermark .x-grid-body:before 12345678910111213

上門的樣式會在grid的主體前插入內容，並將插入內容完全覆蓋grid的內容。元素中的內容是空的，且應用了背景，背景突破被設定為居中顯示，且完全填充整個元素。上述的不透明度被設定為了0.1（10%），這個可根據需要自行調整。

時不時會有使用者報告嘗試去建立乙個元件的例項時，會在建立附加的例項出現不知名的錯誤。為什麼第乙個例項能工作，而第二個不行呢？下面先來看看一種建立grid比較常見的情況：

ext.define('simpsongrid', ,
columns: [, ],
plugins: [ext.create('ext.grid.plugin.rowexpander', )]
});1234567891011121314151617181920212223

在這裡，定義了乙個簡單的grid，在grid中，使用了rowexpand外掛程式在第二行內顯示內容。這是常見的用來顯示特定記錄的額外資訊的方式。假設應用程式需要在不同的檢視內使用該grid的不同例項來顯示資料，這就會出現問題。

rowexpander類的乙個例項被應用到了simpsongrid類的原型，這意味著所有的simpsongrid類例項將會引用相同的外掛程式例項。當嘗試去展開第乙個gird例項的行主體的時候就會出現問題，這時，可以看到它應用到了第二例項。

要避免出現這類問題，需要使用乙個配置物件來讓框架處理例項化：

plugins: 1234

現在，每乙個grid 的例項都將擁有自己的外掛程式例項。如果要檢視共享外掛程式例項的所出現的問題，可以檢視這個》示例。

union -r

#remove development mode preprocessor directives/warnings -debug=false

concat #compresses the source file using the yui -yui

#strips comments from the output file, but preserves whitespace -strip

可以以上這些命令來建立響應檔案，假如檔名為compile.cfg，則可以使用以下命令來執行響應檔案：

sencha @compile.cfg1

響應檔案的相關資訊可檢視《>advanced sencha cmd guide》。

使用exclude選項，就可以方便的通過編輯響應檔案來指定只包含應用程式的源**還是只有框架。

下面將建立乙個只包含執行應用程式所需框架檔案的名為framework.js的檔案：

compile

exclude

and-debug=false concat

-yui -strip -out=framework.js1234567891011121314151617